这个插件是做什么的
围绕 Figma 设计与代码协作,支持检查设计稿、实现界面、维护 Code Connect 映射,以及在 Figma 中生成页面、组件和设计系统。
实际使用时,可以先从“读取 Figma 页面并按现有代码规范实现界面”开始,再根据任务继续“为已发布组件创建或更新 Code Connect 模板”,并把“在 Figma 中搭建页面、组件、变量和设计系统基础”纳入同一流程。官方目录列出的 11 个 Skills 和 1 个应用或连接器会按具体任务参与处理。
它更适合产品设计师、前端开发者和设计系统和组件库团队,尤其是希望连接 Figma 与代码,完成界面实现和设计系统维护,并把相关资料与操作集中在 Codex 中完成的场景。
查看官方英文说明
Figma workflows for implementing designs in code, creating Code Connect templates for published Figma components, and generating project-specific design system rules for repeatable Figma-to-code work.
解决什么问题
- 设计稿与代码实现脱节、组件映射难维护
- 设计系统规则难以在项目中重复执行
- 难以读取 Figma 页面并按现有代码规范实现界面
- 难以为已发布组件创建或更新 Code Connect 模板
- 难以在 Figma 中搭建页面、组件、变量和设计系统基础
适合哪些用户
- 产品设计师
- 前端开发者
- 设计系统和组件库团队
适合完成哪些任务
- 读取 Figma 页面并按现有代码规范实现界面
- 为已发布组件创建或更新 Code Connect 模板
- 在 Figma 中搭建页面、组件、变量和设计系统基础
包含的 Skills 与应用连接器
Skills(11)
figma-code-connect
创建和维护 Figma Code Connect 模板文件,将 Figma 组件映射为代码片段。
figma-create-new-file
每次调用 create_new_file 前必须先加载此 Skill;适用于创建空白 Figma、FigJam 或 Slides 文件,或在 use_figma 前准备新文件。
figma-generate-design
与 figma-use 配合,将应用页面、弹窗、抽屉、侧栏等复合界面从代码或说明构建到 Figma,并优先复用设计系统组件、变量和样式。
figma-generate-diagram
每次调用 generate_diagram 前必须先加载此 Skill;用于在 FigJam 中创建流程图、架构图、时序图、ER 图、状态图、甘特图或时间线,并遵循 Mermaid 约束。
figma-generate-library
从代码库创建或更新专业 Figma 设计系统,包括变量、Token、组件变体、主题和基础规范;创建单个组件时也应使用。
应用与连接器(1)
使用前注意事项
安装 Figma 时可能需要连接发布者账户,具体权限取决于你的套餐、地区和工作区管理员设置。 官方标注包含 Write 能力;执行写入、修改、发送或发布前,请核对目标、内容和授权范围。 插件不会绕过外部服务权限,只能访问当前账户本来就有权访问的数据和操作。 官方目录当前没有提供单条插件的最近更新时间;达灵感不会用目录同步时间冒充更新时间。
安装到 Codex
开通 AI 资源会员后,可以按需读取并复制这个插件的安装指令。
复制安装指令