如何在 2026 年为 AI 设计设置 Figma MCP Server

如何为 AI 设计配置 Figma MCP 服务端 (2026)

Model Context Protocol (MCP) 正在改变 AI 助手与外部工具交互的方式。其中最强大的集成之一是将 Figma 连接到 AI 编程助手，让你在单次对话中实现从设计到代码的转化。本指南将向你展示如何设置 Figma MCP 服务端，并将其连接到 Claude、Cursor 或任何兼容 MCP 的客户端。

什么是 MCP？为什么它对设计很重要？

MCP (Model Context Protocol) 是由 Anthropic 创建的开放标准，允许 AI 模型通过统一接口连接到外部数据源和工具。MCP 不再需要手动复制粘贴截图或描述布局，而是让你的 AI 助手直接读取 Figma 文件，理解组件层级，提取设计令牌（Design Tokens），并生成准确的代码。

你可以用 Figma MCP 做什么

• 直接从 Figma 文件中提取组件结构、样式和布局属性
• 从 Figma 设计稿生成像素级准确的 React、Vue 或 HTML/CSS 代码
• 读取设计令牌（颜色、字体、间距）并将其转换为代码变量
• 按名称查询特定的帧 (Frame)、页面或组件
• 获取自动布局 (Auto-layout) 和约束信息，用于响应式实现

前提条件

在开始之前，请确保你具备以下条件：

要求	详情
Node.js	v18 或更高版本
Figma 账号	免费版或付费版（均支持 API 访问）
Figma 个人访问令牌	从 Figma 账号设置中生成
兼容 MCP 的客户端	Claude Desktop、Cursor、安装了 Continue 的 VS Code 等
npm 或 yarn	用于安装 MCP 服务端包

第 1 步：生成 Figma 个人访问令牌 (Personal Access Token)

1. 打开 Figma，点击左上角的个人资料图标。
2. 进入 Settings > Account > Personal access tokens。
3. 点击 "Generate new token"。
4. 赋予其描述性名称，例如 "MCP Server"。
5. 立即复制令牌。你将无法再次查看它。

# 将你的 Figma 令牌存储为环境变量
export FIGMA_ACCESS_TOKEN="figd_your-token-here"

第 2 步：安装 Figma MCP 服务端

目前有多个社区维护的 Figma MCP 服务端。最受欢迎且维护良好的是 figma-mcp-server：

# 全局安装
npm install -g @anthropic/figma-mcp-server

# 或者在项目中本地安装
npm install @anthropic/figma-mcp-server

或者，你可以直接使用 Figma 官方工具链中的 Figma Developer MCP 服务端：

npx figma-developer-mcp --token=$FIGMA_ACCESS_TOKEN

这默认会在 stdio 上启动 MCP 服务端，这是大多数 MCP 客户端所期望的。

第 3 步：配置 Claude Desktop

如果你使用的是 Claude Desktop（独立应用程序），请将 Figma MCP 服务端添加到你的配置文件中：

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["figma-developer-mcp"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_your-token-here"
      }
    }
  }
}

保存后重启 Claude Desktop。你应该会在聊天输入框中看到一个锤子图标，表示 MCP 工具已可用。

第 4 步：配置 Cursor

截至 2026 年初，Cursor 已原生支持 MCP 服务端。在 Cursor 设置中添加该服务端：

1. 打开 Cursor 并进入 Settings > MCP。
2. 点击 "Add MCP Server"。
3. 进行如下配置：

{
  "name": "Figma",
  "command": "npx",
  "args": ["figma-developer-mcp"],
  "env": {
    "FIGMA_ACCESS_TOKEN": "figd_your-token-here"
  }
}

或者，在项目根目录下创建一个 .cursor/mcp.json 文件：

{
  "servers": {
    "figma": {
      "command": "npx",
      "args": ["figma-developer-mcp"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_your-token-here"
      }
    }
  }
}

第 5 步：在 VS Code 中配置 Continue

如果你在 VS Code 中使用 Continue 扩展，请将 Figma MCP 服务端添加到你的 Continue 配置中：

// ~/.continue/config.json
{
  "experimental": {
    "mcpServers": [
      {
        "name": "figma",
        "command": "npx",
        "args": ["figma-developer-mcp"],
        "env": {
          "FIGMA_ACCESS_TOKEN": "figd_your-token-here"
        }
      }
    ]
  }
}

第 6 步：在实践中使用 Figma MCP

连接成功后，你可以要求 AI 助手直接处理 Figma 文件。以下是实际示例：

获取 Figma 文件结构

读取位于 https://www.figma.com/design/ABC123/my-design 的 Figma 文件，
并列出 "Homepage" 页面上的所有顶级帧 (frames)。

AI 将使用 MCP 工具调用 Figma API，解析文件树，并返回包含尺寸和位置的结构化帧列表。

从组件生成代码

查看我 Figma 文件中的 "Hero Section" 帧
https://www.figma.com/design/ABC123/my-design
并生成一个完全匹配的带有 Tailwind CSS 的 React 组件。

AI 会读取该帧的自动布局属性、颜色、字体、间距和子元素，然后生成反映该设计的代码。

提取设计令牌

从我的 Figma 文件中提取所有颜色样式和文本样式，
并生成一个 Tailwind CSS 配置。

这将生成一个带有你精确设计系统颜色和字体的 tailwind.config.js 文件。

可用的 MCP 工具

Figma MCP 服务端暴露了几个 AI 助手可以调用的工具：

工具	描述
get_file	获取 Figma 文件的完整结构
get_file_nodes	按 ID 获取特定的节点
get_images	将帧/组件导出为 PNG 或 SVG
get_styles	列出文件中所有已发布的样式
get_components	列出所有组件及其属性
get_comments	读取 Figma 文件上的评论
search_files	在 Figma 团队或项目中搜索文件

常见问题排查

"MCP server failed to start" 确保已安装 Node.js v18+ 并且 FIGMA_ACCESS_TOKEN 环境变量设置正确。运行 npx figma-developer-mcp --version 以验证包是否正确安装。

Figma API 返回 "Unauthorized" 错误 你的个人访问令牌可能已过期。从 Figma 设置中生成一个新令牌。令牌默认不会过期，但可能会被撤销。

查询设计时显示 "File not found" 确保 Figma 文件已设置为 "Anyone with the link can view"，或者你的令牌所属的账号拥有该文件的访问权限。

响应时间过慢 拥有数百个帧的大型 Figma 文件解析可能需要 10-30 秒。为了提高速度，请请求特定的页面或帧，而不是整个文件。

对比：Figma MCP vs. 其他设计转代码方法

方法	准确度	速度	配置难度	AI 驱动
Figma MCP + Claude	高	快	中	是
Figma Dev Mode (手动)	高	慢	无	否
Figma 转代码插件	中	快	低	部分
截图 + AI	中低	快	无	是
Locofy / Builder.io	中高	中	低	是

常见问题解答

Figma MCP 可以在免费版 Figma 计划中使用吗？ 可以。Figma REST API 在所有计划中均可用，包括免费的 Starter 计划。MCP 服务端只需要一个个人访问令牌。

哪种 AI 助手最适合 Figma MCP？ Claude Desktop 和 Cursor 对 MCP 都有极好的支持。Claude 倾向于根据设计规范生成更准确的代码，而 Cursor 则更适合在编辑器内迭代代码。

我可以使用 MCP 将更改同步回 Figma 吗？ 目前，大多数 Figma MCP 实现都是只读的。通过 Figma Plugin API 在技术上可以实现写入访问（创建或修改 Figma 元素），但这在目前的 MCP 服务端中还不属于标准功能。

我的 Figma 数据会发送给 AI 模型吗？ 是的。当 AI 调用 MCP 工具时，Figma 文件数据会作为上下文发送给语言模型。如果你处理的是机密设计，请检查你的 AI 提供商的数据处理政策。

总结

配置 Figma MCP 服务端是提升从设计到代码工作流效率的最有效手段之一。连接后，你的 AI 助手可以读取真实的设计稿——而非截图或描述——并生成像素级匹配的代码。设置过程大约需要 15 分钟，且适用于 Claude Desktop、Cursor 和 VS Code。

如果你的项目还涉及 AI 生成的媒体（如图像、视频或数字人分身），请查看 Hypereal AI，了解处理这些内容的统一 API。

免费试用 Hypereal AI —— 35 积分，无需信用卡。