MCP 服务器

Figma MCP Server

使像 Cursor、Windsurf 和 Cline 这样的人工智能驱动的编码工具能够访问 Figma 设计文件，从而可以直接从 Figma 设计中生成更准确的代码。

README

Figma MCP 服务器

使用此模型上下文协议服务器，让 Cursor、Windsurf、Cline 和其他 AI 驱动的编码工具访问您的 Figma 文件。

当 Cursor 可以访问 Figma 设计数据时，它在一次性准确生成设计方面比粘贴屏幕截图等替代方法好得多。

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

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

演示视频

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

工作原理

在代理模式下打开 Cursor 的编辑器。
粘贴 Figma 文件、框架或组的链接。
要求 Cursor 对 Figma 文件执行某些操作——例如，实现一个设计。
Cursor 将从 Figma 获取相关元数据，并使用它来编写您的代码。

此 MCP 服务器专门设计用于 Cursor。在使用 Figma API 中的上下文进行响应之前，它会简化和转换响应，以便仅向模型提供最相关的布局和样式信息。

减少提供给模型的上下文量有助于使 AI 更准确，响应更相关。

安装

使用 NPM 快速运行服务器

您可以使用 NPM 快速运行服务器，而无需安装或构建存储库：

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

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

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

# 或
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>"
      }
    }
  }
}

从本地源运行服务器

克隆存储库
使用 pnpm install 安装依赖项
将 .env.example 复制到 .env 并填写您的 Figma API 访问令牌。只需要读取权限。
使用 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 中连接到 MCP 服务器

服务器连接后，您可以在开始之前确认 Cursor 是否具有有效的连接。如果您看到一个绿点并且工具显示出来，那就一切就绪了！

在 Cursor 中确认连接

开始将 Composer 与您的 Figma 设计一起使用

连接 MCP 服务器后，只要编辑器处于代理模式，您就可以开始在 Cursor 的编辑器中使用这些工具。

将 Figma 文件的链接放入编辑器中并要求 Cursor 对其执行某些操作应会自动触发 get_file 工具。

大多数 Figma 文件最终都很大，因此您可能需要链接到文件中的特定框架或组。选择单个元素后，您可以按 CMD + L 将链接复制到该元素。您也可以在上下文菜单中找到它：

通过右键单击复制到 Figma 选择的链接

获得特定元素的链接后，您可以将其放入编辑器中并要求 Cursor 对其执行某些操作。

检查响应

为了更轻松地检查来自 MCP 服务器的响应，您可以运行 inspect 命令，该命令启动 @modelcontextprotocol/inspector Web UI，用于触发工具调用和查看响应：

pnpm inspect
# > figma-mcp@0.1.8 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 文件的密钥，通常在提供的 URL 中找到，例如 figma.com/(file|design)/<fileKey>/...
nodeId（字符串，可选，强烈推荐）：要获取的节点的 ID，通常作为 URL 参数 node-id=<nodeId> 找到
depth（数字，可选）：遍历节点树的深度，仅当您通过聊天明确请求时才使用

download_figma_images（正在开发中）

根据图像或图标节点的 ID 下载 Figma 文件中使用的 SVG 和 PNG 图像。

参数：

fileKey（字符串，必需）：包含节点的 Figma 文件的密钥
nodes（数组，必需）：要作为图像获取的节点
- nodeId（字符串，必需）：要获取的 Figma 图像节点的 ID，格式为 1234:5678
- imageRef（字符串，可选）：如果节点具有 imageRef 填充，则必须包含此变量。下载 Vector SVG 图像时留空。
- fileName（字符串，必需）：用于保存获取的文件的本地名称
localPath（字符串，必需）：图像存储在项目中的目录的绝对路径。如果需要，自动创建目录。

Figma 信息请求画面组件

此项目是一个基于 Figma 设计实现的信息请求画面组件的 React 应用程序。

功能

显示复选框图标
显示突出显示公司名称的指导消息

安装和运行

安装依赖项

# 使用 npm
npm install

# 或使用 pnpm
pnpm install

运行开发服务器

# 使用 npm
npm run dev:web

# 或使用 pnpm
pnpm dev:web

构建

# 使用 npm
npm run build:web

# 或使用 pnpm
pnpm build:web

项目结构

public/
  ├── images/
  │   └── checkCircle.svg
  └── index.html
src/
  └── components/
      ├── App.tsx
      ├── CheckCircle.tsx
      ├── Header.tsx
      ├── InfoRequestScreen.tsx
      └── index.tsx