一、全文速览图
二、什么是 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 方式
- 安装 Codex 应用。
- 在应用左上角点击“技能”，为每个 Figma 技能点击“+”号添加。
- 在左下角“设置”中进入“MCP 服务器”。
- 在推荐列表中找到并点击“安装并验证 Figma 服务器”，按提示授权。
CLI 方式
- 安装 Codex CLI。
- 在终端运行命令：
codex mcp add figma --url https://mcp.figma.com/mcp，并按提示验证。
3. Cursor
同样推荐安装官方插件以获得完整功能。
插件安装
在 Cursor 的 Agent 聊天窗口输入：
/add-plugin figma
该插件包含了服务器配置、Code Connect 连接技能以及设计系统处理规则。
手动设置
- 打开 MCP 配置页面，点击“Install”。
- 点击“Connect”，然后点击“打开”授权链接。
- 在 Figma 授权页面点击“允许访问”。
4. VS Code
- 使用快捷键
⌘+Shift+P(Mac) /Ctrl+Shift+P(Windows)，搜索并选择“MCP: 打开用户配置”（全局使用）或“MCP: 打开工作区文件夹 MCP 配置”（仅当前项目使用）。如果文件不存在，会提示创建mcp.json。 - 在配置文件中粘贴以下服务器配置：
{
"inputs": [],
"servers": {
"figma": {
"url": "https://mcp.figma.com/mcp",
"type": "http"
}
}
}
- 在 MCP 服务器名称上方点击“开始”按钮。
- 在弹出的页面中允许访问即可。
六、使用 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 的出现，为设计和开发的高效协作提供了新的可能性，值得深入探索并将其融入日常实践。
