Figma Design Processor

🚀 Figma MCP 服務器

Figma MCP 服務器是一個模型上下文協議（MCP）服務器，它充當了 Figma 設計與 React 實現之間的橋樑。該服務器通過處理 Figma 文件數據，並將其轉換為 React 友好的格式，能夠實現將像素完美的設計轉換為 React 應用。

🚀 快速開始

安裝

1. 克隆倉庫：

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

2. 安裝依賴項：

   npm install
   

3. 配置 Figma 訪問令牌：

   cp .env.example .env
   # 將你的 Figma 訪問令牌添加到 .env
   

Cursor IDE 設置

1. 在項目根目錄中創建 .cursor/mcp.json 文件：

   mkdir -p .cursor
   touch .cursor/mcp.json
   

2. 對於基於 Stdio 的服務器配置：

   {
    "mcpServers": {
      "figma": {
        "command": "node",
        "args": ["d:/<folder>>/figma-mcp/build/index.js"],
        "env": {
          "FIGMA_ACCESS_TOKEN": "你的 figma 令牌"
        },
        "disabled": false,
        "alwaysAllow": [],
        "protocol": "stdio"
      }
    }
   }
   

使用方法

1. 構建服務器：

   npm run build
   

2. 根據你的 IDE 配置 MCP 設置：

   • 對於 Visual Studio Code： 安裝並配置 vscode-mcp 以支持 Figma 文件。

   • 對於其他編輯器，參考文檔中的高級配置。

3. 在項目中使用 MCP 工具：

   npx mcp serve figma
   

✨ 主要特性

• Figma API 集成：直接連接到 Figma 的 API 以訪問設計文件
• React 就緒輸出：處理 Figma 數據並轉換為 React 兼容格式
• 樣式處理：將 Figma 樣式轉換為 CSS/styled-components
• 資產處理：管理圖像資產和 SVG 組件
• 佈局處理：將 Figma 自動佈局轉換為 Flexbox
• 類型安全：使用 TypeScript 實現可靠的類型檢查

📦 安裝指南

克隆倉庫

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

安裝依賴

npm install

配置訪問令牌

cp .env.example .env
# 將你的 Figma 訪問令牌添加到 .env

💻 使用示例

基礎用法

get_file_content

獲取並處理 Figma 文件內容，轉換佈局、樣式和組件，返回 React 就緒組件結構。

{
  fileKey: string;    // Figma 文件鍵
  nodeId?: string;    // 可選特定組件 ID
}

get_node_images

從 Figma 中檢索圖像資產，支持多種格式（PNG、JPG、SVG），可配置縮放選項。

{
  fileKey: string;    // Figma 文件鍵
  nodeIds: string[];  // 組件 ID 列表
  format?: 'png' | 'jpg' | 'svg';
  scale?: number;     // 1-4
}

示例項目

查看 examples 目錄中的示例，瞭解如何將 Figma 設計轉換為 React 組件。

處理流程

1. 在 Figma 中設計組件並導出為 JSON。
2. 使用 get_file_content 工具處理 JSON 文件。
3. 生成 React 組件代碼並進行必要的調整。
4. 使用 get_node_images 獲取所需的圖像資產。
5. 將生成的組件集成到你的 React 應用中。

📄 許可證

項目使用 MIT 許可證，具體內容請查看 LICENSE 文件。

🤝 貢獻指南

歡迎貢獻！請參考 CONTRIBUTING.md 瞭解如何參與此項目。