当前位置: 首页 > news >正文

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)。

相关文章:

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

一. 如何调试figma插件 Plugins > Development > Show/Hide console 打开控制台即可开始调试 二.节点类型 根据不同的节点类型&#xff0c;也是会有不同的方法和属性&#xff0c;介绍几个常用节点类型 1.FrameNode 框架节点是用于定义布局层次结构的容器。它类似于HTM…...

基于Flutter的图片浏览器的实现

一 效果展示&#xff1a; 1. 图片展示&#xff1a; 2.混色&#xff0c;平铺&#xff0c;拉伸&#xff0c;原图展示 二 实验准备&#xff1a; 1.在包结构中创建images包来存放我们用到的图片&#xff0c;在pubspec.yaml中声明路径&#xff1a; 2. 检查虚拟机是否正常运行&…...

STM32-使用固件库新建工程

参考链接: 【入门篇】11-新建工程—固件库版本&#xff08;初学者必须认认真真看&#xff09;_哔哩哔哩_bilibili 使用的MCU是STM32F103ZET6 。 这篇参考的是野火的资料&#xff0c;可以在“野火大学堂”或者它的论坛上下载。&#xff08;我通常是野火和正点原子的资料混着看的…...

商用车量产智能驾驶路径思考

1、商用车量产智能驾驶特点 2、量产自动驾驶路径 3、商用车ADAS法规件 4、高等级自动驾驶...

flink消费kafka限制消费速率

flink版本1.14 别的版本类似 需要速率限制的情况 1.任务异常在停止的时间内大量数据挤压 2.新任务上线需要铺底数据,消费几天前的数据 在不增加内存和并行度的情况下,如果任务启动可能会造成oom,这时需要进行速率限制。 前提 漏桶算法(Leaky Bucket Algorithm): 原…...

搭建Appium工具环境

1、安装Java Development Kit&#xff08;JDK&#xff09; 前往Oracle官网下载JDK。 在https://www.oracle.com/java/technologies/javase-jdk11-downloads.html 找到最新版本的JDK。根据操作系统选择适合的版本&#xff0c;并根据指示下载安装程序。 安装JDK。运行下载的安…...

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

【面经&八股】搜广推方向:常见面试题(六) 文章目录 【面经&八股】搜广推方向:常见面试题(六)1. Memorization 和 Generalization2. Wide 和 Deep3. Cross-product transformation4. 推荐系统划分5. 线性模型6. Embedding-Based 模型7. 推荐系统工作流程8. Wide P…...

6.前端--CSS-基础选择器【2023.11.26】

1.CSS基本选择器 标签选择器&#xff1a; 标签选择器&#xff08;元素选择器&#xff09;是指用 HTML 标签名称作为选择器&#xff0c;按标签名称分类&#xff0c;为页面中某一类标签指定统一的 CSS 样式。标签选择器可以把某一类标签全部选择出来&#xff0c;比如所有的 <…...

Java制作“简易王者荣耀”小游戏

第一步是创建项目 项目名自拟 第二部创建个包名 来规范class 然后是创建类 GameFrame 运行类 package com.sxt;import java.awt.Graphics; import java.awt.Image; import java.awt.Toolkit; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; im…...

正则表达式例题-PTA

PTA-7-55 判断指定字符串是否合法-CSDN博客 7-54 StringBuffer-拼接字符串 题目&#xff1a; 输入3个整数n、begin、end。 将从0到n-1的数字拼接为字符串str。如&#xff0c;n12&#xff0c;则拼接出来的字符串为&#xff1a;01234567891011 最后截取字符串str从begin到end(包…...

基于Python的南京二手房数据可视化分析的设计与实现

点我完整下载&#xff1a;基于Python的南京二手房数据可视化分析的设计与实现.docx 基于Python的南京二手房数据可视化分析的设计与实现 "Design and Implementation of Python-based Visualization Analysis for Nanjings Second-hand Housing Data" 目录 目录 2 摘…...

软件特征与类型

软件包括计算机系统中的程序和文档&#xff0c;它是一组能完成特定任务的二进制代码。 ▶1.软件的特性 1)软件是一种逻辑元素 软件是逻辑的而非物理的元素&#xff1b;软件是设计开发的&#xff0c;而不是生产制造的。虽然软件开发和硬件制造存在某些相似点&#xff0c;但二…...

无人机遥控器方案定制_MTK平台无人设备手持遥控终端PCB板开发

随着科技的不断发展和无人机技术的逐步成熟&#xff0c;无人机越来越受到人们的关注。作为一种高新技术&#xff0c;无人机的应用范围不断拓展&#xff0c;包括农业、环境监测、城市规划、运输物流等领域。同时&#xff0c;无人机的飞行控制技术也得到了不断的优化和提升。 早…...

【C++】静态成员

静态成员就是在成员变量和成员函数前加上关键字static&#xff0c;称为静态成员。 静态成员分为&#xff1a; 静态成员变量 所有对象共享同一份数据在编译阶段分配内存类内声明&#xff0c;类外初始化 静态成员函数 所有对象共享同一个函数静态成员函数只能访问静态成员变量 …...

单片机学习10——独立按键

独立按键输入检测&#xff1a; #include<reg52.h>sbit LED1P1^0; sbit KEY1P3^4;void main() {KEY11;while(1){if(KEY10) //KEY1按下{LED10; //LED1被点亮}else{LED11;}} } 按键 #include<reg52.h>#define uchar unsigned char #define uint unsigned intsbit …...

微服务系列(三)--通过spring cloud zuul过滤器实现线上流量复制

思路 补充一下&#xff0c;为什么这里我会想到使用"pre"类型的过滤器实现流量复制/流量镜像。 刚开始的时候&#xff0c;参考了阿里的流量镜像实现方案&#xff1a; 配置流量复制策略&#xff0c;阿里的方案本身是对基于云原生envoy做的&#xff0c;这确实是istio原…...

微信小程序image组件图片设置最大宽度 宽高自适应

问题描述&#xff1a;在使用微信小程序image组件的时候&#xff0c;在不确定图片宽高情况下 想给一个最大宽度让图片自适应&#xff0c;按比例&#xff0c;image的widthfiex和heightFiex并不能满足&#xff08;只指定最大宽/高并不会生效&#xff09; 问题解决&#xff1a;使用…...

虚幻学习笔记—文本内容处理

一、前言 本文使用的虚幻引擎5.3.2&#xff0c;在虚幻中已经集成了很多可以直接处理多样化文本的蓝图&#xff0c;比如格式化动态显示、浮点数多样化等。 二、实现 2.1、格式化文本显示动态内容&#xff1a;在设置某个文本时可以使用“Format Text”蓝图设置自定义可以的显示…...

WhatsApp API号解封教程(内含图片指引和申诉模板)

WhatsApp API 是专门为中大型企业设置的WhatsApp APP页面&#xff0c;API号并不像WhatsApp个人号和企业号一样可以直接从App Store 或Google Play 下载&#xff0c;而是需要对接官方来连接API。 虽然申请WhatsApp API号的程序和手续比较复杂&#xff0c;但是这个操作对于企业来…...

爬取极简壁纸

js反编译的代码需要解密之类的&#xff0c;直接给我干蒙圈了&#xff0c;借助selenium可以直接获取到调式工具中的源码&#xff0c;可以获取渲染后的链接&#xff0c;然后将链接交给下载函数&#xff08;使用异步提高效率&#xff09;即可。 后续学习完js反编译的话&#xff0…...

惊艳音效生成效果:HunyuanVideo-Foley实际作品展示与测评

惊艳音效生成效果&#xff1a;HunyuanVideo-Foley实际作品展示与测评 你肯定有过这样的经历&#xff1a;精心拍摄了一段视频&#xff0c;画面构图、光影、运镜都堪称完美&#xff0c;但导出后总觉得少了点什么。对&#xff0c;就是声音。画面里的人物在奔跑&#xff0c;却听不…...

3个颠覆性技巧:NVIDIA Profile Inspector如何释放显卡隐藏性能

3个颠覆性技巧&#xff1a;NVIDIA Profile Inspector如何释放显卡隐藏性能 【免费下载链接】nvidiaProfileInspector 项目地址: https://gitcode.com/gh_mirrors/nv/nvidiaProfileInspector NVIDIA Profile Inspector是一款专业的显卡参数配置工具&#xff0c;能够深度…...

Intv_AI_MK11后端开发进阶:高并发场景下的系统设计与性能调优

Intv_AI_MK11后端开发进阶&#xff1a;高并发场景下的系统设计与性能调优 1. 高并发系统的核心挑战 当系统面临每秒数万甚至数十万的请求时&#xff0c;传统的架构设计往往会暴露出各种性能瓶颈。我们通过Intv_AI_MK11分析发现&#xff0c;高并发场景下最常见的三大挑战是&am…...

基础入门-版本控制-GitLab/Gitea 基本使用

GitLab/Gitea 基本使用 在前面的章节中,我们学习了 Git 基础命令和团队协作流程。在实际工作中,这些操作都是围绕着代码托管平台展开的。GitLab 和 Gitea 是两种广泛使用的自托管 Git 仓库管理工具,它们提供了仓库管理、权限控制、代码审查、CI/CD 等功能,是运维团队进行配…...

OpenClaw故障排查指南:Qwen3.5-9B-AWQ-4bit接口连接失败解决方案

OpenClaw故障排查指南&#xff1a;Qwen3.5-9B-AWQ-4bit接口连接失败解决方案 1. 问题背景与典型症状 上周我在本地部署Qwen3.5-9B-AWQ-4bit模型时&#xff0c;遇到了OpenClaw连接失败的棘手问题。明明模型服务已经启动&#xff0c;但OpenClaw始终报错"Model provider un…...

智慧校园平台采购,如何平衡功能、价格与服务?

✅作者简介&#xff1a;合肥自友科技 &#x1f4cc;核心产品&#xff1a;智慧校园平台(包括教工管理、学工管理、教务管理、考务管理、后勤管理、德育管理、资产管理、公寓管理、实习管理、就业管理、离校管理、科研平台、档案管理、学生平台等26个子平台) 。公司所有人员均有多…...

告别老系统!手把手教你用欧空局新版哥白尼数据空间下载Sentinel-2影像(附波段组合预览技巧)

告别老系统&#xff01;手把手教你用欧空局新版哥白尼数据空间下载Sentinel-2影像&#xff08;附波段组合预览技巧&#xff09; 当欧空局宣布停用老版数据下载系统时&#xff0c;许多遥感从业者都感到一丝不安——毕竟旧系统虽然界面陈旧&#xff0c;但操作流程早已烂熟于心。作…...

如何用AI4Animation快速制作吸睛的角色动画社交媒体内容

如何用AI4Animation快速制作吸睛的角色动画社交媒体内容 【免费下载链接】AI4Animation Bringing Characters to Life with Computer Brains in Unity 项目地址: https://gitcode.com/GitHub_Trending/ai/AI4Animation AI4Animation是一款基于Unity引擎的角色动画工具&a…...

【ROS2】DDS通信协议在自动驾驶中的关键应用

1. DDS协议如何成为自动驾驶的"神经系统" 想象一下自动驾驶汽车在城市道路穿行的场景&#xff1a;激光雷达每秒产生数十万点云数据、摄像头实时捕捉高清图像、毫米波雷达持续监测周围物体运动状态——这些海量数据需要在感知、预测、决策模块间高速流转&#xff0c;任…...

OpenClaw技能开发入门:为Phi-3-vision-128k-instruct定制自动化流程

OpenClaw技能开发入门&#xff1a;为Phi-3-vision-128k-instruct定制自动化流程 1. 为什么需要为Phi-3开发OpenClaw技能&#xff1f; 去年夏天&#xff0c;我接手了一个图像处理自动化项目。当时每天要手动处理数百张产品图&#xff0c;用Photoshop调整尺寸、添加水印、生成缩…...