Figma MCP Toolkit

🚀 Figma 到 React Native 組件轉換器 (MCP)

Figma 到 React Native 組件轉換器 (MCP) 藉助 Cursor 的 MCP 工具，能將 Figma 設計無縫轉換為 React Native 組件。該工具可精準從 Figma 設計裡提取組件，並生成帶有正確類型和樣式的 React Native 組件。

🚀 快速開始

此工具能幫助你將 Figma 設計轉換為 React Native 組件，以下是詳細的使用步驟。

📦 安裝指南

開發環境

需將以下內容添加到你的 eas.json 文件中：

{
  "mcpServers": {
    "figma-to-code": {
      "command": "node",
      "args": ["PATH_TO_REPO/build/index.js"],
      "env": {
        "FIGMA_TOKEN": "your_figma_token",          // 你的 Figma 訪問令牌
        "FIGMA_FILE": "your_figma_file_id",        // 你的 Figma 文件 ID（從 URL 中獲取）
        "PROJECT_DIR": "your_project_directory"    // 生成組件的位置
      }
    }
  }
}

最終用戶

在 Cursor IDE 中安裝 MCP 服務器，使用以下命令：

npx -y @smithery/cli@latest install @kailashg101/mcp-figma-to-code --client claude --config "{
  \"figmaToken\": \"YOUR_FIGMA_TOKEN\",
  \"figmaFile\": \"YOUR_FIGMA_FILE_ID\",
  \"projectDir\": \"YOUR_PROJECT_DIRECTORY\"
}"

💻 使用示例

基礎用法

安裝完成後，你可以在 Cursor 中使用以下提示語來提取組件：

提取所有組件

using the extract_components mcp tool get all components from figma and generate their corresponding react native components in components folder

提取特定組件

using the extract_components mcp tool get the [ComponentName] component from figma and generate its corresponding react native component in components folder

📚 詳細文檔

配置

配置對象接受以下參數：

{
  "figmaToken": string,    // 你的 Figma 訪問令牌
  "figmaFile": string,     // 你的 Figma 文件 ID（從 URL 中獲取）
  "projectDir": string     // 生成組件的位置
}

功能

當前功能

• ✅ 提取 Figma 組件
• ✅ 生成 React Native 組件
• ✅ 維護組件層次結構
• ✅ 處理組件屬性和類型
• ✅ 支持嵌套組件

即將推出

• 🚧 GraphQL 方案生成

開發

若你要進行貢獻或修改，可按以下步驟操作：

1. 克隆倉庫。
2. 安裝依賴項：

npm install

3. 構建：

npm run build

4. 本地運行：

npm start

環境變量

在本地運行時，你需要在 .env 文件中設置以下內容：

FIGMA_TOKEN=your_figma_token
FIGMA_FILE=your_figma_file_id
PROJECT_DIR=your_project_directory

錯誤處理

常見錯誤及解決方案如下：

• “Failed to create client”（無法創建客戶端）：檢查所有環境變量是否正確設置。
• “Components page not found”（未找到組件頁面）：確保你的 Figma 文件中有一個名為“Components”的頁面。
• “Failed to fetch Figma file”（未能獲取 Figma 文件）：驗證你的 Figma 令牌和文件 ID。

📄 許可證

本項目採用 MIT 許可證。

如需報告問題或提出功能請求，請在 GitHub 上打開問題。