Figma 插件学习（一）

news2024/9/23 9:35:49

一.插件介绍

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

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

1.插件API

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

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

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

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