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

首页

AI教程

热心网友

转载

2026-05-28

一、全文速览图

二、什么是 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 的出现，为设计和开发的高效协作提供了新的可能性，值得深入探索并将其融入日常实践。

来源:https://www.uisdc.com/figma-remote-mcp

免责声明：游乐网为非赢利性网站，所展示的游戏/软件/文章内容均来自于互联网或第三方用户上传分享，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系youleyoucom@outlook.com。

上一篇：程序员求职平台CrackedDevs使用指南下一篇：AI技术助力Photoshop重塑图像处理未来