Figma MCP Server

Figma MCP 服务

通过此 Model Context Protocol 服务，让 Cursor、Windsurf、Cline 和其他 AI 编码工具访问你的 Figma 文件。

Cursor 能够访问 Figma 设计数据后，相较于粘贴截图等替代方法，它一次生成准确设计的能力会好得多。

快速开始，更多详情请参阅配置：

npx figma-developer-mcp --figma-api-key=<your-figma-api-key>

增强的 CSS 提取

此增强版 MCP 服务能够从 Figma 设计中提取并提供详细的 CSS 属性，从而更准确地将设计转换为代码。

主要功能：

• 详细的 CSS 属性：提取所有元素的精确 CSS 值
• 完整的样式：包括颜色、尺寸、边框、阴影、排版等
• 准确渲染：使用恰当的样式而非截图，更好地将 Figma 设计转换为代码
• 可选提取：可配置是否在响应中包含详细的 CSS 属性

高级 CSS 功能：

• 渐变支持：准确提取线性、径向和圆锥渐变
• 多层背景：支持多个填充，并按正确顺序堆叠
• 文本样式：完整的排版属性，包括字体系列、字号、字重、行高和文本转换
• 效果与滤镜：支持 box-shadow、模糊效果和背景滤镜
• 变换：提取旋转和缩放变换

使用示例：

请求 Figma 数据时，可以指定是否提取详细的 CSS 属性：

// With detailed CSS properties
const response = await fetch("http://localhost:3333/messages", {
  method: "POST",
  body: JSON.stringify({
    tool: "get_figma_data",
    params: {
      fileKey: "your-file-key",
      nodeId: "your-node-id",
      extractCssProperties: true // default is true
    }
  })
});

// Without detailed CSS properties (more lightweight)
const response = await fetch("http://localhost:3333/messages", {
  method: "POST",
  body: JSON.stringify({
    tool: "get_figma_data",
    params: {
      fileKey: "your-file-key",
      nodeId: "your-node-id",
      extractCssProperties: false
    }
  })
});

生成设计令牌

此增强版还包含可从 Figma 设计中自动生成设计令牌的工具，并可将其导出为多种格式，以便在项目中使用。

支持的令牌类型：

• 颜色：从填充和命名的颜色元素中提取颜色
• 排版：创建完整的排版令牌，包括字体系列、字号、字重等
• 间距：根据命名恰当的元素识别间距模式
• 边框圆角：提取圆角值
• 阴影：捕获 box-shadow 和立体效果
• 不透明度：提取不透明度值
• 渐变：保存渐变定义以供重复使用

导出格式：

• CSS：以 :root {} 中的变量形式提供，可直接用于 CSS
• SCSS：适用于 SCSS 工作流的变量和 mixin
• TypeScript：带有 TypeScript 类型的类型安全常量
• JSON：用于自定义处理的原始数据

使用示例：

// Generate design tokens
const response = await fetch("http://localhost:3333/messages", {
  method: "POST",
  body: JSON.stringify({
    tool: "generate_design_tokens",
    params: {
      fileKey: "your-file-key",
      format: "css", // Options: "css", "scss", "ts", "json"
      outputPath: "./src/styles/design-tokens.css", // Optional
      prefix: "my-app-" // Optional prefix for variable names
    }
  })
});

演示视频

观看使用 Figma 设计数据在 Cursor 中构建 UI 的演示

工作原理

1. 在 Agent 模式下打开 Cursor 的 composer。
2. 粘贴 Figma 文件、画框或组的链接。
3. 让 Cursor 使用 Figma 文件完成任务，例如实现一项设计。
4. Cursor 会从 Figma 获取相关元数据，并用它来编写代码。

此 MCP 服务专为与 Cursor 配合使用而设计。在使用来自 Figma API 的上下文作出响应之前，它会简化并转换响应，只向模型提供最相关的布局和样式信息。

减少提供给模型的上下文量，有助于提升 AI 的准确性，并让响应更加切题。

安装

使用 NPM 快速运行服务

无需安装或构建仓库，即可使用 NPM 快速运行服务：

npx figma-developer-mcp --figma-api-key=<your-figma-api-key>

# or
pnpx figma-developer-mcp --figma-api-key=<your-figma-api-key>

# or
yarn dlx figma-developer-mcp --figma-api-key=<your-figma-api-key>

# or
bunx figma-developer-mcp --figma-api-key=<your-figma-api-key>

创建 Figma API 访问令牌的说明请参阅此处。

使用配置文件的工具的 JSON 配置

许多工具（如 Windsurf、Cline 和 Claude Desktop）使用配置文件来启动服务。

figma-developer-mcp 服务可通过在配置文件中添加以下内容进行配置：

{
  "mcpServers": {
    "figma-developer-mcp": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "<your-figma-api-key>"
      }
    }
  }
}

从本地源代码运行服务

1. 克隆代码库
2. 使用 pnpm install 安装依赖项
3. 将 .env.example 复制为 .env，并填入你的 Figma API 访问令牌。只需要读取权限。
4. 使用 pnpm run dev 运行服务，并添加命令行参数部分中的任意标志。

配置

服务可通过环境变量（使用 .env 文件）或命令行参数进行配置。命令行参数的优先级高于环境变量。

环境变量

• FIGMA_API_KEY：你的 Figma API 访问令牌（必需）
• PORT：服务运行的端口（默认值：3333）

命令行参数

• --version：显示版本号
• --figma-api-key：你的 Figma API 访问令牌
• --port：服务运行的端口
• --stdio：以命令模式运行服务，而非默认的 HTTP/SSE 模式
• --help：显示帮助菜单

连接到 Cursor

启动服务

> npx figma-developer-mcp --figma-api-key=<your-figma-api-key>
# Initializing Figma MCP Server in HTTP mode on port 3333...
# HTTP server listening on port 3333
# SSE endpoint available at http://localhost:3333/sse
# Message endpoint available at http://localhost:3333/messages

将 Cursor 连接到 MCP 服务

服务运行后，请在 Cursor 设置的功能选项卡下，将 Cursor 连接到 MCP 服务。

连接服务后，在开始使用前，你可以确认 Cursor 已成功连接。如果看到绿色圆点，并且工具已显示，就说明一切正常！

开始使用 Composer 处理 Figma 设计

连接 MCP 服务后，只要 Composer 处于 Agent 模式，你就可以开始在 Cursor 的 Composer 中使用这些工具。

在 Composer 中粘贴 Figma 文件链接，并要求 Cursor 对其执行操作，即可自动触发 get_figma_data 工具。

大多数 Figma 文件都非常庞大，因此你可能需要链接到文件中的特定画框或组。选中单个元素后，可以按 CMD + L 复制该元素的链接。也可以在上下文菜单中找到该选项：

获得特定元素的链接后，可以将其粘贴到 Composer 中，并要求 Cursor 对其执行操作。

检查响应

若要更轻松地检查 MCP 服务的响应，可以运行 inspect 命令。该命令会启动 @modelcontextprotocol/inspector 网页界面，供你触发工具调用并查看响应：

pnpm inspect
# > [email protected] inspect
# > pnpx @modelcontextprotocol/inspector
#
# Starting MCP inspector...
# Proxy server listening on port 3333
#
# 🔍 MCP Inspector is up and running at http://localhost:5173 🚀

可用工具

该服务提供以下 MCP 工具：

get_figma_data

获取 Figma 文件的信息。

参数：

• fileKey（字符串）：要获取的 Figma 文件的键
• nodeId（字符串，可选）：要获取的节点 ID
• depth（数字，可选）：遍历节点树的深度
• extractCssProperties（布尔值，可选）：是否提取每个节点的详细 CSS 属性（默认值：true）

generate_design_tokens

从 Figma 文件生成设计令牌，并导出为指定格式。

参数：

• fileKey（字符串）：要获取的 Figma 文件的键
• nodeId（字符串，可选）：要获取的节点 ID
• depth（数字，可选）：遍历节点树的深度
• format（字符串，可选）：设计令牌的输出格式（选项："css"、"scss"、"ts"、"json"，默认值："css"）
• outputPath（字符串，可选）：保存设计令牌的文件路径
• prefix（字符串，可选）：变量名的可选前缀（例如："my-app-"）