Mohammeduvaiz Figma MCP Server

🚀 Figma MCP 服务器

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

✨ 主要特性

• 设计数据提取：可从你的 Figma 设计中精准提取组件、样式和文本。
• 设计系统分析：对设计系统的统一性和模式进行深入分析。
• UI 内容管理：提取并系统整理设计中的所有 UI 文本。
• 开发人员交接：生成完整的文档，为开发者提供全面参考。
• 与 AI 平滑集成：能将你的设计无缝连接到支持 MCP 的 AI 工具，如 Claude、Cursor 等。

🚀 快速开始

📋 前提条件

• 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=你的_figma_个人访问令牌
   API_KEY=你的安全_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": ["/绝对路径/到/figma-mcp-server/build/index.js"],
         "env": {
           "FIGMA_API_TOKEN": "你的_figma_个人访问令牌",
           "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": {
        "FIGMA_API_TOKEN": "你的_figma_个人访问令牌"
      }
    }
  }
}

项目特定配置

在项目的根目录中创建一个 mcp.json 文件：

{
  "mcpServers": {
    "figma-mcp": {
      "url": "http://localhost:3000/sse",
      "env": {
        "FIGMA_API_TOKEN": "你的_figma_个人访问令牌"
      }
    }
  }
}

可用工具

基础用法

以下是服务器提供的主要工具：

• Figma 文档操作：
  • getDocument(): 获取当前文档的详细信息。
  • getPageIds(): 返回文档中的所有页面 ID。
  • getPage(pageId): 获取指定页面的信息。
• 页面内容管理：
  • getComponents(pageId): 返回页面中的所有组件。
  • getStyles(): 获取页面中的所有样式。
  • getElements(): 返回页面中的所有元素。

高级用法

提示示例

{
  "tool": "figma",
  "prompt": "请描述如何优化此页面的用户体验。",
  "args": {
    "pageId": "your_page_id"
  }
}

📚 详细文档

环境变量

以下是服务器运行所需的环境变量：

架构

此 MCP 服务器：

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

🔧 技术细节

此 MCP 服务器借助你的个人访问令牌与 Figma API 建立连接，向外暴露遵循模型上下文协议的标准接口，为 LLM 提供了与 Figma 设计交互的工具、资源和提示。同时，它支持 stdio 传输（适用于本地连接）和 SSE 传输（适用于远程连接），在设计数据提取、设计系统分析等方面发挥着重要作用。

🤝 贡献

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