前端切图这活儿，干过的都懂，真的，太懂了！
设计师把 Figma 甩过来，你对着一个个图层量间距、抠颜色、数字号，一行行 CSS 往外敲，改一版，再来一遍。
design-to-code 这词喊了多少年了？各种插件也试过一圈，结果不是生成的代码没法看，就是跟项目里的组件库、设计 token 完全对不上，最后还得推倒重写，折腾到后来基本放弃了这类工具。
但这回这个，我看完觉得不太一样，OpenAI 在自己的官方仓库 openai/plugins 里，正式收了一个 Figma 插件，作者署名直接就是 Figma 官方。
它不是又一个"截图转 div"的玩具，而是把 Codex 这个编程 agent 直接接进 Figma 文件，能读设计、能写代码、还能反过来往 Figma 里画东西。
今天这篇，把它到底能干嘛、怎么装、怎么用，一次讲清楚。
先搞清楚：这个插件到底是什么
它的全名在仓库里叫 plugins/figma，是 OpenAI Codex 插件生态里的一员。
要理解它，得先知道 Codex 是什么。Codex 是 OpenAI 的编程 agent，能跑在终端里，也能装进 VS Code、Cursor 这些编辑器。
它自己能读文件、改代码、跑命令，而"插件"机制，就是给 Codex 外挂能力，这个 Figma 插件干的事，就是教会 Codex 怎么跟 Figma 打交道。
装上之后，Codex 就获得了七项跟 Figma 相关的技能（skill）：
figma-implement-design—— 把 Figma 里的设计稿翻译成能上生产的 UI 代码figma-code-connect—— 给 Figma 组件建立跟代码的映射关系figma-create-design-system-rules—— 为你的项目生成一套设计系统规则figma-create-new-file—— 直接新建 Figma 或 FigJam 文件figma-generate-design—— 从代码反向在 Figma 里搭出整个页面figma-generate-library—— 创建和更新设计系统组件库figma-use—— 底层能力，用 JavaScript 直接操作 Figma 文件 看出门道了吗？这不是单向的"设计变代码"，是双向打通。 可以让 Codex 读 Figma 写代码，也能让它读你的代码，反过来在 Figma 里把界面画出来。
把设计稿变成能用的代码
这是最刚需的一个。
传统 design-to-code 工具为啥难用？说白了就是它们不懂项目，生成一个按钮，给写一堆 <div style="background: #1ABCFE; padding: 8px 16px">，颜色硬编码、间距写死，跟项目里那套 <Button variant="primary"> 八竿子打不着，这种代码合进来，就是一堆技术债等着还。
Codex 这个插件的思路完全不同，它在实现设计前，会先去 摸清项目的家底， 有哪些现成组件、用了什么设计 token、颜色和间距是怎么定义的，然后它生成的代码，会尽量复用已有的组件和变量，而不是从零画一堆带 hex 色值的盒子。
用起来很简单，给它一个带 node ID 的 Figma 链接就行：
帮我把这个 Figma 页面实现成代码：
<https://www.figma.com/design/xxxxx/MyApp?node-id=4185-3778>
这里有个细节要记住：Figma URL 里的 node-id 参数是必须的。它长这样 node-id=4185-3778，指向要实现的具体那个 frame，插件内部会把连字符转成冒号（4185-3778 → 4185:3778）再去定位节点。
Code Connect，让组件和代码结合
这个功能，个人觉得是整个插件里最有含金量的。
figma-code-connect 解决的是一个长期痛点：设计系统里的组件，和代码里的组件，怎么保持对应关系？
举个例子，设计师在 Figma 里维护了一个 Button 组件，有 primary、secondary 等各种变体0，代码里也有一个 Button 组件，以前这两边是各活各的，设计改了字段，代码这边全靠人肉同步。
Code Connect 干的事，就是建立一份映射文件（.figma.ts），把 Figma 组件和你的代码片段绑定起来，绑定之后，任何人在 Figma 里点开这个组件，都能直接看到对应的代码应该怎么写，设计和研发终于说上同一种语言了。
不过这个功能有几个前置门槛，得提前知道，免得白忙活：
- 组件必须是已发布到 Figma 团队库的，草稿状态的不行
- 需要 Figma 的 Organization 或 Enterprise 套餐，免费版和专业版用不了
- Figma 的 MCP 服务得先连上
流程上，给它一个组件链接，它会先调用工具扫描出还没建立映射的组件，然后逐个生成模板文件。
整个过程 Codex 自己会走完，你负责给链接和确认。
反向操作，用代码在 Figma 里画界面
前面都是"读 Figma 写代码"，figma-generate-design 反过来读你的代码，在 Figma 里把界面搭出来。
什么时候用得上？比如手写了一个页面、一个弹窗、一个侧边栏，想把它同步进 Figma 让设计师接着改；或者想让 Figma 里的稿子跟代码保持一致，这些都能交给它。
它的聪明之处在于，不是傻乎乎地画一堆矩形， 它会先去发现 Figma 文件里已发布的设计系统，有哪些组件、哪些颜色变量、哪些文字样式，然后用这些现成的组件实例来拼页面，而不是拿 hex 色值硬画，这样搭出来的稿子，是"活的"，跟设计系统联动，以后还能统一更新。
对于能在浏览器里跑的 Web 应用，它还有个更狠的玩法：双管齐下。一边用设计系统组件正常搭建，一边用 generate_figma_design 工具把跑起来的网页截一张像素级精准的图进 Figma。
两边一对照，既拿到了准确的间距布局，又保留了跟设计系统联动的组件实例，搭完把那张参考截图删掉就行。
有个技术限制值得一提：Figma 的 Plugin API 没法直接拉取外部图片 URL。所以如果界面里有图片，必须靠这个截图流程把图片光栅化进 Figma 文件，否则图片位置会是空的。
底层是怎么跑起来的：figma-use
前面这些能力，底层都靠一个技能撑着——figma-use。
它的本质是：让 Codex 能在 Figma 文件的上下文里执行 JavaScript，直接调用 Figma 的 Plugin API。创建节点、改自动布局、绑定变量、造组件……都是通过它执行代码实现的。
这部分是给想深入理解的人看的。插件文档里为 figma-use 定了一堆铁律，几条特别关键，也特别能说明它设计得有多细：
小步快跑，别贪大。 文档反复强调，把大操作拆成多次小调用，每步做完先验证，这是避免 bug 最重要的一条实践，一次性写个几百行脚本梭哈，翻车概率极高。
颜色是 0 到 1 的范围，不是 0 到 255。 红色是 {r: 1, g: 0, b: 0}，这个坑踩过的人都懂。
改文字前必须先加载字体。 标准动作是：加载字体 → await → 改内容 → 返回节点 ID，少了加载这步，直接报"字体未加载"。
脚本出错就停下，别急着重试。 失败的脚本是原子的，报错了就等于完全没执行，文件不会被改动，先读懂错误信息，改对了再跑。
所有创建或改动的节点 ID 必须返回。 因为 Codex 只能看到 return 出来的东西，console.log 它看不见，后续操作要靠这些 ID 来引用和校验。
这些规则背后透露的信息是：OpenAI 和 Figma 是真的把大量踩坑经验沉淀进了这个插件，不是随手做个 demo。
怎么装：跟着走就行
这个插件跟着 Codex 的插件市场走，前面提过，openai/plugins 这个仓库本身就是 Codex 的官方插件市场，默认市场配置指向仓库里的 plugins/ 目录。
装之前，确认已经有 Codex 环境。
然后：
第一步，连上 Figma 的 MCP 服务。 这个插件是"app-backed"的，所有 Figma 相关能力都依赖 Figma 集成，前面几个核心功能都明确要求 Figma MCP server 处于连接状态，如果工具没出现，去开启 Figma MCP，然后重启 MCP 客户端。
第二步，从插件市场装上 figma 插件。 装好后，Codex 就自动获得了那七个 skill。
第三步，准备好带 node ID 的 Figma 链接。 大部分工作流都需要你提供一个具体指向某个 frame 或组件的 Figma URL。
装完之后，最简单的验证方式，就是直接甩一个 Figma 链接给它：
看一下这个 Figma 设计，用代码实现出来：
<你的 Figma 链接 ?node-id=xxx>
它会自己判断该调用哪个 skill，然后开工。
写在最后
Figma 插件最受益的其实是那些已经把设计系统搞成型的前端团队，尤其是团队已经在用 Figma 团队库维护组件的，Code Connect 这套下来能真正省事，还有那些需要频繁在 Figma 和代码之间来回同步的产品研发，以及被切图折磨已久的独立开发者，都值得试试。 但门槛也得说清楚，Code Connect 卡 Organization/Enterprise 套餐，免费和专业版用户直接被挡在门外，整套流程还依赖 Figma MCP 服务连通，配置上有一定成本。它不是那种点一下就出代码的傻瓜工具，而是给已经在认真做设计系统的团队用的专业武器。 不过方向是真的对，它没有幻想着 AI 一键取代前端，而是老老实实解决设计和代码怎么保持同步这个真问题，复用已有的组件、绑定已有的 token、把两个工作台双向打通，这种务实，比那些吹得天花乱坠的 design-to-code 工具靠谱太多了。
参考来源
OpenAI 官方插件仓库：github.com/openai/plugins（Figma 插件在 plugins/figma 目录下）