关于 figma-plugin
figma-plugin 是用于开发 Figma 插件的技能，说明插件如何扩展 Figma。内容涵盖主线程与 UI 线程分工、消息通信、API 使用、测试和发布。
主要功能
- 01说明主线程与 UI 线程职责
- 02指导 postMessage 通信
- 03介绍 Figma API 和节点
- 04提供 UI 与 React 模式
- 05说明测试和发布流程
适用场景
- 01规划插件的线程职责
- 02连接插件逻辑与 iframe 界面
- 03使用 React 或纯 HTML 构建界面
- 04准备插件测试与发布
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/figma-plugin确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
references/api-globals-and-nodes.mdapi-rendering-and-advanced.mdcolors-and-text.mddevelopment-testing-and-publishing.mdlayout-storage-and-utilities.mdproject-structure-and-build.mdselection-traversal-and-batching.mdui-architecture-and-messaging.mdui-patterns-and-resources.mdui-react-and-theming.md详细介绍
Figma 插件开发
使用 Plugin API 构建扩展 Figma 功能的插件。
架构
Figma 插件在通过 postMessage 通信的两个线程中运行：
- 主线程（沙箱）：访问 Plugin API、操作节点、调用
figma.* - UI 线程（iframe）：HTML/CSS/JS 界面，无法访问 Figma API，可使用 npm 包
核心原则
- 主线程负责所有 Figma 文档操作
- UI 线程负责用户界面和外部 API
- 线程之间通过
figma.ui.postMessage()和onmessage通信 - 插件必须保持高性能——避免阻塞主线程
快速入门清单
- 使用
manifest.json（name、id、main、ui）设置项目 - 创建包含插件逻辑的主线程代码（
code.ts） - 创建包含界面元素的 UI（
ui.html） - 接通线程之间的 postMessage 通信
- 在 Figma 开发模式下测试
- 通过 Figma Community 发布
参考资料
| 参考资料 | 说明 |
|---|---|
| project-structure-and-build.md | Manifest、TypeScript 设置、构建配置 |
| development-testing-and-publishing.md | 开发工作流、测试、发布、故障排除 |
| api-globals-and-nodes.md | 全局对象、节点类型、组件 |
| api-rendering-and-advanced.md | 填充、效果、自动布局、样式、变量、事件 |
| ui-architecture-and-messaging.md | iframe UI、postMessage、类型化消息、纯 HTML |
| ui-react-and-theming.md | React 设置、hooks、Figma 主题颜色 |
| ui-patterns-and-resources.md | 加载状态、标签页、颜色选择器、文件下载 |
| selection-traversal-and-batching.md | 选择处理、节点遍历、批量操作 |
| colors-and-text.md | 颜色转换、调整、文本操作 |
| layout-storage-and-utilities.md | 定位、对齐、存储、错误处理、实用工具 |
评论
支持 Markdown