Codex 已原生支持通过 MCP 连接 Figma,不再需要旧教程里的 experimental_use_rmcp_client 实验开关。Figma 目前提供远程和本地两种 MCP Server,官方更推荐远程版本,因为功能更完整,也不要求 Figma Desktop 一直运行。
两种接入方式怎么选
| 方式 | 地址 | 适合场景 |
|---|---|---|
| 远程 MCP(推荐) | https://mcp.figma.com/mcp | 日常读取设计稿、下载资源、Code Connect,以及写入 Figma |
| 本地 MCP | http://127.0.0.1:3845/mcp | 需要读取 Figma Desktop 当前选中图层,或组织内部只能使用本地服务 |
如果没有特殊限制,直接使用远程 MCP。
方法一:安装 Codex Figma 插件
在 Codex App 左上角打开 Plugins,找到 Figma 后点击安装,然后按提示登录并允许访问。这种方式会同时安装 MCP 配置和常用 Figma Skills,适合不想手动维护配置的用户。
安装完成后重新打开会话,确认 Figma 工具已经出现在可用工具列表中。
方法二:命令行添加远程 Figma MCP
使用 Codex CLI 执行:
codex mcp add figma --url https://mcp.figma.com/mcp
根据浏览器提示完成 Figma OAuth 登录。随后检查连接:
codex mcp list
也可以在 Codex 终端界面输入 /mcp,查看服务器状态或重新认证。
Codex 会把 MCP 设置保存在 ~/.codex/config.toml。对应的手动配置形式如下:
[mcp_servers.figma]
url = "https://mcp.figma.com/mcp"
保存配置后需要重新启动 Codex。
方法三:连接 Figma Desktop 本地 MCP
- 安装并打开最新版 Figma Desktop。
- 打开一个 Figma Design 文件。
- 按
Shift + D进入 Dev Mode。 - 在 Inspect 面板的 MCP Server 区域启用 Desktop MCP Server。
- 在 Codex 配置中加入:
[mcp_servers.figma-desktop]
url = "http://127.0.0.1:3845/mcp"
本地服务只有在 Figma Desktop 运行且文件处于打开状态时才能使用。如果连接失败,优先确认 Figma 内的 MCP 开关仍然开启,然后重启 Figma 和 Codex。
用 Codex 读取设计稿
远程 MCP 使用链接定位节点:
- 在 Figma 中选中 Frame 或具体图层。
- 复制该节点的链接,而不是只复制文件首页地址。
- 把链接发给 Codex,并说明目标技术栈和代码目录。
例如:
请读取这个 Figma Frame,使用项目现有的 Vue 组件和 Tailwind 样式实现页面。
优先复用 src/components,不要生成行内样式,并把图片下载到 static/uploads。

本地 MCP 还支持直接读取 Figma Desktop 当前选中的图层,可以让 Codex“实现我在 Figma 中选中的 Frame”。
提高设计稿还原度
- 明确要求复用现有组件、设计变量和 Tailwind 规范。
- 给出具体 Frame 链接,不要只发整个 Figma 文件。
- 配置 Code Connect,让 Figma 组件映射到代码库中的真实组件。
- 说明图片、图标和字体的处理方式。
- 先实现页面结构,再根据截图逐轮校正间距、字体和响应式状态。
Figma MCP 提供设计上下文,但不是一键生成完美生产代码。最终效果仍取决于设计稿结构、组件规范和提示词约束。
常见问题
配置了但看不到 Figma 工具
- 运行
codex mcp list检查状态。 - 远程版本重新执行 OAuth 登录。
- 本地版本确认 Figma Desktop 和目标文件仍处于打开状态。
- 修改
config.toml后重启 Codex。
是否还需要 experimental_use_rmcp_client
不需要。Codex 当前原生支持 Streamable HTTP MCP Server,旧实验字段应从配置中删除。
远程和本地能否同时配置
可以,但建议使用不同名称,例如 figma 和 figma-desktop,调用时明确指定,避免选择错误的 Server。