Claude Code 和 Codex 接入 Figma MCP 保姆级教程

由于 Figma 桌面端更新了 MCP 的入口，因此很多人留言说找不到文章中说的打开入口了，于是我不得不在留言区留言解释新版的 MCP 入口。

考虑到经过大半年的时间，各个 AI 产品线都做了很多升级，我认为有必要再重新整理一下目前最新的 Claude Code / Codex 与 Figma MCP 的使用教程。

什么是 Figma MCP?

Figma MCP Server 是 Figma 官方基于 Model Context Protocol 提供的接口，能让 Claude Code、Codex 等 AI 工具直接读取你的设计文件！

核心能力

从设计到代码，一键搞定：

• 选中 Frame 生成代码 - 把设计稿中的页面或组件直接转成代码
• 提取设计上下文 - 读取颜色、字号、组件、布局等所有设计信息
• 读取 FigJam / Make 资源 - 把流程图、架构图加入 AI 上下文
• 结合 Code Connect - AI 生成的代码重用你现有的组件库
  

两种连接方式

Remote MCP（云端）

• 地址：https://mcp.figma.com/mcp
• 适合云端协作，支持高级功能

Desktop MCP（本地）

• 地址：http://127.0.0.1:3845/mcp
• 通过 Figma Desktop 运行，适合本地开发

使用前准备清单

1 Figma 账号要求

Remote MCP: 所有座位和套餐均可用

• 免费计划：每月限制 6 次工具调用
• 付费 Dev seat：每分钟 10 次调用，无月度限制

Desktop MCP: 需要在付费套餐中拥有 Dev 或 Full seat

2 客户端支持

Claude Code 和 Codex 都已官方支持，可同时接入 Remote 和 Desktop MCP!

3 Figma Desktop

如需使用 Desktop MCP，必须安装并更新到最新版 Figma Desktop。

启用 Figma Desktop MCP Server

开启步骤

1. 打开 Figma Desktop，确保已更新到最新版本
2. 打开任意一个 Figma Design 文件
3. 切换到 Dev Mode（快捷键 Shift + D）
4. 在右侧 Inspect 面板找到 MCP server 区域
5. 点击 Enable desktop MCP server

启用成功后，底部会显示提示，地址为：

http://127.0.0.1:3845/mcp

两种上下文提供方式

Selection-based（选中驱动）

• 在 Figma Desktop 中选中一个 Frame
• 在 AI 工具中提示：「实现当前 Figma 选中的设计」
• ⚠️ 仅适用于 Desktop MCP，Remote MCP 不支持此方式

Link-based（链接驱动）

• 复制 Figma 中某个 Frame 的链接
• 在 AI 工具中粘贴链接，让 AI 实现该设计
• Desktop MCP 和 Remote MCP 都支持

Claude Code 接入配置

方式一：接入 Desktop MCP（本地）

在终端中执行以下命令：

claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

参数说明：

• --transport http：使用 HTTP 协议连接
• figma-desktop：MCP 服务器标识符（可自定义）
• http://127.0.0.1:3845/mcp: Desktop MCP 本地地址

管理命令：

# 查看所有 MCP 服务器
claude mcp list

# 删除 MCP 服务器
claude mcp remove figma-desktop

# 查看配置详情
claude mcp info figma-desktop

方式二：接入 Remote MCP（云端）

claude mcp add --transport http figma-remote https://mcp.figma.com/mcp

使用示例：

连接成功后，在 Claude Code 中可以这样提问：

“请读取我在 Figma Desktop 中当前选中的 Frame，分析其布局和样式，然后为我的 React 项目生成一个对应的组件。”

Codex 接入配置

Codex by OpenAI 对 Figma MCP 的支持非常完整！

Codex 支持的能力

• Desktop MCP server
• Remote MCP server
• Code to canvas（Remote 独有）
• Skills（预设工作流）

接入 Remote MCP（推荐）

1. 打开 Codex 的 MCP 或 Tools/Servers 配置界面
2. 新增一个 MCP server
3. URL 填写：https://mcp.figma.com/mcp
4. 保存配置并重启/刷新 Codex

Remote MCP 的优势：

• 不依赖 Desktop 本地运行
• 支持「Code to Canvas」- 将 Web 界面回写到 Figma（⚠️ 仅在 Claude Code 中可用，使用 generate_figma_design 工具）
• 更适合云端协作和长时间运行的工作流
• ⚠️ 注意：有速率限制（免费 6 次/月，付费 Dev seat 10 次/分钟）

接入 Desktop MCP（本地）

在 Codex 的 MCP 配置中添加：

{
  "mcpServers": {
    "figma-desktop": {
      "url": "http://127.0.0.1:3845/mcp",
      "transport": "http"
    }
  }
}

配置保存后，重启 Codex 即可使用！

典型使用场景和 Prompt

场景 1：获取设计并生成组件

操作流程：

1. 在 Figma 中选中组件或复制节点链接
2. 在 AI 工具中发起请求：

“请使用已连接的 Figma MCP 服务器读取当前选中的 Frame，分析其布局、颜色、字体和组件结构，并为我的 React 项目生成一个可复用的组件代码。”

场景 2：配合 Code Connect 重用组件

开启 Code Connect 后，AI 会优先使用你现有的组件库：

“请基于 Figma MCP 提供的设计上下文和 Code Connect 映射，生成使用我们现有组件库的实现代码，而不是重新写一个全新的组件。”

场景 3：利用 Skills（预设工作流）

在支持 Skills 的客户端中，可以直接调用：

• Implement Design - 实现设计
• Code Connect Components - 连接组件
• Create Design System Rules - 创建设计系统规则

推荐实践流程

完整配置顺序

1. 启用 Desktop MCP

• 在 Figma Desktop 中开启 MCP server
• 获得本地地址：http://127.0.0.1:3845/mcp

• 配置 Claude Code

  claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp
  

• 配置 Codex
• 添加 Remote MCP:https://mcp.figma.com/mcp
• 可选添加 Desktop MCP
• 启用 Figma 相关 Skills
• 开始使用
• 通过 selection-based 或 link-based 方式
• 把 Figma 设计上下文交给 AI
• 生成与现有代码库对齐的实现代码

---

总结

这套工作流既覆盖本地开发场景（Desktop MCP + Claude Code），也覆盖云端协作和高级能力场景（Remote MCP + Codex + Skills），完全符合 Figma 官方对 MCP 的最新设计！

核心优势：

• 设计到代码的效率提升 10 倍
• 保持设计与代码的一致性
• 支持现有组件库的重用
• 设计师与开发者的完美协作