金大哥 - mohammeduvaiz_figma-mcp-server MCP 详情

article

README

🚀 Figma MCP 服务器

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

✨ 主要特性

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

🚀 快速开始

📋 前提条件

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": ["/绝对路径/到/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": {
        "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"
  }
}

📚 详细文档

环境变量

以下是服务器运行所需的环境变量： | 属性 | 详情 | |------|------| | FIGMA_API_TOKEN | 必填，你的 Figma 个人访问令牌 | | PORT | 可选，默认为 3000 | | TRANSPORT_TYPE | 可选，支持 stdio 或 sse |

架构

此 MCP 服务器：

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

🔧 技术细节

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

🤝 贡献

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

mohammeduvaiz_figma-mcp-server