用 open-figma-mcp 让 Codex 直接操作 Figma：写画布与设计还原实战

可能看到这个标题，有一些金针菇就要问了，“Gin哥Gin哥，为什么不使用官方的MCP呀？是因为不好用吗？”，那是因为对于绝大多数的学生或者个人开发者来说，免费版额度非常小，大约每月 6 次工具调用，写个demo额度就没了，而每月几十美金的会员费又是不小的负担，所以最终选择用社区版的MCP插件。

背景

目标是打通两条链路：

1. Codex 读取 Figma 设计稿，生成前端 UI 代码
2. Codex 直接操作 Figma，在画布上生成和修改设计稿

一开始我采用的是 Figma 官方远程 MCP：

• 通过 OAuth 拿到访问令牌，注册到 Codex 全局 MCP。
• 可以读取设计结构、变量、截图，并生成参考代码。
• 但免费版额度非常小，大约每月 6 次工具调用，几次实验就会用完。
• 官方远程 MCP 的写画布工具还在 beta，未来会按用量收费，免费版基本不具备日常可用性。

因此需要一条不消耗官方额度的路线：使用第三方本地桥 open-figma-mcp。

方案

open-figma-mcp 是一个开源项目，由两部分组成：

• 本地 MCP server，运行在 Codex 和 Figma 之间。
• Figma 插件，运行在 Figma Desktop 内部。

npm 仓库地址：https://www.npmjs.com/package/open-figma-mcp

调用链路如下：

flowchart LR
  A[Codex] -->|MCP stdio| B[open-figma-mcp server]
  B -->|WebSocket 127.0.0.1:18765| C[Figma 插件]
  C -->|Figma Plugin API| D[Figma 文件]

关键点：

• 不走 Figma REST API，不经过 mcp.figma.com。
• 走 Figma 官方插件 API，在本地完成读写。
• 免费版也可以使用，没有每月 6 次的官方 MCP 额度限制。
• 桥只监听 127.0.0.1:18765，默认无鉴权，不应暴露到公网。

这套方案同时覆盖两个需求：

• 写 Figma：创建 Frame、矩形、文字、按钮、Auto Layout、变量等。
• 还原 UI：读取设计结构、截图和 tokens，交给 Codex 生成前端代码。

实践

1. 安装 Figma 插件

先从 npm 下载 open-figma-mcp 包，并解压出插件目录：

# 查看最新版本
npm view open-figma-mcp version

# 下载 npm 包，会在当前目录生成 open-figma-mcp-0.1.2.tgz
npm pack open-figma-mcp

# 解压
tar -xzf open-figma-mcp-0.1.2.tgz

# 把插件目录复制到项目里，这个目录必须一直保留在磁盘上
Copy-Item -Recurse .\package\plugin .\open-figma-mcp-plugin

npm pack 等价于直接从 npm registry 下载 tarball；如果更习惯用 curl，也可以这样：

curl.exe -L -o open-figma-mcp-0.1.2.tgz `
  https://registry.npmjs.org/open-figma-mcp/-/open-figma-mcp-0.1.2.tgz

最终得到的插件目录结构：

open-figma-mcp-plugin/
  manifest.json
  dist/code.js
  src/ui.html

在 Figma Desktop 中导入：

Plugins -> Development -> Import plugin from manifest...

选择 manifest.json 后，插件会出现在 Figma 的 Development 插件列表中。

2. 注册 MCP 到 Codex

在终端注册本地 MCP server：

codex mcp add open-figma-mcp -- npx -y open-figma-mcp@latest

注意：如果 Codex 的 MCP 配置写在沙箱用户里，真实用户是看不到的，需要确保以当前真实用户执行。

查看注册结果：

codex mcp list
codex mcp get open-figma-mcp

3. 启动插件桥

1. 打开 Figma Desktop 和目标文件。
2. 运行 Plugins -> Development -> Open Figma MCP。
3. 插件窗口显示 Connected。
4. 打开一个 Codex 新对话，让 MCP 工具加载。

注意不要关闭这个小弹窗！让他始终保持Connected。

检查桥是否正常：

在浏览器输入：http://127.0.0.1:18765/health

正常返回：

{"ok":true,"service":"open-figma-mcp","mode":"owner","peers":0,"plugin":true}

4. 写 Figma：Codex 控制画布

Codex端：

Figma端：

MCP内部使用的核心工具：

figma_create_frame
figma_create_text
figma_set_corner_radius
figma_get_screenshot

5. 还原 UI：设计图到前端代码

Codex端：

还原的UI：

open-figma-mcp 提供了设计读取能力：

figma_get_design_context   读取结构化设计树
figma_get_screenshot       导出截图
figma_export_tokens        导出颜色、间距、字号等 tokens
figma_get_styles           读取样式
figma_get_variable_defs    读取变量

open-figma-mcp 的读取链路已经封装成全局 skill，后续可以在新对话中直接验证“用 open-figma-mcp 读当前设计并生成代码”。

6. 封装成全局 Skill

~/.codex/skills/figma-open-mcp

验证

桥健康检查

{"ok":true,"service":"open-figma-mcp","mode":"owner","peers":0,"plugin":true}

写画布验证

成功在 Figma 中创建了：

• 水果派app：登录，首页，商城，购物车，个人。

每个节点都能在 Figma 的图层面板中直接看到和编辑。

还原 UI 验证

• MCP 路线已跑通：从 Figma 设计生成了 React 像素级页面还原。
• 像素对比结果：整体差异约 2.5%，他甚至帮我的文字对齐居中了。

Skill 校验

Skill is valid!

复盘

做得对的地方

1. 用本地插件桥绕开官方 MCP 免费额度，日常写 Figma 变得可用。
2. 写画布走 Figma 官方插件 API，不依赖 REST API，稳定且没有月度限制。
3. 把整条链路封装成全局 skill，之后新对话可以直接复用。

踩过的坑

1. 官方 Codex CLI 对 Figma 的 OAuth 识别失败，需要手工完成 OAuth + PKCE。
2. 第一次注册 MCP 时写到了沙箱用户配置里，真实用户看不到，必须重新以真实用户注册。
3. Figma 插件的窗口必须保持打开，切换文件后需要重新运行 Open Figma MCP。
4. Auto Layout Frame 会自动收缩到内容大小，导致按钮和输入框宽度失控。
5. 本地桥没有鉴权，只能监听回环地址，不能暴露到公网。

结论

对于免费版 Figma 用户：

• 频繁写 Figma：使用 open-figma-mcp 本地桥。
• 设计还原生成代码：默认也用 open-figma-mcp 读取设计，由 Codex 生成代码。
• 官方远程 MCP：保留为“省着用”的备选，适合少量高价值读取和参考代码生成。

这套方案可以稳定支撑“Codex 控制 Figma写设计稿”和“设计图还原成前端代码”两条日常链路。