Figma Design System

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

开发者工具人工智能聊天机器人 #设计分析 #AI集成 #数据提取 #开发文档本地 .TypeScript

评分 : 2.5分

下载量 : 7.9K

更新时间 : 2025-04-28

打开站点

安装

复制以下命令到你的Client进行配置

{
     "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"
         }
       }
     }
   }

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

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

注意：您的密钥属于敏感信息，请勿与任何人分享。

🚀 Figma MCP 服务器

Figma MCP 服务器是一个连接到 Figma API 的模型上下文协议 (MCP) 服务器，它能让 AI 工具和大语言模型 (LLM) 访问并操作你的 Figma 设计，为设计工作带来更多便利与可能性。

✨ 主要特性

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

🚀 快速开始

前提条件

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

📦 安装指南

克隆仓库：

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

安装依赖项：
```
npm install
```

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

FIGMA_API_TOKEN=你的_figma_个人访问令牌
API_KEY=你安全的_api_key
TRANSPORT_TYPE=stdio

构建服务器：
```
npm run build
```
启动服务器：
```
npm start
```

📚 详细文档

连接到客户端

Claude for Desktop

打开或创建 Claude for Desktop 的配置文件：
- macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
- Windows: %APPDATA%\Claude\claude_desktop_config.json

添加以下配置：

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["/absolute/path/to/figma-mcp-server/build/index.js"],
      "env": {
        "FIGMA_API_TOKEN": "你的_figma_个人访问令牌",
        "TRANSPORT_TYPE": "stdio"
      }
    }
  }
}

重启 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": "你的安全_api_key"
      }
    }
  }
}

项目特定配置

在项目根目录中创建 .cursor 目录：
```
mkdir -p .cursor
```

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

{
  "mcpServers": {
    "figma-mcp": {
      "url": "http://localhost:3000/sse",
      "env": {
        "API_KEY": "你的安全_api_key"
      }
    }
  }
}

可用工具

属性	详情
`get-file-info`	获取 Figma 文件的基本信息
`get-nodes`	从 Figma 文件中获取特定节点
`get-components`	从 Figma 文件中获取组件信息
`get-styles`	从 Figma 文件中获取样式信息
`get-comments`	从 Figma 文件中获取评论
`search-file`	根据类型、名称等在 Figma 文件中搜索元素
`extract-text`	提取 Figma 文件中的所有文本元素