Figma Flutter MCP

🚀 Figma to Flutter MCP 服務器

🌐 本項目支持以下語言版本：

• 한국어 (Korean)
• 日本語 (Japanese)
• 簡體中文 (Simplified Chinese)
• 繁體中文 (Traditional Chinese)

本項目可讓你在編碼代理中利用 Figma 的豐富數據，以 Flutter 的方式實現設計！

藉助 MCP 服務器，你可以使用 Cursor 或其他 AI 編碼工具，訪問 Figma 的豐富文件、數據、組件等資源。

📋 目錄

• 🎥 視頻演示
• 📝 快速開始
• 📚 工作原理
• 🛠️ 使用方法
  • 🔑 Figma API 密鑰
  • 🏹 在 Cursor 中使用 MCP
  • 🚀 本地測試快速開始
• 🧱 基本工作流程
  • 🤖 AI 編碼代理輔助
  • ⚠️ 為什麼 SVG 資產在屏幕生成時無法使用
• ⚠️ 免責聲明
• 🙌🏼 致謝
• 🧱 其他框架
• 🔑 許可證
• 🙋‍♂️ 作者
  • Muhammad Hamza

🎥 視頻演示

視頻展示了 Figma Flutter MCP 的幾乎所有功能，並使用了真實的 Figma 設計。

• 英文視頻：https://youtu.be/o_GezwAlXlU
• 烏爾都語/印地語視頻：https://youtu.be/mepPWpIZ61M

📝 快速開始

你可以查看詳細的快速開始文檔，或觀看演示視頻進行快速上手。由於這是首個版本，還有很多改進空間，你可以查看問題列表，瞭解待解決或待改進的問題。

📚 工作原理 | 詳情請見此處

組件/小部件

• ✅ 提取 Figma 節點數據：佈局、樣式、尺寸、顏色、文本內容等。
• ✅ 分析結構：子元素、嵌套組件、視覺重要性。
• ✅ 提供指導：推薦 Flutter 小部件和實現模式。
• ❌ 不生成實際的 Flutter 代碼文件。

屏幕

• ✅ 提取屏幕元數據：設備類型、方向、尺寸。
• ✅ 識別區域：頭部、底部、導航、內容區域。
• ✅ 分析導航：標籤欄、應用欄、抽屜、導航元素。
• ✅ 提供 Scaffold 指導：推薦 Flutter 屏幕結構。
• ❌ 不生成實際的 Flutter 屏幕。

由於本項目僅輔助 AI 編寫 Flutter 代碼，因此你的提示越清晰，得到的結果就越好。

🛠️ 使用方法

以下步驟展示了最小化的使用和設置說明：

🔑 Figma API 密鑰

你需要創建一個 Figma 訪問令牌才能使用此服務器。有關如何創建 Figma API 訪問令牌的說明，請參閱此處。

🏹 在 Cursor 中使用 MCP

獲取 FIGMA API 密鑰後，你可以按以下步驟在 Cursor 中設置 MCP：

1. 按下 CMD + Shift + P（Windows 系統按 Ctrl）。
2. 輸入 "Open MCP Settings"。
3. 點擊 "Add new MCP"。
4. 粘貼以下 JSON 對象。

MacOS/Linux

{
  "mcpServers": {
    "Figma Flutter MCP": {
      "command": "npx",
      "args": ["-y", "figma-flutter-mcp", "--figma-api-key=YOUR-API-KEY", "--stdio"]
    }
  }
}

Windows

{
  "mcpServers": {
    "Figma Flutter MCP": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "figma-flutter-mcp", "--figma-api-key=YOUR-API-KEY", "--stdio"]
    }
  }
}

⚠️ 重要提示

如果你將此 MCP 作為 npm 包安裝，請確保將其更新到最新版本。有時，它會緩存舊版本，並顯示諸如 "無法使用工具調用" 或 "Figma API 密鑰設置無效" 等錯誤。

🚀 本地測試快速開始

前提條件

• Node.js 18+
• Figma API 密鑰（訪問令牌）
• 支持 MCP 的 Cursor AI IDE
• Flutter SDK

為了進行快速本地測試，你可以通過 HTTP 而不是 stdio 運行服務器：

# 克隆並設置
git clone <your-repo-url> figma-flutter-mcp
cd figma-flutter-mcp
npm install

# 創建包含 Figma API 密鑰的 .env 文件
echo "FIGMA_API_KEY=your-figma-api-key-here" > .env

# 啟動 HTTP 服務器進行本地測試
npm run dev

然後將以下內容添加到你的 MCP 客戶端配置中：

{
  "mcpServers": {
    "local-figma-flutter": {
      "url": "http://localhost:3333/mcp"
    }
  }
}

詳細說明請參閱 CONTRIBUTING.md。

🧱 基本工作流程

🤖 AI 編碼代理輔助

為了獲得更好的結果，你可以根據自己的 AI 編碼代理，在以下文件中設置一些說明：

• Cursor：.cursor/rules/fluttering.mdc
• Claude：CLAUDE.md
• Gemini CLI：GEMINI.md

這樣，你的 AI 代理將使用 MCP 的輸出，確保 Flutter 代碼符合你的項目要求和結構。你可以查看我用於測試的Cursor 規則示例。

1. 設置主題和排版：最有效的方法是在 Figma 中創建兩個包含主題顏色和排版樣本的框架。例如：

• Figma 桌面版：選擇框架並按下 CMD + L 或 Ctrl + L。
• Figma 網頁版：選擇框架並複製 URL。

💡 使用建議

有效的 URL 應包含文件 ID 和節點 ID 參數。

"從 <figma_link> 設置 Flutter 主題，包括顏色和排版。

2. 小部件生成：最有效的方法是在 Figma 中使用組件。例如：

這個按鈕有 8 個變體，你可以提示是否需要變體。

"在 Flutter 中創建這個小部件 <figma_link>，目前僅設置 2 個變體，並將文件拆分為更小的部分以提高代碼可讀性。

如果你在 Figma 中沒有使用組件，可以使用框架，並提示 AI 將其作為小部件處理，其餘的交給 AI 處理。

3. 全屏生成：如果有任何圖像資產，它將自動導出並放在 assets/ 目錄中，並更新 pubspec.yaml。

"從這個 Figma 鏈接 <figma_link> 創建全屏界面，確保代碼通過拆分為更小的文件來提高可讀性。

4. 資產導出：

• 圖像資產：在生成屏幕時將自動工作。

"從 Figma 導出這個圖像資產 <figma_link>

• SVG 資產：不會自動工作，下面會詳細解釋。

"從 Figma 導出這個 SVG 資產：<figma_link>

⚠️ 為什麼 SVG 資產在屏幕生成時無法使用

在 Figma 中，矢量圖形包括圖標和鋼筆工具繪製的形狀，因此批量導出可能會抓取到不需要的節點；建議單獨導出 SVG。此過程仍然可以通過將 SVG 導出到 assets/svg/ 目錄並更新 pubspec.yaml 來節省大量時間。

⚠️ 免責聲明

• Figma 設計：由於我們使用 Figma 的 API 來獲取節點及其詳細信息，因此你的設計越好，AI 對其的理解和處理就越準確，例如使用自動佈局、優先使用框架而非組、保持全局一致的對齊方式。
• 使用場景：在現階段，強烈建議不要將其用於開發可擴展的應用程序，而是嘗試將其用於 MVP、小型和解釋性任務。
• 速率限制：大量使用可能會觸發 Figma 的速率限制（例如，HTTP 429）。服務器包含重試和退避機制，但無法繞過 Figma 的限制。如果你遇到速率限制，請等待幾分鐘並減少請求量。

🙌🏼 致謝

我受到了 Graham Lipsman 的 Figma Context MCP 的啟發，從而開發了 Figma to Flutter，該項目具有以下特點：

• 資產導出
• 顏色和主題設置
• 小部件樹和全屏構建

其他功能即將推出...

🧱 其他框架

如果你想為 React、Angular、React Native、Vue 或其他框架開發類似的項目，我添加了詳細的文檔 Figma Framework MCP，你可以參考並開始開發。同時，如果有人已經為特定框架開發了 Figma 的 MCP 服務器，我會在此處維護一個列表。

• ...
• ...

🔑 許可證

本項目採用 MIT 許可證 - 詳細信息請參閱 LICENSE 文件。

🙋‍♂️ 作者

Muhammad Hamza

你也可以關注我的 GitHub 個人資料，以瞭解我最新的項目動態：

如果你喜歡這個倉庫，請給它一個星星 ⭐ 支持一下！

Copyright (c) 2025 MUHAMMAD HAMZA

為想要彌合設計與代碼之間差距的設計師和開發者精心打造 ❤️