Figma + MCP：前端设计实现与远程 MCP 接入指南

适用场景：团队内部 10-15 分钟分享、入门培训、项目落地 SOP

核心目标：把"看图还原"升级为"基于设计上下文开发"

1. 执行摘要

Figma MCP 的价值不是"替代前端"，而是把 Figma 的结构化信息（组件、变量、布局、节点）直接引入开发流程，让前端实现更快、更准、更一致。

落地后最直接的收益：

减少设计沟通回合（更少来回确认）
提升组件复用率（少造轮子）
降低视觉返工率（少改样式）
加速需求从设计到上线的闭环

2. 适用范围与能力边界

2.1 适用对象与访问条件

远程 MCP 服务器可用于支持的 MCP 客户端。
你需要使用 Figma MCP 目录中支持的客户端（如 Claude Code、Codex、Cursor、VS Code）。
使用前需走 Figma OAuth 授权。

2.2 远程服务器架构说明（推荐）

统一地址：https://mcp.figma.com/mcp
优势：无需安装 Figma 桌面端即可连接 Figma 文件。
注意：部分能力（如"代码到画布"）仅在部分客户端可用。

3. 四类客户端配置总览

编辑器	推荐方式	手动方式	验收标准
Claude Code	安装 Figma 插件	`claude mcp add --transport http figma https://mcp.figma.com/mcp`	`/mcp` 中 `figma = connected`
Codex by OpenAI	Codex App 内安装 Figma 插件	`codex mcp add figma --url https://mcp.figma.com/mcp`	插件可用并完成 OAuth
Cursor	`/add-plugin figma`	在 MCP 安装弹窗中安装远程服务器	MCP 面板显示已连接
VS Code	命令面板配置 MCP	`mcp.json` 写入 `figma` 服务器	MCP Start 后完成 OAuth

4. 远程 MCP 服务器配置详解

远程 MCP 统一地址：https://mcp.figma.com/mcp

4.1 Claude Code 配置

路径 A：插件化安装（推荐）

在终端执行：

bash 复制代码

claude plugin install figma@claude-plugins-official

路径 B：CLI 手动接入

在终端执行：

bash 复制代码

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

如需全局生效（所有项目可用），执行：

bash 复制代码

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

常用管理命令：

bash 复制代码

# 查看所有已配置服务器
claude mcp list

# 查看指定服务器详情
claude mcp get my-server

# 删除指定服务器
claude mcp remove my-server

说明：默认是本地作用域（仅当前项目）。如果你经常切项目，建议使用 --scope user，避免重复安装。

4.2 Codex by OpenAI 配置

路径 A：Codex App 插件接入（推荐）

打开 Codex App，进入 Plugins
在 Figma 项点击 +
点击 Install Figma
完成 OAuth，点击 Allow access

路径 B：Codex CLI 手动接入

bash 复制代码

codex mcp add figma --url https://mcp.figma.com/mcp

出现认证提示时完成授权即可。

4.3 Cursor 配置

路径 A：插件化接入（推荐）

在 Cursor 的 Agent Chat 输入：

text 复制代码

/plugin-add figma

路径 B：设置中心手动接入

打开 Cursor -> Settings -> Cursor Settings
点击 Tools & MCP
在 MCP Tools 下点击 + 添加自定义 MCP Server
在 mcp.json 粘贴以下配置并保存

json 复制代码

{
  "mcpServers": {
    "Figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

4.4 VS Code 配置

路径 A：命令面板接入（推荐）

使用快捷键 ⌘ Shift P，搜索并执行 MCP: Add Server
选择 HTTP
粘贴服务器地址 https://mcp.figma.com/mcp 并回车
当提示 Server ID 时输入 Figma MCP 并回车
选择添加范围：全局（User）或当前工作区（Workspace）
使用 ⌥⌘B 或 ⌃⌘I 打开聊天工具栏并切换到 Agent 模式
在聊天中输入 #get_design_context，确认 Figma MCP 工具可调用

路径 B：配置文件接入

json 复制代码

{
  "servers": {
    "Figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

4.5 其他编辑器接入（SSE/Streamable HTTP）

如果你的代码编辑器或工具支持 SSE（Server-Sent Events）通信，也可以手动接入 Figma MCP：

先确认该编辑器支持基于 SSE 的 MCP 通信
按该编辑器的 MCP 配置方式添加以下服务器

json 复制代码

{
  "mcpServers": {
    "Figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

注意：Figma MCP 基于 SSE 协议通信；在不同客户端中，通常会显示为 Streamable HTTP MCP Server 配置流程。

5. 获取设计上下文的标准流程（Link-based）

从 Figma 文件中获取设计上下文与代码是"基于链接"的工作流，推荐按下面操作：

在 Figma 中复制目标帧（Frame）或图层（Layer）链接
在 MCP 客户端中发起提示：请基于这个链接协助我实现该设计

可直接使用的提示词示例：

text 复制代码

请基于这个 Figma 链接获取设计上下文，并协助我实现该设计页面。

注意事项：

MCP 客户端通常不会直接"打开并浏览"这个 URL
客户端会从链接中提取 node-id
MCP 服务器依靠 node-id 定位目标对象，并返回对应设计信息与上下文

6. 参考资料

Set up the remote server (recommended)