Figma Remote MCP远程协作工具正式上线 保姆级安装教程来了

一、全文速览图

二、什么是 Remote MCP Server？

Figma 官方最新推出了一项名为“Remote MCP Server”的服务。简单而言，它利用模型上下文协议（MCP），为 AI 助手（Agents）开辟了一条直接访问 Figma 设计数据与设计上下文的通道，从而让 AI 能够依据真实的设计稿生成代码。

这个“远程”版本，顾名思义，是由 Figma 托管的云端服务。它的突出特点包括：

• 可直接连接你的 Figma 文件。
• 无需在本地安装 Figma 桌面客户端。
• 允许你在任意开发环境中获取设计上下文。

这里需要澄清一个常见误区：MCP 本身并非插件，而是一套定义 AI 如何与数据、工具交互的接口规范。而 Remote MCP Server 则是该协议的云端实现，其最大优势在于轻量——你不再需要依赖本地的 Figma 应用（这与必须依赖本地 App 的 Desktop MCP 有本质区别）。

用更通俗的话来说，Remote MCP Server 就像是一个远程的“设计数据枢纽”。开发者可以在自己熟悉的代码编辑器里，直接调用 Figma 中的设计规范、组件和布局信息，整个过程完全无需启动本地软件。

让设计流程更系统！深入解析Figma画布新能力

一、全文概览 二、直接在画布中执行设计操作 Figma 的最新更新，从根本上改变了设计师在画布上的工作方式。

三、Remote MCP Server 能做什么？

根据官方文档，启用该服务器后，你可以在支持的开发工具中实现以下功能：

• 从实时 UI 生成设计（目前部分工具支持）。
• 基于 Figma 中的 Frame 直接生成代码。
• 提取完整的设计上下文，包括组件、变量、布局等。
• 获取代码资源（Make 文件）。
• 通过 Code Connect 功能，保持设计与代码的一致性。

其中，最核心的价值在于“上下文注入”（Context Injection）。这意味着你可以将整个设计系统——涵盖组件库、设计变量（Tokens）——直接“喂”给 AI，让 AI 在理解与生成时严格遵循已有规范。这远比单纯让 AI 看图说话要精准得多。

需要留意的是，官方明确提示，上述功能目前是免费提供的，但未来政策可能会有所调整。

要使用该服务，你必须先通过 Figma 的 OAuth 流程登录并授权。完成设置后，远程服务器就能轻松地将你的 Figma 数据集成到开发工具链中。

四、如何启用 Remote MCP Server

启用过程可概括为三个关键步骤。

第一步：选择支持 MCP 的工具
你需要一个能充当“MCP 客户端”的环境，也就是 AI 执行任务的地方。目前主流的选择包括：

• Claude Code
• Codex
• Cursor
• Visual Studio Code

这些工具将负责与 Remote MCP Server 通信并执行 AI 指令。

第二步：连接远程服务器（核心配置）
无论使用上述哪种工具，核心配置都是相同的：在指定配置文件中添加服务器地址。这本质上是在配置一个远程 API 端点。

通用配置如下：

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

第三步：OAuth 登录授权
配置完成后，你需要通过 Figma 的 OAuth 流程进行登录和授权。成功后会看到类似“Authentication successful. Connected to figma”的提示。

这里有两点至关重要：首先，MCP Server 访问的是你账户下的私有数据，并非公开信息；其次，你必须绑定自己的 Figma 账户，服务器才能获取对应的设计文件权限。

五、不同工具的配置方式

虽然原理相通，但具体到每个工具，配置步骤略有差异。下面我们逐一拆解。

1. Claude Code

最推荐的方法是直接安装 Figma 官方插件，它集成了 MCP 服务器设置和常用技能。

插件安装（推荐）
在终端运行以下命令：

claude plugin install figma@claude-plugins-official

手动安装
如果选择手动配置，则在终端运行：

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

提示：若想在所有项目中可用，请加上 --scope user 标志。

安装后，重启 Claude Code，在聊天框中输入 /mcp 管理服务器，选择 figma，然后点击“Authenticate”进行授权。在弹出的页面点击“Allow Access”即可完成连接。

连接成功后，可以再次使用 /mcp 命令确认状态。

2. Codex（App / CLI）

App 方式

1. 安装 Codex 应用。
2. 在应用左上角点击“技能”，为每个 Figma 技能点击“+”号添加。
3. 在左下角“设置”中进入“MCP 服务器”。
4. 在推荐列表中找到并点击“安装并验证 Figma 服务器”，按提示授权。

CLI 方式

1. 安装 Codex CLI。
2. 在终端运行命令：codex mcp add figma --url https://mcp.figma.com/mcp，并按提示验证。

3. Cursor

同样推荐安装官方插件以获得完整功能。

插件安装
在 Cursor 的 Agent 聊天窗口输入：

/add-plugin figma

该插件包含了服务器配置、Code Connect 连接技能以及设计系统处理规则。

手动设置

1. 打开 MCP 配置页面，点击“Install”。
2. 点击“Connect”，然后点击“打开”授权链接。
3. 在 Figma 授权页面点击“允许访问”。

4. VS Code

1. 使用快捷键 ⌘+Shift+P (Mac) / Ctrl+Shift+P (Windows)，搜索并选择“MCP: 打开用户配置”（全局使用）或“MCP: 打开工作区文件夹 MCP 配置”（仅当前项目使用）。如果文件不存在，会提示创建 mcp.json。
2. 在配置文件中粘贴以下服务器配置：

{
   "inputs": [],
   "servers": {
     "figma": {
       "url": "https://mcp.figma.com/mcp",
       "type": "http"
     }
   }
}

3. 在 MCP 服务器名称上方点击“开始”按钮。
4. 在弹出的页面中允许访问即可。

六、使用 MCP Server：设计师与开发者的操作指南

Remote MCP Server 的核心在于，它让 AI 能够直接“读懂”Figma 里的设计系统和具体文件。这与传统的手动截图或文字描述有本质差异——AI 获取的是结构化的设计数据，从而确保了理解的准确性。

1. 基于链接提取设计上下文

• 复制 Figma 文件或具体节点的 URL。
• 在 MCP 客户端工具中粘贴该链接。
• AI 会自动读取文件结构，包括 Frame、组件、布局、变量、Tokens 等。
• 最终输出可用于代码生成、设计修改或分析的结构化上下文数据。

2. 基于选区操作

• 在 Figma 画布中选中某个 Frame 或组件。
• 在 MCP 工具中引用该选区作为上下文。
• AI 将针对这个特定选区执行生成、修改或转换任务。

这种方式非常适合快速局部迭代，能显著提升效率，并避免处理整个文件带来的性能开销。

3. 设计系统优先策略

MCP Server 会自动识别项目中的组件库、设计变量（Variables）和 Tokens。这意味着 AI 生成的所有内容都会严格遵循现有的设计规范，从根本上避免了生成脱离规范的 UI 元素，保证了产出的一致性。

七、核心价值与展望

从设计师和开发者的日常工作流来看，Remote MCP Server 的价值显而易见。

首先，它真正实现了设计与开发的无缝闭环。AI 能够直接读取并理解设计系统，生成高度可复用、符合规范的代码或 UI 建议，大幅减少了手动复制属性、反复沟通确认的重复劳动。

其次，它提供了一种更轻量、更开放的集成方式。无需本地安装 Figma，即可在多种主流开发环境中调用设计资产，这极大地提升了工具的兼容性和工作流的灵活性。

技术终究是为人服务的工具。面对层出不穷的新工具，关键在于找到适合自己工作流的那一个，并善加利用。Remote MCP Server 的出现，为设计和开发的高效协作提供了新的可能性，值得深入探索并将其融入日常实践。