由于 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
开启步骤
- 打开 Figma Desktop，确保已更新到最新版本
- 打开任意一个 Figma Design 文件
- 切换到 Dev Mode（快捷键
Shift+D） - 在右侧 Inspect 面板找到 MCP server 区域
- 点击 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（推荐）
- 打开 Codex 的 MCP 或 Tools/Servers 配置界面
- 新增一个 MCP server
- URL 填写：
https://mcp.figma.com/mcp - 保存配置并重启/刷新 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：获取设计并生成组件
操作流程：
- 在 Figma 中选中组件或复制节点链接
- 在 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 - 创建设计系统规则
推荐实践流程
完整配置顺序
- 启用 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
- 生成与现有代码库对齐的实现代码
- 设计到代码的效率提升 10 倍
- 保持设计与代码的一致性
- 支持现有组件库的重用
- 设计师与开发者的完美协作
总结
这套工作流既覆盖本地开发场景（Desktop MCP + Claude Code），也覆盖云端协作和高级能力场景（Remote MCP + Codex + Skills），完全符合 Figma 官方对 MCP 的最新设计！
核心优势：
