Figma MCP 服务器

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

特征

• 设计数据提取：从 Figma 设计中提取组件、样式和文本

• 设计系统分析：分析设计系统的一致性和模式

• UI 内容管理：从设计中提取并组织所有 UI 副本

• 开发交接：为开发人员生成全面的文档

• 无缝 AI 集成：将您的设计连接到 Claude、Cursor 和其他兼容 MCP 的客户端等 AI 工具

Related MCP server: Figma MCP Server

入门

先决条件

• 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

连接到客户端

克劳德桌面版

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 桌面版

光标

全局配置

创建或编辑 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"
         }
       }
     }
   }

可用工具

可用提示

• 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.

与游标一起使用：

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

环境变量

建筑学

此 MCP 服务器：

1. 使用您的个人访问令牌连接到 Figma API

2. 遵循模型上下文协议公开标准化接口

3. 提供 LLM 可以用来与 Figma 设计进行交互的工具、资源和提示

4. 支持 stdio 传输（本地连接）和 SSE 传输（远程连接）

贡献

欢迎贡献代码！欢迎提交 Pull 请求。