达灵感

Figma

Figma 设计到代码

连接 Figma 与代码，完成界面实现和设计系统维护。

加入项目

这个插件是做什么的

围绕 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

使用前注意事项

安装 Figma 时可能需要连接发布者账户，具体权限取决于你的套餐、地区和工作区管理员设置。 官方标注包含 Write 能力；执行写入、修改、发送或发布前，请核对目标、内容和授权范围。 插件不会绕过外部服务权限，只能访问当前账户本来就有权访问的数据和操作。 官方目录当前没有提供单条插件的最近更新时间；达灵感不会用目录同步时间冒充更新时间。

安装到 Codex

当前官方目录未提供可直接复制的命令。你可以复制下面的安装指令并发送给 Codex，Codex 会查找对应插件并发起安装确认。