🍱 Figma + FigJam 插件示例

使用 Figma + FigJam 插件 API 文档 的示例插件。

如需提出功能请求、报告错误或询问有关插件开发的问题，请查看可用的资源。

免责声明：

您在此处看到的资源是用于 Figma 插件开发的示例插件样本，FIGMA "按原样"提供这些资源，不作任何保证。我们不保证它们是完美的或始终按您的预期工作。我们不对您可能遇到的任何问题负责。在使用这些样本之前，您有责任彻底检查它们是否安全并适合您的需求。如果出现问题，Figma 不承担责任。如果您继续使用这些样本，即表示您同意这些条款。FIGMA 明确声明不作任何暗示的保证，包括对适销性、特定用途适用性、平静享用和非侵权的保证，以及由交易过程或贸易惯例产生的任何保证。

入门指南

这些插件使用 TypeScript 编写，以利用 Figma 的类型化插件 API。在将这些示例安装为开发插件之前，您需要使用 TypeScript 编译器编译代码。TypeScript 还可以在开发过程中监视代码变化，方便您在 Figma 中测试代码的新更改。

要安装 TypeScript，首先安装 Node.js。然后：

$ npm install -g typescript

接下来安装示例所依赖的包。目前，这只会安装最新版本的 Figma 类型文件。大多数示例会在其 tsconfig.json 中引用这个共享的类型文件。

$ npm install

现在，要编译条形图示例插件（例如）：

$ cd barchart
$ tsc

现在您可以从 Figma 桌面应用程序中导入条形图插件（从右键菜单中选择 插件 > 开发 > 从清单导入插件...）！

每个插件的代码都在该插件子目录中的 code.ts 文件中。如果插件显示一些 UI，HTML 将在 ui.html 中。

例如，条形图示例插件的代码在 barchart/code.ts 中，其 UI 的 HTML 在 barchart/ui.html 中。

设计插件 UI 样式

对于有 UI 的插件，我们建议匹配 Figma 的样式和行为。许多其他插件遵循这种约定，有助于在用户使用不同插件时创建一致的插件体验。以下是一些有助于设计 UI 样式的方法：

• Figma Plugin DS 一个用于设计 Figma 插件样式的轻量级 UI 库。
• Create Figma Plugin UI - 一个生产级 Preact 组件库，复制了 Figma 编辑器的 UI 设计

FigJam 插件

以下示例插件使用新的 FigJam 节点类型（便签、带文本的形状、连接器 和 图章），因此在 FigJam 中效果最佳，即在 manifest.json 文件中 editorType 为 'figjam'。

投票统计

<img src="https://yellow-cdn.veclightyear.com/835a84d5/a41fb0c7-f632-4c6c-b4c3-0bfe9dda51c7.gif" width="400" />

该插件将查找靠近便签的所有图章，并生成页面上便签旁边所有图章（投票）的统计。

查看源代码。

创建形状 + 连接器

<img src="https://yellow-cdn.veclightyear.com/835a84d5/eda4b9a7-8ce6-4ee0-95e7-79f05df3b9d4.png" width="400" />

该插件创建 5 个带文本节点的 圆角矩形 形状，并在它们之间添加连接器节点。

查看源代码。

其他示例

以下示例插件在 Figma 和 FigJam 中都可以使用。

条件插件

您可以创建具有条件逻辑的插件，根据它们在 Figma 还是 FigJam 中运行而有不同的行为。

<img src="https://yellow-cdn.veclightyear.com/835a84d5/d43793f1-7de3-4e2f-bf71-56f26ec43575.png" width="400" />

当该插件在 Figma 中运行时，它会打开一个窗口提示用户输入一个数字，然后在屏幕上创建相应数量的矩形。

当该插件在 FigJam 中运行时，它会打开一个窗口提示用户输入一个数字，然后创建相应数量的带文本节点的 圆角矩形 形状，并在每个形状之间添加一个连接器节点。

查看源代码。

无插件 UI 的示例

圆形文本

<img src="https://yellow-cdn.veclightyear.com/835a84d5/e7834f90-a6cb-400e-b339-52d179cee8f8.png" width="400" />

取用户选择的单个文本节点，并创建一个副本，将字符排列成圆形。

查看源代码。

反转图像颜色

<img src="https://yellow-cdn.veclightyear.com/835a84d5/9649b1b4-4b5b-435f-8e9a-6ee61a55105c.png" width="400" />

取当前选择中的图像填充并反转其颜色。

这演示了：

• 如何读取/写入存储在 Figma 文档中的图像，以及
• 如何使用 showUI 访问浏览器 API。

查看源代码。

元卡片

<img src="https://yellow-cdn.veclightyear.com/835a84d5/1f83e8df-6f96-44a2-ad28-30561316ff6f.gif" width="400" />

该插件将在文本节点中查找链接，并根据相关链接网页头部的 <meta> 标签在画布上创建包含图像、标题、描述和链接的元卡片。

查看源代码。

谢尔宾斯基三角形

<img src="https://yellow-cdn.veclightyear.com/835a84d5/3db51558-4748-4c34-9d48-1d0b01c974bc.png" width="400" />

使用圆形生成分形。

查看源代码。

矢量路径

<img src="https://yellow-cdn.veclightyear.com/835a84d5/993c4a65-c0f9-4735-8376-dd478ec97ad4.png" width="400" />

使用矢量路径生成三角形。

查看源代码。

有插件 UI 的示例

条形图

<img src="https://yellow-cdn.veclightyear.com/835a84d5/ae99da48-636a-45cb-923a-734d2e41c548.png" width="400" />

根据用户在模态框中的输入生成条形图。

查看源代码。

文档统计

<img src="https://yellow-cdn.veclightyear.com/835a84d5/02d1bddf-4adb-4c7f-89c1-d3f9b504a324.png" width="400" />

计算当前文档中每种 NodeType 的节点数量。

查看源代码。

饼图

<img src="https://yellow-cdn.veclightyear.com/835a84d5/3801ee95-5971-4129-88ac-85d335e4454e.png" width="400" />

根据用户在模态框中的输入生成饼图。

查看源代码。

文本搜索

<img src="https://yellow-cdn.veclightyear.com/835a84d5/27ba4259-aaa2-4f2f-9e4f-2baf09fa5084.png" width="400" />

根据用户在模态框中输入的查询在文档中搜索文本。

这演示了：

• 主代码和插件 UI 之间的高级消息传递，
• 如何在长时间运行的操作中保持 Figma 的响应性，以及
• 如何使用视口 API。

查看源代码。

图标拖放

<img src="https://yellow-cdn.veclightyear.com/835a84d5/e87db55c-bdcf-446b-b9a1-bec1922ffce6.png" width="400" />

允许从模态框将简单的图标库拖放到画布上。

这演示了如何注册拖放事件的回调函数，以及如何从插件 iframe 传递拖放数据。

查看源代码。

托管的图标拖放

<img src="https://yellow-cdn.veclightyear.com/835a84d5/d59ddbe6-5ae6-4197-b6f1-f670881b177f.png" width="400" />

允许从运行外部托管 UI 的模态框将简单的图标库拖放到画布上。

这演示了如何注册拖放事件的回调函数，以及如何使用拖放事件中的 dataTransfer 对象嵌入拖放数据。

查看源代码。

PNG 裁剪

<img src="https://yellow-cdn.veclightyear.com/835a84d5/1f267088-9b65-419a-b3c9-a886f786ccc1.png" width="400" /> 当PNG图片拖放到画布上时进行裁剪。

这展示了如何注册拖放事件的回调函数,以及如何读取被拖放文件的字节数据。

查看源代码。

开发模式插件示例

代码片段保存器

这是一个插件示例,允许你直接在节点上创作和保存代码片段,当选中该节点时会在检查面板中渲染。

查看源代码。

代码生成

代码生成插件的示例

查看源代码。

开发模式

一个配置为可在Figma设计、开发模式检查以及运行代码生成中工作的插件示例。

查看源代码。

使用变量的示例

样式转变量

将Figma样式转换为变量的插件示例

查看源代码。

变量导入/导出

导入和导出变量的插件示例

查看源代码。

带参数的示例

跳转到

<img src="https://yellow-cdn.veclightyear.com/835a84d5/5642523e-d9bb-4c91-8ff9-64d8158db696.png" width="400" />

一个可以快速跳转到Figma文件中任何图层或页面的插件。

要了解更多关于如何接受参数作为插件输入的信息,请查看此指南。

查看源代码。

调整大小器

<img src="https://yellow-cdn.veclightyear.com/835a84d5/edc828cf-03f9-42cb-86ba-ac06a7f70563.png" width="400" />

调整所选形状的大小。有两个子菜单,允许绝对调整和相对调整。

要了解更多关于如何接受参数作为插件输入的信息,请查看此指南。

查看源代码。

SVG插入器

<img src="https://yellow-cdn.veclightyear.com/835a84d5/9ecd5408-5705-4bec-8e51-2af65caa95ce.png" width="400" />

将SVG图标插入画布。

要了解更多关于如何接受参数作为插件输入的信息,请查看此指南。

查看源代码。

文本审阅

<img src="https://yellow-cdn.veclightyear.com/835a84d5/63609024-bfe0-4e64-9d8c-f8e270e77183.png" width="400" />

展示如何使用文本审阅API在编辑文本节点时提出建议和标记更改。

查看源代码。

问答游戏

<img src="https://yellow-cdn.veclightyear.com/835a84d5/41861968-7c0c-4e26-837f-46b005d30f58.png" width="400" />

生成一系列来自外部问答API的问题。

要了解更多关于如何接受参数作为插件输入的信息,请查看此指南。

查看源代码。

消息传递

一个非常基础的示例,展示如何使用postMessage在UI和Figma画布之间进行通信。

查看源代码。

首都

<img src="https://yellow-cdn.veclightyear.com/835a84d5/fadeacf6-4f0e-4a9d-9ca2-d576b86efc86.png" width="400" />

查找一个国家的首都。这展示了:

• 如何发起网络请求以填充参数建议

要了解更多关于如何接受参数作为插件输入的信息,请查看此指南。

查看源代码。

使用打包的示例

React

<img src="https://yellow-cdn.veclightyear.com/835a84d5/0ba90bc3-6c0d-49c5-815f-42a373b12f48.png" width="400" />

创建矩形!这展示了:

• 使用Webpack打包插件代码
• 使用带TSX的React

    $ npm install
    $ npm run build

如果你对打包感兴趣,esbuild和Webpack示例是很好的起点。

其他Figma插件样例和起步项目

• Create Figma Plugin - 一个用于开发Figma插件的综合工具包。
• Figma Plugin Boilerplate - 一个使用HTML、CSS(+ SCSS)和原生JavaScript创建Figma插件的起步项目,不使用任何框架。
• Figsvelte - 使用Svelte创建Figma插件的样板。
• Figplug - 一个用于构建Figma插件的小程序。它提供了大多数项目所需的所有功能:TypeScript、React/JSX、资源打包、插件清单生成等。
• Plugma - 一个简化插件创建的命令行工具。它使用本地开发服务器以实现更快的开发和更好的调试。使用Vite构建,因此支持大多数框架,还在不断增加更多支持。
• Figma Kit - 一组用于构建Figma插件的React组件。
• Figma Plugin Starter - 一个使用React、Vite和Reshaped的Figma插件样板。

如果你希望在插件中模仿Figma UI的外观和感觉,可以查看我们的UI2设计系统,或者尝试Tom的Figma Plugin DS,这是一个社区提供的CSS和JavaScript文件集。