访问官网
Github
文档
论文🍱 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'。
投票统计
该插件将查找靠近便签的所有图章，并生成页面上便签旁边所有图章（投票）的统计。
创建形状 + 连接器
该插件创建 5 个带文本节点的 圆角矩形 形状，并在它们之间添加连接器节点。
其他示例
以下示例插件在 Figma 和 FigJam 中都可以使用。
条件插件
您可以创建具有条件逻辑的插件，根据它们在 Figma 还是 FigJam 中运行而有不同的行为。
当该插件在 Figma 中运行时，它会打开一个窗口提示用户输入一个数字，然后在屏幕上创建相应数量的矩形。
当该插件在 FigJam 中运行时，它会打开一个窗口提示用户输入一个数字，然后创建相应数量的带文本节点的 圆角矩形 形状，并在每个形状之间添加一个连接器节点。
无插件 UI 的示例
圆形文本
取用户选择的单个文本节点，并创建一个副本，将字符排列成圆形。
反转图像颜色
取当前选择中的图像填充并反转其颜色。
这演示了：
- 如何读取/写入存储在 Figma 文档中的图像，以及
- 如何使用
showUI访问浏览器 API。
元卡片
该插件将在文本节点中查找链接，并根据相关链接网页头部的 标签在画布上创建包含图像、标题、描述和链接的元卡片。
谢尔宾斯基三角形
使用圆形生成分形。
矢量路径
使用矢量路径生成三角形。
有插件 UI 的示例
条形图
根据用户在模态框中的输入生成条形图。
文档统计
计算当前文档中每种 NodeType 的节点数量。
饼图
根据用户在模态框中的输入生成饼图。
文本搜索
根据用户在模态框中输入的查询在文档中搜索文本。
这演示了：
- 主代码和插件 UI 之间的高级消息传递，
- 如何在长时间运行的操作中保持 Figma 的响应性，以及
- 如何使用视口 API。
图标拖放
允许从模态框将简单的图标库拖放到画布上。
这演示了如何注册拖放事件的回调函数，以及如何从插件 iframe 传递拖放数据。
托管的图标拖放
允许从运行外部托管 UI 的模态框将简单的图标库拖放到画布上。
这演示了如何注册拖放事件的回调函数，以及如何使用拖放事件中的 dataTransfer 对象嵌入拖放数据。
PNG 裁剪
当PNG图片拖放到画布上时进行裁剪。
这展示了如何注册拖放事件的回调函数,以及如何读取被拖放文件的字节数据。
开发模式插件示例
代码片段保存器
这是一个插件示例,允许你直接在节点上创作和保存代码片段,当选中该节点时会在检查面板中渲染。
代码生成
代码生成插件的示例
开发模式
一个配置为可在Figma设计、开发模式检查以及运行代码生成中工作的插件示例。
使用变量的示例
样式转变量
将Figma样式转换为变量的插件示例
变量导入/导出
导入和导出变量的插件示例
带参数的示例
跳转到
一个可以快速跳转到Figma文件中任何图层或页面的插件。
要了解更多关于如何接受参数作为插件输入的信息,请查看此指南。
调整大小器
调整所选形状的大小。有两个子菜单,允许绝对调整和相对调整。
要了解更多关于如何接受参数作为插件输入的信息,请查看此指南。
SVG插入器
将SVG图标插入画布。
要了解更多关于如何接受参数作为插件输入的信息,请查看此指南。
文本审阅
展示如何使用文本审阅API在编辑文本节点时提出建议和标记更改。
问答游戏
生成一系列来自外部问答API的问题。
要了解更多关于如何接受参数作为插件输入的信息,请查看此指南。
消息传递
一个非常基础的示例,展示如何使用postMessage在UI和Figma画布之间进行通信。
首都
查找一个国家的首都。这展示了:
- 如何发起网络请求以填充参数建议
要了解更多关于如何接受参数作为插件输入的信息,请查看此指南。
使用打包的示例
React
创建矩形!这展示了:
- 使用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文件集。
