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

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.kler.cn/a/135089.html

相关文章:

  • 矩阵的各种计算:乘法、逆矩阵、转置、行列式等——基于Excel实现
  • dapp获取钱包地址,及签名
  • Java基于SpringBoot+Vue的宠物共享平台的设计与实现(附源码,文档)
  • 对称加密与非对称加密:密码学的基石及 RSA 算法详解
  • 什么是两化融合
  • Spring Boot 核心配置文件
  • STM32框架之按键扫描新思路
  • Burpsuite抓HTTPS证书导入问题
  • 《rPPG》——(1)PyTorch——Windows环境配置
  • 如何使用MybatisPlus进行数据分页显示
  • SpringMVC log4j1升级log4j2
  • 数据采集与大数据架构分享
  • uniapp App 端 版本更新检测
  • 刷题方法论
  • 中国智能音箱市场销量下降,百度稳居第一 /中国即评出10个大模型创新案例 |魔法半周报
  • Dockerfile基础
  • 前台查看日志功能
  • RK3568 + YT 9215交换机芯片,MAC TO MAC 调试记录
  • 有趣的按钮分享
  • 【备忘录】Docker容器、镜像删除与资源清理命令
  • PC3329L DC-DC降压 10V-100V输入3A大流输出带EN功能实现零功耗只需极少元器件
  • 如何解决 Critical dependency: the request of a dependency is an expression ?
  • 全国行业就业数据,了解第一二三产业的就业人数~
  • 打不开github网页解决方法
  • MFC 对话框
  • Scala--- Actor通信模型