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_個人訪問令牌"
      }
    }
  }
}

提示示例

{
  "tool": "figma",
  "prompt": "請描述如何優化此頁面的用戶體驗。",
  "args": {
    "pageId": "your_page_id"
  }
}

📚 詳細文檔

可用工具

1. Figma 文檔操作

• getDocument(): 獲取當前文檔的詳細信息。
• getPageIds(): 返回文檔中的所有頁面 ID。
• getPage(pageId): 獲取指定頁面的信息。

2. 頁面內容管理

• getComponents(pageId): 返回頁面中的所有組件。
• getStyles(): 獲取頁面中的所有樣式。
• getElements(): 返回頁面中的所有元素。

環境變量

以下是服務器運行所需的環境變量：

🔧 技術細節

此 MCP 服務器：

1. 使用你的個人訪問令牌連接到 Figma API。
2. 暴露遵循模型上下文協議的標準接口。
3. 提供工具、資源和提示，使 LLM 能夠與你的 Figma 設計交互。
4. 支持 stdio 傳輸（本地連接）和 SSE 傳輸（遠程連接）。

🤝 貢獻

歡迎貢獻！請隨意提交 Pull Request。