Figma MCP 远程服务器安装指南「官方版」

发布于 2026年03月13日 16:00

#Figma #MCP

注意：你必须使用支持 MCP 服务器（模型上下文协议服务器）的代码编辑器或应用程序，例如 VS Code、Cursor 或 Claude Code。有关支持的 MCP 客户端的完整列表，请参阅 Figma MCP Catalog。

Figma MCP 服务器将 Figma 直接融入你的工作流。它向 AI 智能体提供重要的设计信息和上下文，帮助智能体从 Figma 设计文件生成代码。

MCP 服务器是 AI 智能体与数据源交互的标准化接口的一部分，使用的是模型上下文协议（Model Context Protocol）。

Figma 的远程 MCP 服务器让你无需安装 Figma 桌面应用，就能直接连接到你的 Figma 文件。你可以将实时 UI 捕获到 Figma Design 中，并在你工作的任何位置将设计上下文带入工作流。

启用服务器后，你能够：

将实时 UI 转换为设计：使用支持的 MCP 客户端捕获你的 Web 应用或网站的实时 UI，并将其发送到新的或现有的 Figma 文件或剪贴板。（仅限部分客户端）
从选定的画板生成代码：选择一个 Figma 画板并将其转换为代码。非常适合构建新流程或迭代应用功能的产品团队。
提取设计上下文：将变量、组件和布局数据直接拉入你的 IDE。这对于设计系统和基于组件的工作流特别有用。
获取 Make 资源：从 Make 文件收集代码资源并将其提供给 LLM 作为上下文。这可以帮助你从原型转换到生产应用。
通过代码连接保持设计系统组件一致：通过复用你的实际组件来提高输出质量。代码连接（Code Connect）使你生成的代码与你的代码库保持一致。

要使用此服务器，你需要通过 Figma 的 OAuth 认证流程登录。设置完成后，远程服务器为你提供了一种访问 Figma 数据并将其与工具集成的无缝方式。

启用远程 MCP 服务器

本文档涵盖了我们支持的多个 MCP 客户端的安装步骤。有关支持的 MCP 客户端的安装指南列表，请参阅 Figma MCP 服务器指南。

根据你使用的 MCP 客户端，按相应步骤操作：

Claude Code
Codex by OpenAI
Cursor
VS Code

Claude Code

使用 Figma 插件进行 Claude Code 设置（推荐方式）

在 Claude Code 中设置 Figma MCP 服务器的推荐方式是安装 Figma 插件。该插件包含 MCP 服务器设置以及常见工作流的智能体技能。

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

claude plugin install figma@claude-plugins-official

详细了解 Anthropic 的 Claude Code 插件和智能体技能。

Claude Code 手动设置

在终端中运行以下命令，将 Figma MCP 添加到 Claude Code：
```
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
```
默认情况下，Claude Code 使用本地作用域，因此服务器仅在当前项目中可用。应用用户作用域意味着你不必为每个项目重新安装服务器。
启动一个新的 Claude Code 实例。
在 Claude 中输入 /mcp 以管理你的 MCP 服务器，然后选择 figma。
选择 Authenticate（认证）。
点击 Allow Access（允许访问）。
回到 Claude Code，你应该会看到：Authentication successful. Connected to figma
使用 Claude Code 中的 /mcp 命令，确认你的 MCP 服务器已连接。
开始使用吧！

Codex

使用 Codex 应用（推荐方式）

安装 Codex 应用。
在 Codex 应用的左上角，点击 Skills（技能）。
在技能列表中，点击 Figma 技能旁边的 +。
在 Codex 应用的左下角，点击 Settings（设置），然后点击 MCP servers。
在推荐服务器列表中，点击 Figma 服务器的 Install and authenticate（安装并认证）。当系统提示你时，授权该服务器。
开始向 Codex 提问，使用 Figma MCP 服务器提供的工具。

Codex 手动设置

安装 Codex CLI。
在终端中运行以下命令：
```
codex mcp add figma --url https://mcp.figma.com/mcp
```
当系统提示你时，认证该服务器。
开始向 Codex 提问，使用 Figma MCP 服务器提供的工具。

Cursor

使用 Figma 插件进行 Cursor 设置（推荐方式）

在 Cursor 中设置 Figma MCP 服务器的推荐方式是安装 Figma 插件。该插件包含 MCP 服务器设置以及常见工作流的智能体技能。

在 Cursor 的智能体聊天中输入以下命令来安装插件：

/add-plugin figma

该插件包括：

Figma MCP 服务器的 MCP 服务器配置
用于实现设计、通过代码连接（Code Connect）连接组件以及创建设计系统规则的智能体技能
用于正确处理来自 Figma MCP 服务器的资源的规则

Cursor 手动设置

点击 Figma MCP 服务器深度链接。这将在 Cursor 中打开 MCP 配置。
点击 “Install MCP Server?” 下的 Install（安装）
点击 Figma 旁边的 Connect（连接），开始认证过程。
点击 Open（打开）。
Allow access（允许访问）
开始使用吧！

VS Code

使用快捷键 ⌘ Shift P，然后：
- 选择 MCP: Open User Configuration 以全局使用 Figma MCP 服务器。
- 选择 MCP: Open Workspace Folder MCP Configuration 以仅在当前工作区中使用 Figma MCP 服务器。
注意：如果 mcp.json 文件尚不存在，系统会提示你创建该文件。

在 mcp.json 文件中，粘贴以下代码：

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

点击 Start（MCP 服务器名称上方）。
Allow Access（允许访问）。
开始使用吧！

使用 MCP 服务器

MCP 服务器引入了一组工具，帮助 LLM 将你的实时 UI 带到 Figma Design，并从 Figma 获取设计上下文。连接完成后，你就可以开始向你的 MCP 客户端提问了。

有关工具和示例的完整列表，请参阅工具和提示。

示例：将 UI 发送到 Figma

注意：目前仅适用于部分 MCP 客户端。请参阅代码到画布。

将你的 Web 应用或网站的实时 UI 发送到 Figma，通过与你的 MCP 客户端对话即可完成：

向你的 MCP 客户端发出提示：“为我的应用启动一个本地服务器，并在一个新的 Figma 文件中捕获 UI。”
按照你的客户端提供的步骤操作。你的客户端会为你打开一个浏览器窗口，或者给你一个链接来访问。
使用捕获工具栏捕获你的 Web 应用或网站的页面、元素和状态。
完成后通知你的客户端。你的客户端会给你一个链接，用于打开创建的 Figma 文件。

示例：获取设计上下文

从文件中获取设计上下文和代码，基于链接进行。使用方法如下：

复制 Figma 中画板或图层的链接
提示你的客户端帮助你在选定的 URL 处实现设计

注意：你的客户端将无法导航到选定的 URL，但它会提取 MCP 服务器识别对象所需的节点 ID，以返回相应的信息。

优化 MCP 服务器输出

为了获得最佳输出，我们建议设置规则来指导智能体。为了帮助你入门，我们提供了一些有用的示例规则。