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

去年 8 月份我在小红书上发布了一篇 Claude Code 如何配合 Figma MCP，实现 AI 自动读取设计稿，生成前端代码的文章，结果到今天为止，每天都有收藏和留言。

由于 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 + Claude Code），也覆盖云端协作和高级能力场景（Remote MCP + Codex + Skills），完全符合 Figma 官方对 MCP 的最新设计！

核心优势：

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

{{userData.name}}已认证