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 分析、前端还原、组件拆解，还是生成代码，都会方便很多。