Figma MCP Server

Figma MCP 服务

一个连接 Figma API 的模型上下文协议（MCP）服务，让 AI 工具和大模型能够访问并处理你的 Figma 设计。

功能

• 设计数据提取：从你的 Figma 设计中提取组件、样式和文本
• 设计系统分析：分析设计系统的一致性和模式
• UI 内容管理：提取并整理设计中的所有 UI 文案
• 开发交接：为开发者生成全面的文档
• 无缝 AI 集成：将你的设计连接到 Claude、Cursor 等 AI 工具，以及其他兼容 MCP 的客户端

开始使用

前置条件

• Node.js 16 或更高版本
• Figma 个人访问令牌（从你的 Figma 账户设置中获取）

安装

1. 克隆仓库：

   git clone https://github.com/yourusername/figma-mcp-server.git
   cd figma-mcp-server
   

2. 安装依赖：

   npm install
   

3. 在项目根目录中创建 .env 文件：

   FIGMA_API_TOKEN=your_figma_personal_access_token
   API_KEY=your_secure_api_key
   TRANSPORT_TYPE=stdio
   

4. 构建服务：

   npm run build
   

5. 启动服务：

   npm start
   

连接到客户端

Claude for Desktop

1. 打开或创建 Claude for Desktop 配置文件：

   • macOS：~/Library/Application Support/Claude/claude_desktop_config.json
   • Windows：%APPDATA%\Claude\claude_desktop_config.json

2. 添加以下配置：

   {
     "mcpServers": {
       "figma": {
         "command": "node",
         "args": ["/absolute/path/to/figma-mcp-server/build/index.js"],
         "env": {
           "FIGMA_API_TOKEN": "your_figma_personal_access_token",
           "TRANSPORT_TYPE": "stdio"
         }
       }
     }
   }
   

3. 重启 Claude for Desktop

Cursor

全局配置

创建或编辑 Cursor 的 MCP 配置文件：

• macOS：~/Library/Application Support/Cursor/mcp.json
• Windows：%APPDATA%\Cursor\mcp.json

{
  "mcpServers": {
    "figma-mcp": {
      "url": "http://localhost:3000/sse",
      "env": {
        "API_KEY": "your_secure_api_key"
      }
    }
  }
}

项目专属配置

1. 在项目根目录中创建 .cursor 目录：

   mkdir -p .cursor
   

2. 在该目录中创建 mcp.json 文件：

   {
     "mcpServers": {
       "figma-mcp": {
         "url": "http://localhost:3000/sse",
         "env": {
           "API_KEY": "your_secure_api_key"
         }
       }
     }
   }
   

可用工具

工具	描述
get-file-info	获取 Figma 文件的基本信息
get-nodes	获取 Figma 文件中的指定节点
get-components	获取 Figma 文件中的组件信息
get-styles	获取 Figma 文件中的样式信息
get-comments	获取 Figma 文件中的评论
search-file	按类型、名称等搜索 Figma 文件中的元素
extract-text	提取 Figma 文件中的所有文本元素

可用提示词

• analyze-design-system - 分析设计系统组件和样式的一致性
• extract-ui-copy - 提取并整理设计中的所有 UI 文案
• generate-dev-handoff - 根据设计生成开发交接文档

使用示例

与 Claude 搭配使用：

Can you analyze the design system in my Figma file with key abc123? Look for consistency in color usage and typography.

与 Cursor 搭配使用：

Generate React components for the buttons from my Figma file with key abc123, using tailwind CSS.

环境变量

变量	描述	默认值
FIGMA_API_TOKEN	你的 Figma 个人访问令牌	（必填）
API_KEY	用于 API 身份验证的安全密钥	（必填）
TRANSPORT_TYPE	传输方式（stdio 或 sse）	stdio
PORT	SSE 传输使用的端口	3000

架构

此 MCP 服务：

1. 使用你的个人访问令牌连接到 Figma API
2. 提供遵循模型上下文协议的标准化接口
3. 提供大模型可用于与 Figma 设计交互的工具、资源和提示词
4. 支持 stdio 传输（本地连接）和 SSE 传输（远程连接）

贡献

欢迎贡献！欢迎提交 Pull Request。