Figma MCP 使用指南与配置教程

Figma MCP 使用指南与配置教程

注意: @figma/mcp-server npm 包已失效，请使用 Figma 官方提供的 Remote Server 或 Desktop Server 方式。

什么是 Figma MCP

Figma MCP (Model Context Protocol) 是一种让 AI 助手直接与 Figma 设计文件交互的标准化协议。通过 MCP，AI 可以读取设计文件、获取图层信息、导出资源，甚至协助进行设计工作。

MCP 服务器是 AI 代理使用 Model Context Protocol 与数据源交互的标准化接口的一部分。

核心功能

• 设计文件读取 - 获取 Figma 文件的结构、图层信息
• 资源导出 - 自动导出图标、图片等设计资源
• 设计分析 - 分析设计系统、颜色方案、字体使用等
• 代码生成 - 基于设计稿生成前端代码
• 设计协作 - 与设计师协作优化设计方案
• Code Connect 集成 - 保持设计系统组件与代码库一致
• Make 资源获取 - 从 Make 文件中收集代码资源作为 LLM 上下文

系统要求

基础要求

• 支持 MCP 服务器的代码编辑器或应用（VS Code、Cursor、Claude Code 等）
• Figma 账户（个人版或团队版）
• 稳定的网络连接

推荐环境

• macOS 12+ / Windows 11
• Figma 桌面应用（使用 Desktop Server 时必需）
• 16GB RAM（处理大型设计文件）

---

安装方式

Figma MCP 现在提供两种安装方式：

方式	说明	适用场景
Remote Server	连接 Figma 远程服务器	无需安装桌面应用，随时随地访问
Desktop Server	通过 Figma 桌面应用本地运行	需要更稳定连接，支持选择式工作流

---

方式一：Remote Server（远程服务器）

Remote Server 让你可以直接连接 Figma 文件，无需安装 Figma 桌面应用。通过 OAuth 认证即可使用。

功能特点

• 从实时 UI 生成设计（将 Web 应用或网站的 UI 截图发送到 Figma）
• 从选定的 Frame 生成代码
• 提取设计上下文（变量、组件、布局数据）
• 获取 Make 资源
• Code Connect 集成

配置步骤

Claude Code

推荐方式：安装 Figma 插件

claude plugin install figma@claude-plugins-official

手动配置：

1. 在终端运行以下命令添加 Figma MCP：

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

提示: 使用 --scope user 标志可使服务器在所有项目中可用：

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

2. 启动新的 Claude Code 实例
3. 输入 /mcp 管理 MCP 服务器，选择 figma
4. 选择 Authenticate
5. 点击 Allow Access 授权
6. 看到确认消息：Authentication successful. Connected to figma

VS Code

1. 使用快捷键 ⌘ Shift P，选择：

   • MCP: Open User Configuration - 全局使用
   • MCP: Open Workspace Folder MCP Configuration - 仅当前工作区

2. 在 mcp.json 文件中添加：

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

3. 点击 Start 启动服务器
4. 点击 Allow Access 授权

Cursor

推荐方式：安装 Figma 插件

在 Cursor 的 agent chat 中输入安装命令，插件包含：

• MCP 服务器配置
• 设计实现、Code Connect 组件连接、设计系统规则创建的 Skills
• Figma MCP 资源处理规则

手动配置：

1. 点击 Figma MCP 服务器深度链接
2. 点击 Install
3. 点击 Connect 开始认证
4. 点击 Open，然后 Allow access

Codex

使用 Codex 应用（推荐）：

1. 安装 Codex 应用
2. 点击左上角 Skills
3. 在技能列表中点击 Figma 旁边的 +
4. 点击左下角 Settings → MCP servers
5. 点击 Figma 服务器的 Install and authenticate

手动配置：

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

---

方式二：Desktop Server（桌面服务器）

Desktop Server 通过 Figma 桌面应用在本地运行，提供更稳定的连接和选择式工作流。

注意: Desktop Server 只能通过 Figma 桌面应用使用。

功能特点

• 从选定的 Frame 生成代码
• 提取设计上下文（变量、组件、布局数据）
• 获取 Make 资源
• Code Connect 集成

配置步骤

Step 1: 启用 Desktop MCP Server

1. 打开 Figma 桌面应用并更新到最新版本
2. 创建或打开一个 Figma Design 文件
3. 在底部工具栏切换到 Dev Mode（快捷键 Shift D）
4. 在 inspect 面板的 MCP server 部分，点击 Enable desktop MCP server

服务器将在本地运行：http://127.0.0.1:3845/mcp

Step 2: 配置 MCP 客户端

VS Code

1. 使用快捷键 ⌘ Shift P，搜索 MCP:Add Server
2. 选择 HTTP
3. 输入服务器地址：http://127.0.0.1:3845/mcp，按 Enter
4. 输入 Server ID：figma-desktop，按 Enter
5. 选择全局或当前工作区

配置示例：

{
  "servers": {
    "figma-desktop": {
      "type": "http",
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

Cursor

1. 打开 Cursor → Settings → Cursor Settings
2. 进入 MCP 标签页
3. 点击 + Add new global MCP server
4. 输入配置：

{
  "mcpServers": {
    "figma-desktop": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

Claude Code

claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

常用命令：

• claude mcp list - 列出所有配置的服务器
• claude mcp get my-server - 获取特定服务器详情
• claude mcp remove my-server - 移除服务器

其他编辑器

通用配置：

{
  "mcpServers": {
    "figma-desktop": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

---

使用 MCP Server

提供设计上下文的两种方式

1. 选择式（Selection-based）

仅 Desktop Server 支持：

1. 在 Figma 桌面应用中选择一个 Frame 或图层
2. 在 MCP 客户端中提示 AI 帮助实现当前选择的设计

2. 链接式（Link-based）

Remote 和 Desktop Server 都支持：

1. 复制 Figma 中 Frame 或图层的链接
2. 在 MCP 客户端中提示 AI 帮助实现该 URL 的设计

注意: 客户端不会导航到 URL，但会提取 MCP 服务器识别对象所需的 node-id。

使用示例

获取设计上下文：

请帮我根据这个 Figma 链接生成 Vue 组件代码：
https://www.figma.com/file/xxx?node-id=xxx

将 UI 发送到 Figma（Remote Server）：

启动本地服务器并捕获 UI 到新的 Figma 文件

---

Desktop Server 设置

在 Dev Mode 的 inspect 面板中，点击 Open settings modal 按钮可调整设置。

图像设置

• Local server - 使用本地图像，在返回的标记中添加 localhost 链接
• Download assets - 允许 MCP 服务器将图像资源下载并写入用户项目
• (DEPRECATED) Placeholders - 跳过图像提取，添加通用占位符

Enable Code Connect

在响应中包含 Code Connect 映射，使生成的代码可以重用已连接代码库中的组件。

---

提升输出质量的规则

为了获得最佳输出，建议设置规则来指导 AI 代理。以下是一些示例规则：

# Figma MCP 规则

## 代码生成
- 优先使用 TypeScript
- 使用 Composition API（Vue 3）或函数组件（React）
- 遵循项目现有的组件结构

## 样式处理
- 使用 Tailwind CSS 或 CSS Modules
- 保持响应式设计
- 遵循设计系统中的间距和颜色规范

## 资源处理
- 导出 SVG 图标到指定目录
- 使用 WebP 格式处理图片
- 生成 1x、2x、3x 多倍图

---

故障排除

连接失败

• 检查 Figma 桌面应用是否正在运行（Desktop Server）
• 验证服务器地址是否正确
• 尝试重启 Figma 桌面应用和编辑器

认证问题

• 清除浏览器缓存后重新认证
• 检查 Figma 账户权限
• 确认网络连接正常

工具不可见

• 重启 Figma 桌面应用和 MCP 客户端
• 输入 #get_design_context 确认工具是否可用
• 检查 MCP 配置文件格式是否正确

---

参考链接

• Figma MCP Server 官方文档
• Remote Server 安装指南
• Desktop Server 安装指南
• Figma MCP Catalog

---

总结

Figma MCP 为 AI 辅助设计开发提供了强大的技术基础。现在有两种官方支持的方式：

1. Remote Server - 适合需要随时随地访问 Figma 文件的用户，通过 OAuth 认证即可使用
2. Desktop Server - 适合需要更稳定连接和选择式工作流的用户

关键要点：

• @figma/mcp-server npm 包已失效，请使用官方方式
• Remote Server 地址：https://mcp.figma.com/mcp
• Desktop Server 地址：http://127.0.0.1:3845/mcp
• 设置适当的规则可以显著提升 AI 输出质量
• Code Connect 集成可保持生成代码与代码库一致

建议从小规模项目开始尝试，逐步扩展到完整的开发流程中。随着工具的成熟和团队的适应，Figma MCP 将成为设计系统和组件驱动开发的重要组成部分。