Codex 连接 Figma：让 AI 读取 Figma UI 设计稿数据
前言
最近我在尝试让 Codex 直接读取 Figma 设计稿中的 UI 数据，包括页面结构、Frame、文本、颜色、尺寸、图层层级等信息。最终使用的是Figma MCP Bridge，它通过 Figma 插件 + 本地 MCP Server 的方式，把 Figma 桌面端的数据暴露给 Codex。
整体链路如下：
Figma 桌面端插件 ↓ 本地 MCP Server ↓ Codex / AI Agent配置完成后，Codex 就可以读取当前 Figma 文件、当前选中节点，甚至获取截图、节点样式、文本内容等信息。
一、准备环境
需要准备：
1. Figma 桌面版 2. Node.js / npx 3. Codex 4. Figma MCP Bridge注意：必须使用 Figma 桌面版，浏览器版 Figma 不支持导入开发插件。
可以先检查本机是否有 Node 和 npx：
node -v npx -v二、下载 Figma MCP Bridge
项目地址：
https://github.com/gethopp/figma-mcp-bridge可以直接下载 release 包，也可以使用源码。
如果是源码方式，需要构建插件：
cd plugin npm install npm run build构建成功后，插件目录中应该有：
plugin/manifest.json plugin/dist/code.js plugin/dist/index.html其中manifest.json内容大致如下：
{ "name": "Figma MCP Bridge", "id": "figma-mcp-bridge", "api": "1.0.0", "main": "dist/code.js", "ui": "dist/index.html", "permissions": [], "networkAccess": { "allowedDomains": ["ws://localhost:1994"], "reasoning": "Connects to local MCP server via WebSocket to stream Figma document data to AI tools" }, "documentAccess": "dynamic-page", "editorType": ["figma", "dev", "figjam"], "capabilities": ["inspect"] }这里要注意：manifest.json和dist文件夹必须在同一个插件目录下，否则 Figma 会提示插件加载失败。
三、给 Codex 配置 MCP Server
使用 Codex 的 MCP 命令添加 Figma Bridge：
codex mcp add figma-bridge -- npx -y @gethopp/figma-mcp-bridge查看是否添加成功：
codex mcp list正常会看到类似：
Name Command Args figma-bridge npx -y @gethopp/figma-mcp-bridge也可以查看具体配置：
codex mcp get figma-bridge配置完成后，建议重启 Codex 或重新打开一个会话，让 MCP 工具重新加载。
四、在 Figma 中导入插件
注意：这里可导入插件的前提是：你对接入MCP的项目有编辑权限，如果没有的话是不会出现插件这个选项的，这里为了实验，可以先创建一个空白文档，随便画几个UI来实验。
打开 Figma 桌面版，右键进入：
Plugins → Development → Import plugin from manifest选择插件目录中的：
manifest.json导入成功后，在插件列表中会出现：
Figma MCP Bridge之后打开你的 Figma 文件，运行该插件。
五、启动本地 Bridge Server
正常情况下，Codex 调用 MCP 时会自动启动 server。
如果插件显示：
Disconnected说明 Figma 插件已经打开，但本地ws://localhost:1994没有服务在监听。
可以手动启动一个本地 bridge server：
setsid bash -lc 'tail -f /dev/null | npx -y @gethopp/figma-mcp-bridge' > ~/.codex/figma-bridge/server.log 2>&1 < /dev/null &检查端口是否启动：
curl http://127.0.0.1:1994/ping正常会返回：
{ "status": "ok", "version": "0.0.23" }这时 Figma 插件应该会从Disconnected变成已连接状态。
六、验证 Codex 是否能读取 Figma 数据
可以通过本地 RPC 测试：
curl -X POST http://127.0.0.1:1994/rpc \ -H 'Content-Type: application/json' \ -d '{"tool":"list_files"}'如果成功，会返回当前连接的 Figma 文件：
{ "data": [ { "fileKey": "unsaved-xxxx", "fileName": "Untitled" } ] }读取当前页面结构：
curl -X POST http://127.0.0.1:1994/rpc \ -H 'Content-Type: application/json' \ -d '{"tool":"get_document"}'返回的数据里会包含 Figma 页面、Frame、文本、颜色、尺寸等信息。
例如：
{ "id": "0:1", "name": "Page 1", "type": "PAGE", "children": [ { "id": "2:53", "name": "键盘-提示弹窗", "type": "FRAME", "bounds": { "x": 0, "y": 0, "width": 854, "height": 480 } } ] }七、在 Codex 中使用
连接成功后，可以直接对 Codex 说：
读取当前 Figma 文件或者：
读取当前选中的节点也可以让 Codex 分析 UI：
帮我分析当前选中 Frame 的 UI 结构根据这个 Figma 页面生成前端代码提取这个页面的颜色、字体、间距规范如果选中了某个 Frame，Codex 可以读取该节点的尺寸、文本、样式、层级结构等信息。
八、常见问题
1. 插件加载失败
如果 Figma 报错：
An error occurred while loading the plugin environment通常是因为manifest.json引用的文件不存在。
检查插件目录是否包含：
manifest.json dist/code.js dist/index.html三者必须都存在。
2. 插件显示 Disconnected
说明插件启动成功，但本地 server 没有启动。
检查：
curl http://127.0.0.1:1994/ping如果连接失败，需要启动 MCP server。
3. 新建文件能用，公司 UI 文件不能用
这种情况通常是公司 Figma 团队限制了插件权限。
可能原因：
1. 公司禁用了开发插件 2. 只允许管理员审核过的插件 3. 当前账号对文件没有编辑权限 4. 企业策略限制插件访问网络 5. 文件处于 Dev Mode 或只读状态如果是公司策略限制，需要联系 Figma 管理员放行插件。
4. 页面数据为空
如果返回：
"children": []说明当前 Figma 页面是空的，或者插件连接的是另一个文件。
可以在 Figma 中选中一个 Frame，再让 Codex 读取当前选中节点。
九、总结
通过Figma MCP Bridge，可以让 Codex 直接读取 Figma 设计稿数据。整体流程是：
1. 安装并构建 Figma MCP Bridge 插件 2. 在 Codex 中添加 MCP server 3. 在 Figma 桌面端导入插件 4. 打开 Figma 文件并运行插件 5. Codex 读取 Figma 页面或选中节点数据配置完成后，Codex 不再只能“看截图”，而是可以直接拿到结构化 UI 数据，包括 Frame、文本、颜色、尺寸、层级和样式信息。这样无论是做 UI 分析、前端还原、组件拆解，还是生成代码，都会方便很多。
