Figma 插件学习(一)

一.插件介绍

插件在文件中运行,执行一个或多个用户操作,并允许用户自定义其体验或创建更高效的工作流程。

插件通过专用插件API与Figma的编辑器交互。还可以利用外部Web API。

1.插件API

插件API支持读写功能,允许查看、创建和修改文件的内容。可以通过figma全局对象访问大多数插件API。

插件首先暴露文件的内容。这是图层面板中存在的任何东西,以及属性面板中与这些图层相关的任何属性。插件可以查看和修改这些层(或节点)的各个方面,如颜色、位置、层次结构、文本等

但插件API不允许访问它正在运行的当前文件之外的任何内容。

  1. 来自任何团队或组织库的风格和组件。插件API只能访问当前在文件中或已通过以下函数导入到文件中的样式、组件和实例importComponentByKeyAsync()
  2. 通过URL访问的外部字体或网络字体。插件只能访问编辑器中可访问的字体,其中包括Figma的默认字体、共享组织字体或存储在计算机本地的字体。您需要加载您想要在插件中使用的任何字体。这不适用于您想在插件的UI中使用的字体。
  3. 其他文件元数据,如文件的团队或位置、权限或与该文件相关的任何评论。包括该文件的版本历史记录。您可以通过Figma的REST
    API读取文件的这些方面。

2.文件结构

Figma中的每个文件都由一个节点树组成,每个文件的根目录都是一个DocumentNode。DocumentNode是访问文件内容的方式。

在Figma设计文件中,每个DocumentNode都将有一个PageNode,代表该Figma文件中的每个页面。每个浏览器选项卡只能有一个文档节点,其每个子节点必须是PageNodes。

3.插件如何运行

插件是使用JavaScript、HTML和CSS编写的。这暴露了一个非常类似于浏览器的环境。但为了使插件系统安全稳定,一些浏览器API不可用或需要以不同的方式访问。

为了性能,figma采用插件代码在沙盒的主线程上运行的执行模型。沙盒是一个最小的JavaScript环境,不会公开浏览器API。

这意味着figma插件拥有所有标准的JavaScript ES6+,包括标准类型、JSON和Promise API、Uint8Array等二进制类型等。figma还添加了控制台API的最小版本。但XMLHttpRequest和DOM等浏览器API无法直接从沙盒获得。

要使用浏览器API(例如显示UI),需要创建一个内部带有<script>标签的<iframe>。
这可以用figma.showUI()完成。
在<iframe>中,可以编写任何HTML/JavaScript并访问任何浏览器API

主线程可以访问Figma“场景”(构成Figma文档的层级结构),但不能访问浏览器API。相反,iframe可以访问浏览器API,但不能访问Figma场景。主线程和iframe可以通过消息传递相互通信。

在这里插入图片描述

4.网络请求

要从插件内发出网络请求,例如调用自己的API或从服务器请求资源,请使用Figma的Fetch API。Figma Fetch API的使用方式与大多数浏览器中标准的WhatWG Fetch API类似。

(async () => {const response = await fetch("https://httpbin.org/get?success=true");const json = await response.json();const textNode = figma.createText();await figma.loadFontAsync(textNode.fontName as FontName);// success=true!textNode.characters = JSON.stringify(json.args, null, 2);figma.closePlugin();
})();

5.插件如何上线

  1. 建立一个figma的账号,并且绑定二次验证码
    在这里插入图片描述
  2. 导入figma插件,记得选择manifest文件

在这里插入图片描述

  1. 点击上线即可

在这里插入图片描述

二.插件建立

1.下载figma桌面端

桌面端下载地址

2.创建一个新插件

  1. 登录桌面应用程序并创建一个新的设计文件。
  2. 从菜单中,导航到插件>开发,然后选择新插件。
  3. 从创建插件模式中,选择并为插件命名。
  4. 选择自定义UI
  5. 单击“另存为”将其保存在磁盘上的任何地方。
  6. 打开生成的文件,按照readme操作就可以了

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

figma插件api地址

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

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

相关文章

傅里叶级数@正弦级数和余弦级数@奇偶延拓和周期延拓

文章目录 abstract正弦级数和余弦级数周期延拓奇偶延拓对延拓函数做区间限制 小结偶延拓方法奇延拓方法 例 abstract 傅里叶级数正弦级数和余弦级数奇偶延拓和周期延拓 正弦级数和余弦级数 奇函数的傅里叶级数是只含有正弦项的正弦级数偶函数的傅里叶级数是只含有余弦项的余…

打破传统束缚,释放服务潜能:本地生活服务商聚合系统引领行业新风向!

本地生活服务商聚合系统是一种集合多平台、多项目的创新型服务系统&#xff0c;它打破了传统服务商系统的一对一限制&#xff0c;为创业者和运营商带来了诸多优势。小多将深入探讨本地生活服务商聚合系统的优势。 随着互联网的快速发展&#xff0c;本地生活服务也迎来了蓬勃的发…

Mongodb命名和文档限制

选用mongodb时&#xff0c;需要了解与mongodb数据大小&#xff0c;命名上的限制。针对这些限制&#xff0c;本文针对这些限制进行翻译整理。 BSON文档 mongodb中的数据记录&#xff0c;按照文档的形式保存。文档保存在一种类似于JSON的BSON结构中。Mongodb对BSON做了一些限制…

RLlib六:实战用户环境

github源码 自定义用户gymnasium环境使用tune搜索不同的learning rate""" Example of a custom gym environment. Run this example for a demo.This example shows the usage of:- a custom environment- Ray Tune for grid search to try different learni…

el-tree 与table表格联动

html部分 <div class"org-left"><el-input v-model"filterText" placeholder"" size"default" /><el-tree ref"treeRef" class"filter-tree" :data"treeData" :props"defaultProp…

linux gdb调试

安装gdb yum install gdb -y 查看dump文件所在路径&#xff1a; 可通过 cat /proc/sys/kernel/core_pattern命令获取dump目录路径 gdb调试&#xff1a; 可执行文件为 xxx&#xff08;例如&#xff1a;main&#xff09;&#xff0c;结合其运行时产生的dump文件进行调试 命令&a…

彻底删除的文件如何恢复?分享正确方法!

“求救&#xff01;我在清理电脑的过程中&#xff0c;把一些比较久远的文件彻底删除了。但是我突然想起好像有些非常重要的数据也一同被删掉了&#xff0c;这可怎么办&#xff1f;有方法恢复彻底删除的文件么&#xff1f;” 在日常使用电脑的过程中&#xff0c;很多用户或许都会…

机器学习-笔记

绪论 参考期刊 ICCV 偏向视觉CVPR 偏向MLIAAA AI原理ICML 参考链接 CSDN 机器学习知识点全面总结 课堂内容学习-0912-N1 对于特征提取&#xff0c;简而言之就是同类聚得紧&#xff0c;异类分得开&#xff1b;   detection研究的是样本二分类问题&#xff0c;即分为正样本…

【C语言】——三道基础程序练习

&#x1f383;个人专栏&#xff1a; &#x1f42c; 算法设计与分析&#xff1a;算法设计与分析_IT闫的博客-CSDN博客 &#x1f433;Java基础&#xff1a;Java基础_IT闫的博客-CSDN博客 &#x1f40b;c语言&#xff1a;c语言_IT闫的博客-CSDN博客 &#x1f41f;MySQL&#xff1a…

Oracle 数据库中 查询时如何使用日期(时间)作为查询条件

在 Oracle 数据库中&#xff0c;可以使用日期&#xff08;时间&#xff09;作为查询条件来筛选数据。 格式化日期的三种方式 方式一: 关键字 DATE 使用关键字DATE&#xff0c; 仅表示日期类型&#xff0c;并不包含时间信息 方式二&#xff1a;关键字TIMESTAMP 使用关键字TI…

Rockdb简介

背景 最近在使用flink的过程中&#xff0c;由于要存储的状态很大&#xff0c;所以使用到了rockdb作为flink的后端存储&#xff0c;本文就来简单看下rockdb的架构设计 Rockdb设计 Rockdb采用了LSM的结构&#xff0c;它和hbase很像&#xff0c;不过严格的说&#xff0c;基于LS…

设计模式-行为型模式-责任链模式

一、什么是责任链模式 责任链模式是一种设计模式。在责任链模式里&#xff0c;很多对象由每一个对象对其下家的引用而连接起来形成一条链。请求在这个链上传递&#xff0c;直到链上的某一个对象决定处理此请求。发出这个请求的客户端并不知道链上的哪一个对象最终处理这个请求&…

Lavarel定时任务的使用

系统为window 执行命令(执行一次命令只会根据当前时间运行一次定时任务) php artisan schedule:run创建一个任务类(在Jobs文件夹下面) <?phpnamespace App\Jobs;use Illuminate\Bus\Queueable; use Illuminate\Contracts\Queue\ShouldBeUnique; use Illuminate\Contract…

VS2019编译安装GDAL(C++)程序库

一、GDAL简介 GDAL&#xff0c;全称Geospatial Data Abstraction Library&#xff0c;即地理空间数据抽象库&#xff0c;是一个在X/MIT许可协议下读写空间数据的开源库&#xff0c;可以通过命令行工具来进行数据的转换和处理。而在调用中我们常用的OGR&#xff08;OpenGIS Simp…

Talk2BEV: Language-enhanced Bird’s-eye View Maps for Autonomous Driving

论文标题为“Talk2BEV: Language-enhanced Bird’s-eye View Maps for Autonomous Driving”&#xff0c;主要介绍了一种新型的视觉-语言模型&#xff08;LVLM&#xff09;界面&#xff0c;用于自动驾驶情境中的鸟瞰图&#xff08;BEV&#xff09;映射。以下是论文的主要内容概…

MATLAB中std函数用法

目录 语法 说明 示例 矩阵列的标准差 三维数组的标准差 指定标准差权重 矩阵行的标准差 数组页的标准差 排除缺失值的标准差 标准差和均值 标准差 std函数的功能是得到标准差。 语法 S std(A) S std(A,w) S std(A,w,"all") S std(A,w,dim) S std(A…

2311rust,到38版本更新

1.35.0稳定版 此版本亮点是分别为Box<dyn FnOnce>,Box<dyn FnMut>和Box<dyn Fn>实现了FnOnce,FnMut和Fn闭包特征. 此外,现在可按不安全的函数指针转换闭包.现在也可无参调用dbg!. 为Box<dyn Fn*>实现Fn*装饰特征. 以前,如果要调用在盒子闭包中存储的…

nvm切换node后,没有npm

当我们想要在不同的 Node.js 版本之间切换的时候&#xff0c;通常会使用 nvm&#xff08;Node Version Manager&#xff09; 来完成。但是&#xff0c;当我们在使用 nvm 切换 Node.js 版本的时候&#xff0c;可能会遇到没有 npm 的情况。这种情况通常发生在我们在新环境或者重新…

Android---Gradle 构建问题解析

想必做 Android App 开发的对 Gradle 都不太陌生。因为有 Android Studio 的帮助&#xff0c;Android 工程师使用 Gradle 的门槛不算太高&#xff0c;基本的配置都大同小异。只要在 Android Studio 默认生成的 build.gradle 中稍加修改&#xff0c;就都能满足项目要求。但是&am…

『vue-router 要点』

参数或查询的改变并不会触发进入/离开的导航守卫&#xff0c;如何解决&#xff1a; 通过观察 $route 对象来应对这些变化&#xff0c; watch: {$route(to, from) {// 对路由变化作出响应...}}使用 beforeRouteUpdate 的组件内守卫。 beforeRouteUpdate(to, from, next) {// re…