Figma MCP 服务器

一个模型上下文协议 (MCP) 服务器，连接到 Figma 的 API，允许 AI 工具和 LLM 访问和处理您的 Figma 设计。

功能

• 设计数据提取: 从您的 Figma 设计中提取组件、样式和文本
• 设计系统分析: 分析设计系统的一致性和模式
• UI 内容管理: 从设计中提取和组织所有 UI 文本
• 开发交付: 为开发人员生成全面的文档
• 无缝 AI 集成: 将您的设计连接到 AI 工具，如 Claude、Cursor 和其他 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 一起使用:

你能分析我的 Figma 文件（密钥为 abc123）中的设计系统吗？ 查找颜色使用和排版的一致性。

与 Cursor 一起使用:

使用 tailwind CSS 为我的 Figma 文件（密钥为 abc123）中的按钮生成 React 组件。

环境变量

变量	描述	默认值
FIGMA_API_TOKEN	您的 Figma 个人访问令牌	(必需)
API_KEY	API 身份验证的安全密钥	(必需)
TRANSPORT_TYPE	传输方法 (stdio 或 sse)	stdio
PORT	SSE 传输的端口	3000

架构

此 MCP 服务器:

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

贡献

欢迎贡献！ 请随时提交 Pull Request。