Codex 配置 Figma MCP 教程 2026:远程与本地 Server 完整指南

2026 年 Codex 配置 Figma MCP 完整教程,涵盖官方推荐的远程 Server、Figma Desktop 本地 Server、OAuth 登录、连接检查和设计稿转代码实践。

11月 9, 2025 · 3 分钟阅读时长 · 1141 字 · -阅读 -评论 · 编程开发

Codex 已原生支持通过 MCP 连接 Figma,不再需要旧教程里的 experimental_use_rmcp_client 实验开关。Figma 目前提供远程和本地两种 MCP Server,官方更推荐远程版本,因为功能更完整,也不要求 Figma Desktop 一直运行。

两种接入方式怎么选

方式地址适合场景
远程 MCP(推荐)https://mcp.figma.com/mcp日常读取设计稿、下载资源、Code Connect,以及写入 Figma
本地 MCPhttp://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

  1. 安装并打开最新版 Figma Desktop。
  2. 打开一个 Figma Design 文件。
  3. Shift + D 进入 Dev Mode。
  4. 在 Inspect 面板的 MCP Server 区域启用 Desktop MCP Server。
  5. 在 Codex 配置中加入:
[mcp_servers.figma-desktop]
url = "http://127.0.0.1:3845/mcp"

本地服务只有在 Figma Desktop 运行且文件处于打开状态时才能使用。如果连接失败,优先确认 Figma 内的 MCP 开关仍然开启,然后重启 Figma 和 Codex。

用 Codex 读取设计稿

远程 MCP 使用链接定位节点:

  1. 在 Figma 中选中 Frame 或具体图层。
  2. 复制该节点的链接,而不是只复制文件首页地址。
  3. 把链接发给 Codex,并说明目标技术栈和代码目录。

例如:

请读取这个 Figma Frame,使用项目现有的 Vue 组件和 Tailwind 样式实现页面。
优先复用 src/components,不要生成行内样式,并把图片下载到 static/uploads。

Codex 结合 Figma MCP Server 配置界面

本地 MCP 还支持直接读取 Figma Desktop 当前选中的图层,可以让 Codex“实现我在 Figma 中选中的 Frame”。

提高设计稿还原度

  1. 明确要求复用现有组件、设计变量和 Tailwind 规范。
  2. 给出具体 Frame 链接,不要只发整个 Figma 文件。
  3. 配置 Code Connect,让 Figma 组件映射到代码库中的真实组件。
  4. 说明图片、图标和字体的处理方式。
  5. 先实现页面结构,再根据截图逐轮校正间距、字体和响应式状态。

Figma MCP 提供设计上下文,但不是一键生成完美生产代码。最终效果仍取决于设计稿结构、组件规范和提示词约束。

常见问题

配置了但看不到 Figma 工具

  • 运行 codex mcp list 检查状态。
  • 远程版本重新执行 OAuth 登录。
  • 本地版本确认 Figma Desktop 和目标文件仍处于打开状态。
  • 修改 config.toml 后重启 Codex。

是否还需要 experimental_use_rmcp_client

不需要。Codex 当前原生支持 Streamable HTTP MCP Server,旧实验字段应从配置中删除。

远程和本地能否同时配置

可以,但建议使用不同名称,例如 figmafigma-desktop,调用时明确指定,避免选择错误的 Server。

Alan H
Authors
开发者,数码产品爱好者,喜欢折腾,喜欢分享,喜欢开源