Figma MCP 服务器

通过这个模型上下文协议服务器，让Cursor, Windsurf, Cline以及其他由AI驱动的编码工具能够访问您的Figma文件。

当Cursor可以访问Figma设计数据时，相比诸如粘贴截图等替代方法，它在一次性准确实现设计方面要好得多。

快速开始，请参见配置以获取更多细节：

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

演示视频

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

工作原理

1. 在代理模式下打开Cursor的编辑器。
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 处于代理模式，您就可以开始使用 Cursor 的 composer 中的工具了。

在 composer 中放置一个 Figma 文件的链接并请求 Cursor 对其进行操作应该会自动触发 get_file 工具。

大多数 Figma 文件都非常大，因此您可能希望链接到文件内的特定框架或组。选择单个元素后，可以按 CMD + L 复制该元素的链接。您也可以从上下文菜单中找到它：

一旦有了特定元素的链接，您可以将其放入 composer 并请求 Cursor 对其进行操作。

检查响应

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

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 文件的 key，通常可以在提供的 URL 中找到，如 figma.com/(file|design)/<fileKey>/...
• nodeId (字符串, 可选, 强烈推荐): 要获取的节点的 ID，通常作为 URL 参数 node-id= 出现
• depth (数字, 可选): 需要遍历节点树的深度级别，仅当您通过聊天明确请求时使用

download_figma_images（开发中）

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

参数：

• fileKey (字符串，必填)：包含节点的 Figma 文件的键
• nodes (数组，必填)：要作为图像获取的节点
  • nodeId (字符串，必填)：要获取的 Figma 图像节点的 ID，格式为 1234:5678
  • imageRef (字符串，可选)：如果节点有 imageRef 填充，则必须包含此变量。下载矢量 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

技术栈

• React
• TypeScript
• Tailwind CSS
• Webpack

Figma 设计

本项目基于以下 Figma 设计实现：
Figma 设计链接