Figma Remote MCP上线！保姆级安装教程来了！

一、全文速览图

二、什么是 Remote MCP Server？

官方发布Figma MCP Server ，是通过 Model Context Protocol，为 AI agents 提供设计数据与上下文，使其能够基于 Figma 设计生成代码。 Remote MCP Server 是由 Figma 托管的远程服务，主要功能如下：

1. 直接连接 Figma 文件
2. 无需安装 Figma Desktop App
3. 在任意开发环境中访问设计上下文

这里其实在讲两件事：

MCP的本质不是插件，是 AI → 数据 → 工具 的接口协议

且Remote MCP是更轻量的方式，特点就是云端、无需本地Fimga（这点不同于Desktop MCP，因为后者依赖Figma App）

说人话就是Remote MCP Server 是其远程托管版本，允许开发者在本地开发工具中直接访问 Figma 设计上下文，而无需依赖本地 Figma 应用。

三、Remote MCP Server 能做什么？

按照官方说法，服务器启用后，用户可以：

1. 从实时 UI 生成设计（仅部分工具支持）
2. 从 Figma Frame 生成代码
3. 提取设计上下文（组件、变量、布局）
4. 获取代码资源（Make 文件）
5. 通过 Code Connect 保持设计与代码一致

老三认为最核心的一点就是 Context Injection，等同于是可以将design system注入AI（虽然我在隔壁的stitch也在尝试优化设计系统的融合）

需要注意的是，官方有提到，下方功能只是目前保持免费使用，大家需要看一下

同时，要使用此服务器，需要通过 Figma 的 OAuth 身份验证流程登录。设置完成后，远程服务器可让您轻松访问 Figma 数据并将其与您的工具集成。

四、如何启用 Remote MCP Server

第一点就是需要使用支持MCP的工具，例如：

1. Claude Code
2. Codex
3. Cursor
4. Visual Studio Code

这些工具主要承担MCP Client的角色，是AI执行环境。

官方也有详细的文档可供查询。

第二步就是连接远程服务器，这也是最重要的一点

所有工具的核心配置是同一个：

ounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(line
{
  "servers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp",
      "type": "http"
    }
  }
}

这一步就是在配置一个远程API endpoint

第三步就是OAuth 登录授权

使用 MCP server 前，你需要通过 Figma 的 OAuth 流程登录并授权访问。

授权成功后，客户端会提示：

Authentication successful. Connected to figma

这里有两个关键点： • MCP Server ≠ 公开数据 • 必须绑定你的 Figma 账户

五、不同工具的配置方式

上面提到了四个支持MCP的工具，接下去就是如何操作了

1. Claude Code

在 Claude Code 中设置 Figma MCP 服务器的推荐方法是安装 Figma 插件，该插件包含 MCP 服务器设置以及常用工作流程的代理技能。

运行以下命令，从 Anthropic 的官方插件市场安装插件。

ounter(line
claude plugin install figma@claude-plugins-official

手动安装的话以下方法

安装命令：

在终端中运行以下命令，将 Figma MCP 添加到 Claude Code：

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

提示： 要使 Figma MCP 服务器在所有项目中可用，请使用 --scope user 标志安装它： claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

可选参数是：

ounter(line
--scope user

然后需要启动一个新的 Claude Code 实例。

随后在 Claude 中输入 /mcp 来管理您的 MCP 服务器，然后选择 figma 。

选择身份验证（就是下图的Authenticate）

点击允许访问（allow access）

返回到 Claude 代码中，你应该看到： Authentication successful. Connected to figma

可以使用 Claude Code 中的 /mcp 命令确认您的 MCP 服务器已连接。

然后gogogo吧

2. Codex（App / CLI）

App的方式

① 安装 Codex 应用（点击即可跳转）

② 在 Codex 应用的左上角，点击 “技能” 。

③ 在技能列表中，点击每个 Figma 技能旁边的 + 号。

④ 在 Codex 应用的左下角，点击 “设置” ，然后点击 “MCP 服务器” 。

⑤ 在推荐服务器列表中，单击 “安装并验证 Figma 服务器”。出现提示时，请授权该服务器。

⑥ 开始提示 Codex   gogogo

CLI 方式

① 安装 Codex CLI（点击可跳链接）

② 在终端中运行以下命令：（出现提示时，请验证服务器身份）

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

ounter(line

③ 开始提示 Codex  gogogo

3. Cursor

在 Cursor 中设置 Figma MCP 服务器的推荐方法是安装 Figma 插件，该插件包含 MCP 服务器设置以及常用工作流程的代理技能

在 Cursor 的代理聊天窗口中输入以下命令来安装插件：

ounter(line
/add-plugin figma

该插件包含：

1. Figma MCP 服务器的 MCP 服务器配置
2. 具备实现设计、通过 Code Connect 连接组件以及创建设计系统规则的技能
3. Figma MCP 服务器资产处理的正确规则

也可手动设置

① 打开 MCP 配置页面

② 点击 Install

③ 点击 Connect

④ 点击打开

⑤ 授权，允许访问

开始提示！gogogo

4. VS Code

① 使用快捷键 ⌘+Shift+P，然后：

选择 MCP：打开用户配置以全局使用 Figma MCP 服务器。

选择 MCP：打开工作区文件夹 MCP 配置 ，即可在当前工作区内使用 Figma MCP 服务器。

如该文件不存在，系统会提示您创建 mcp.json 文件，那就创建。

② 接下去在 mcp.json 文件中，粘贴以下代码：（我怎么感觉前面有写）

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

③ 点击开始（位于 MCP 服务器名称上方）

④ 允许访问即可

同理开始提示！gogogo！

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

Remote MCP Server 让 AI 在你的开发工具中直接访问 Figma 文件和设计系统。与传统截图（根据实际工作流，MasterGo虽然开放MCP，但是还是有很多阻碍，需要截图读取）或描述不同，MCP Server提供结构化设计数据，确保 AI 理解设计的真实上下文。

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

1. 复制 Figma 文件或节点 URL
2. 在 MCP Client 工具中粘贴链接
3. AI 读取文件结构：Frame、组件、布局、变量、tokens
4. 输出可用于生成、修改或分析的上下文数据

2. 基于选区操作

1. 在 Figma 中选中 Frame 或组件
2. 在 MCP 工具中引用选区作为上下文
3. AI 将针对选区执行生成、修改或转换任务

适合快速局部迭代，提高效率并减少全文件处理的开销

3. 设计系统优先策略

1. MCP Server 会自动识别组件库、变量和 tokens
2. AI 输出内容严格遵循现有设计系统
3. 避免生成脱离规范的 UI 元素

七、对于它的价值来讲

老三认为Remote MCP Server 的核心价值可以从设计师日常工作角度理解：

首先AI可以直接读取设计系统，生成可复用的代码或UI，等同于设计和开发闭环了。

对于老三目前的工作流之一来讲，无需手动复制属性、或者是截图页面，一定程度上减少了重复劳动，且能确保产出一致性，毕竟是严格遵循现有的组件库和设计规范来的。

最直接的一点就是Figma等同于说是多工具兼容，想必是大家也有接触过pencil，那这样一来可以技术性放弃哈哈哈哈。

技术和技能永远是为人服务的，所以大家也不用太焦虑，找到自己适合的软件和工具，善于使用它掌握它，并且可以融入工作流那就是最好的！

我是老三，希望这份设计情报能够帮助到你