Figma 插件学习(二)- 常用属性和方法

一. 如何调试figma插件

Plugins > Development > Show/Hide console 打开控制台即可开始调试

# 一. 给节点设置独有属性

二.节点类型

根据不同的节点类型,也是会有不同的方法和属性,介绍几个常用节点类型

1.FrameNode
框架节点是用于定义布局层次结构的容器。它类似于HTML中的<div>。它与GroupNode不同,GroupNode更接近图层文件夹。可以使用figma.createFrame创建框架。

框架通常有自己的尺寸,尽管在自动布局框架的情况下,尺寸可以由其子帧的大小决定。

用户可以通过UI将框架转换为组,反之亦然。

2.GroupNode
组节点是一个容器,用于在语义上分组相关的节点。可以将它们想象成图层面板中的一个文件夹。可以通过使用 figma.group 对现有节点进行分组来创建组。

在 Figma 中,组总是定位和大小以适应其内容。因此,虽然可以移动或调整组的大小,但可以预料的事,如果改变其内容,组的位置和大小会发生变化。

在 Figma 中,组必须总是有子节点。没有子节点的组会自我删除。

3.TextNode

文本节点表示文本,其中整个节点或单个字符范围都可以具有颜色(填充)、字体大小、字体名称等属性。

4. ComponentNode
组件是可以在设计中重复使用的UI元素。它们就像帧(frames),具有自动更新副本称为实例的额外功能(InstanceNode)。

该文件可能已经包含此框架的实例,或者可以通过createInstance创建它们。当在组件上设置属性(或更改其内容)时,该组件的所有实例都将更新。

5. InstanceNode

实例是组件的副本(ComponentNode)。如果组件被修改,它们将始终自动更新。可以使用任何组件节点上的createInstance方法创建实例。

当ComponentNode更改时,更新InstanceNode可能会很慢。尽量避免涉及交替写入ComponentNode,然后从该组ComponentNode的InstanceNode读取的访问模式。

6.判断节点类型
获取到节点(node),然后读取type就行了。并且不同的节点类型,在图层里展示的图标也不一样

if (node.type === 'FRAME') {// node 是一个 FrameNode
} else if (node.type === 'GROUP') {// node 是一个 GroupNode
} else if (node.type === 'TEXT') {// node 是一个 TextNode
} else {// node 是其他类型的节点
}

在这里插入图片描述

三. 节点属性

1. 通过id获取节点

const textNode = figma.getNodeById(id);

下图为textNode的节点的属性,它是一个文字节点,能查看宽,高,字体大小,坐标等信息。

在这里插入图片描述

2. 常用属性
各个不同的节点,他们的属性是不一样的,记录几个常用属性。

absoluteBoundingBox属性
节点的边界不包括阴影或笔画等渲染属性。此属性内的x和y表示节点在页面上的绝对位置。

如果要在特定位置新建节点,建议使用绝对坐标来做,因为准确。

 const { x, y, height } = textNode.absoluteBoundingBox;

name属性
出现在图层面板中的图层名称。用figma.root.name将返回只读的当前文件的名称。

如果节点是TextNode,默认情况下,该名称将根据characters属性自动更新(autoRename为真)。如果手动覆盖文本节点的名称,它会将autoRename设置为false。这与编辑器中的行为相匹配。

 textNode.name = name;

characters属性
文本节点中的原始字符,设置此属性需要加载字体。
设置此属性将重置应用于字符范围的样式。

如果autoRename === true,设置characters属性可以更改节点的name。

await figma.loadFontAsync(textNode.fontName);//先加载字体,然后可以设置。所以我们先获取这个文字节点的字体
textNode.characters = 'Owners'; 

在这里插入图片描述

visible属性
节点是否可见。不影响插件访问节点的能力。

textNode.visible = false;//这样节点就不可见了

parent属性
返回此节点的父节点。但根节点(即 figma.root)没有父节点

四. 保密的给节点赋予新的属性并且读取它

1. setPluginData(key,value)
允许在任何节点或样式上存储自定义信息,对自己的插件也保密。这里的保密意味着不能通过查看节点的属性来获取设置的值

  1. key
    存储数据的密钥。这类似于通过obj[key] = value写入普通对象。
  2. value
    想要存储的数据。如果想存储字符串以外的值类型,请先通过JSON.stringify和JSON.parse将其编码为JSON字符串。如果将值设置为空字符串(“”),则键/值对将被删除。
  3. 其他
    数据特定于自己的插件ID。带有其他ID的插件将无法读取此数据。但可以使用相同的密钥调用getPluginData来检索它。要查找插件存储在节点或样式上的所有数据,请使用getPluginDataKeys。

2. getPluginData

检索使用setPluginData存储在该节点或样式上的自定义信息。如果所提供的键没有存储数据,则返回一个空字符串。

3. getPluginDataKeys

检索使用setPluginData存储在此节点或样式上的所有密钥的列表。这可以迭代插件私下存储在节点或样式上的所有数据。

4. 使用

textNode.setPluginData('testKey', 'testValue');
textNode.getPluginData("testKey");// testValue
textNode.getPluginDataKeys()// [testKey] 找出所有的key名

五. 用figma.clientStorage存储数据

1. 描述

figma.clientStorage API允许在用户的本地机器上存储数据。与存储在文档中的数据(如setPluginData)不同,此数据不会跨用户同步。它和Window.localStorage API很像,但它是异步的,并允许存储对象,数组,字符串,数字,布尔值,null, undefined和Uint8Array(注解1)。与localStorage一样,清除浏览器缓存等用户操作可能会清除所有存储的数据。

数据特定于使用的插件ID,带有其他ID的插件将无法读取此数据。

每个插件总共获得1MB的存储空间。可以通过将密钥的大小添加到转换为JSON的值的大小来近似密钥/值对使用的配额。主要例外是Uint8Array值计为Uint8Array的大小,而不是转换为JSON的数组。

  • 数据私下存储是为了稳定性,而不是安全性。它阻止其他插件访问您的数据。
  • 如果插件ID发生变化,数据将无法访问。

2. 实际使用


//因为是异步获取,建议使用async,await变为同步//使用给定的key为客户端存储设置一个值。如果存储成功,返回的承诺将得到解决,如果存储失败,返回的承诺将以错误消息拒绝。
const content ='test'
figma.clientStorage.setAsync("copyData", content);//使用给定key从客户端存储中检索一个值。如果该密钥没有存储值,此函数将异步返回undefined。
const copyData = figma.clientStorage.getAsync("copyData");// test

3.如何查看
进入应用,在IndexedDB里就能找到了
在这里插入图片描述

六.注解

注解1

Uint8Array 是 JavaScript 的一种类型化数组,用于表示长度固定的、8位无符号整数的数组。它可以用于处理二进制数据,比如图像、音频、视频等。

每个元素都是一个 8 位无符号整数,取值范围从 0 到 255。如果尝试设置超出这个范围的值,它会被自动截断(例如,256 会变成 0,-1 会变成 255)。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/172344.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CUDA initialization failure with error: 999

ubuntu20.04&#xff0c;安装tensorRT, 执行example里面的./sample_char_rnn程序&#xff0c;测试时候报了如标题的一个错误&#xff0c;居然如下两行代码这样解决了&#xff0c;这两行命令好像是重新加载nvidia内核模块&#xff0c;有点玄学&#xff1a; sudo rmmod nvidia_u…

GWAS:plink进行meta分析

之前教程提到过Metal是可以做Meta分析&#xff0c;除了Metal&#xff0c;PLINK也可以进行Meta分析。 命令如下所示&#xff1a; plink --meta-analysis gwas1.plink gwas2.plink gwas3.plink logscale qt --meta-analysis-snp-field SNP --meta-analysis-chr-field CHR --me…

BrokerChain

BrokerChain: A Cross-Shard Blockchain Protocol for Account/Balance-based State Sharding 我总感觉这篇文章不完整&#xff0c;缺少一些东西。或者说有些地方并没有详细说。比如状态图的构建&#xff0c;网络重分片的的配置过程。都直接忽略了。 Motivation 1 跨片交易不…

流程图是什么,用什么软件做?

在工作流程中&#xff0c;经常会遇到需要图形化呈现整个流程的情况。流程图就是一种一目了然的图形化表现方式&#xff0c;便于人们理解、沟通和管理整个流程。 1.Visio Visio是一款微软公司的图表软件&#xff0c;可以用于创建各种类型的流程图、组织结构图、网络图、平面图…

编译原理词法分析器

算法描述 对于给出的源代码&#xff0c;我们按行将其读入&#xff0c;对于每一行单独进行词法分析。 过滤行前后空格对字符串进行词语的分割 有空格则把空格前的字符归为一个词比较上一个字符和当前字符是否需要进行分割 检查词语是否合法词语合法则按 [待测代码中的单词符号…

常见树种(贵州省):019滇白珠、杜茎山、苍山越桔、黄背越桔、贵州毛柃、半齿柃、钝叶柃、细枝柃、细齿叶柃木、土蜜树、山矾、胡颓子、檵木

摘要&#xff1a;本专栏树种介绍图片来源于PPBC中国植物图像库&#xff08;下附网址&#xff09;&#xff0c;本文整理仅做交流学习使用&#xff0c;同时便于查找&#xff0c;如有侵权请联系删除。 图片网址&#xff1a;PPBC中国植物图像库——最大的植物分类图片库 一、滇白珠…

【面经八股】搜广推方向:常见面试题(一)

【面经&八股】搜广推方向:常见面试题(一) 文章目录 【面经&八股】搜广推方向:常见面试题(一)1. 线下效果提升、线上效果不好。2. XGBoost 和 GBDT是什么?有什么区别?3. 偏差与方差。延伸知识(集成学习的三种方式: Bagging、Boosting、Stacking)。4. 随机森林…

【Leetcode】【实现循环队列】【数据结构】

代码实现&#xff1a; typedef struct {int front;int back;int k;int* a;} MyCircularQueue;bool myCircularQueueIsEmpty(MyCircularQueue* obj) {return obj->frontobj->back; }bool myCircularQueueIsFull(MyCircularQueue* obj) {return (obj->back1)%(obj->…

【数据中台】开源项目(2)-Wormhole流式处理平台

Wormhole 是一个一站式流式处理云平台解决方案&#xff08;SPaaS - Stream Processing as a Service&#xff09;。 Wormhole 面向大数据流式处理项目的开发管理运维人员&#xff0c;致力于提供统一抽象的概念体系&#xff0c;直观可视化的操作界面&#xff0c;简单流畅的配置管…

GEE 22:基于GEE实现物种分布模型(更新中。。。。。。)

物种分布模型 1. 数据点准备1.1 数据加载1.2 去除指定距离内的重复点1.3 定义研究区范围1.4 选择预测因子1.5 伪不存在点生成 1. 数据点准备 1.1 数据加载 首先需要将CSV文件导入到GEE平台中&#xff0c;同样也可以导入shp格式文件。 // 1.Loading and cleaning your species …

P17C++析构函数

目录 前言 01 什么是析构函数 1.1 举个栗子 02 为什么要写析构函数 前言 今天我们要讨论一下它的“孪生兄弟”&#xff0c;析构函数&#xff0c;它们在某些方面非常相似。 与构造函数相反&#xff0c;当对象结束其生命周期&#xff0c;如对象所在的函数已调用完毕时&…

Linux学习笔记-芯片性能检测

文章目录 概述Dhrystone&#xff08;单核性能测试工具&#xff09;简介&#xff1a;源码下载&#xff1a;源码编译&#xff1a;使用及输出结果 coremark&#xff08;多核性能测试工具&#xff09;简介&#xff1a;源码下载&#xff1a;源码编译&#xff1a;使用及输出结果&…

如何深刻理解从二项式分布到泊松分布

泊松镇贴 二项分布和泊松分布的表达式 二项分布&#xff1a; P ( x k ) C n k p k ( 1 − p ) n − k P(xk) C_n^kp^k(1-p)^{n-k} P(xk)Cnk​pk(1−p)n−k 泊松分布&#xff1a; P ( x k ) λ k k ! e − λ P(xk) \frac{\lambda^k}{k!}e^{-\lambda} P(xk)k!λk​e−…

坚鹏:中国工商银行数字化背景下银行公司业务如何快速转型培训

中国工商银行作为全球最大的银行&#xff0c;资产规模超过40万亿元&#xff0c;最近几年围绕“数字生态、数字资产、数字技术、数字基建、数字基因”五维布局&#xff0c;深入推进数字化转型&#xff0c;加快形成体系化、生态化实施路径&#xff0c;促进科技与业务加速融合&…

【2023 年终盘点】今年用的最多的 10 款 Mac 应用

分享顺哥今年用的最多的 10 款 Mac 应用。 排名不分先后,涉及各个方面的应用。 大家有好用的软件也欢迎在评论区留言分享! 顺哥博客 部分软件下载地址:顺哥的文件站 Mac 篇 以下 10 款应用大多数为免费应用,收费的会标明。 部分收费软件的破解版可以到这边下载 https:…

Vue框架学习笔记——数据代理

文章目录 前文提要数据代理的概念MVVM模型和Vue中的数据代理M&#xff0c;模型V&#xff0c;视图VM&#xff0c;视图模型 前文提要 本人仅做个人学习记录&#xff0c;如有错误&#xff0c;请多包涵 数据代理的概念 使用一个对象代理对另一个对象中属性的操作。 MVVM模型和Vu…

开发、测试、生产环境

开发环境&#xff1a;开发环境是程序猿们专门用于开发的服务器&#xff0c;配置可以比较随意&#xff0c; 为了开发调试方便&#xff0c;一般打开全部错误报告。简单讲就是项目尚且处于编码阶段&#xff0c;一般这时候会把代码放在开发环境中&#xff0c;不会放在生产环境中。 …

【JMeter】不同场景下的接口请求

场景1: 上传文件接口即Content-Type=multipart/form-data 步骤: 1. 接口url,method以及path正常填写 2.文件上传content-type是multipart/form-data,所以可以勾选【use multipart/form-data】,如果还有其他请求头信息可以添加一个请求头元件 3.请求参…

ubuntu 使用快照启动polygon主网

文章目录 一、 环境部署1.1 golang环境部署1.2 git安装1.3 gcc安装1.4 zstd 安装1.5 pv 安装1.6 aria2c 安装二、安装 polygon2.1 heimdall 安装2.1.1 heimdall 编译2.1.2 初始化 heimdall2.1.3 修改配置文件2.2 bor 安装2.2.1 bor 编译2.2.2 创建bor数据目录2.2.3 修改配置文件…

痤疮分类-yolov5 学习过程

1、在github上下载yolov5-5.0的源码。 GitHub - ultralytics/yolov5: YOLOv5 &#x1f680; in PyTorch > ONNX > CoreML > TFLite