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 和 npxnode -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 Bridgecodex 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 serversetsid bash -lc tail -f /dev/null | npx -y gethopp/figma-mcp-bridge ~/.codex/figma-bridge/server.log 21 /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 页面生成前端代码提取这个页面的颜色、字体、间距规范如果选中了某个 FrameCodex 可以读取该节点的尺寸、文本、样式、层级结构等信息。八、常见问题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 分析、前端还原、组件拆解还是生成代码都会方便很多。