Figma MCP Pro

🚀 Figma MCP PRO

Figma MCP PRO 是一款專業的模型上下文協議（MCP）服務器，專為 AI 優化的 Figma 設計分析打造。它擁有簡潔的 5 步工作流程，可實現全面的設計到代碼轉換，還支持智能註釋處理和資源下載。

🚀 快速開始

Figma MCP PRO 提供了一套完整的解決方案，用於將 Figma 設計高效轉化為代碼。通過其 5 步工作流程，結合 AI 優化和多框架支持，能大大提升設計到開發的效率。

✨ 主要特性

• 5 步工作流程：框架選擇 → 設計數據 → 註釋 → 資源 → 參考分析
• AI 優化：為 AI 代碼生成專門格式化的結構化數據
• 支持 10 種框架：React、Vue、Angular、Svelte、HTML/CSS/JS、SwiftUI、UIKit、Electron、Tauri、NW.js
• 智能註釋：基於座標將設計師註釋與 UI 元素匹配
• 資源下載：按照 Figma 原始導出設置批量下載
• CSS 生成：根據 Figma 屬性（內邊距、外邊距、邊框、效果）自動生成 CSS

📦 安裝指南

npm install -g figma-mcp-pro

⚙️ 快速設置

1. 獲取 Figma API 密鑰

從 Figma 賬戶設置 → 個人訪問令牌中獲取 API 令牌。

2. 複製並粘貼 MCP 配置

📋 使用下面代碼塊的複製按鈕，然後將 your-api-key-here 替換為你實際的 API 密鑰：

{
  "mcpServers": {
    "Figma MCP PRO": {
      "command": "npx",
      "args": ["figma-mcp-pro@latest", "--figma-api-key", "your-api-key-here"],
      "env": {
        "DEBUG": "true"
      }
    }
  }
}

配置文件位置：

• Claude Desktop：claude_desktop_config.json
• Claude Code (VS Code)：VS Code MCP 設置
• Cursor, Windsurf, TRAE：應用程序 MCP 配置設置

📝 工具參考

核心工具

show_frameworks

顯示可用的框架。建議先調用此命令以選擇目標框架。

get_figma_data

提取經過 AI 優化的設計數據，並進行特定框架的處理。

• 輸入：Figma URL + 框架
• 輸出：設計結構、CSS 屬性、佈局數據

process_design_comments

將設計師註釋與設計元素匹配，並提供 AI 實現提示。

• 輸入：Figma URL + 框架
• 輸出：註釋到元素的映射及可執行指令

download_design_assets

按照 Figma 原始設置下載可導出的資源，幷包含參考圖像。

• 輸入：Figma URL + 本地路徑
• 輸出：資源文件 + 用於視覺參考的 reference.png

check_reference

分析 reference.png 以理解設計並提供開發指導。

• 輸入：資源文件夾路徑 + 框架
• 輸出：設計分析和特定框架的開發建議

🎯 使用成果

設計數據

• 佈局：內邊距、外邊距、間隙、自動佈局屬性
• 樣式：顏色、邊框、陰影、效果、排版
• 結構：組件層次結構、語義角色
• 響應式：靈活尺寸、約束、斷點

智能註釋

• 座標匹配：註釋與特定設計元素關聯
• AI 指令：如“為按鈕組件添加懸停動畫”
• 實現上下文：元素詳細信息 + 定位

資源下載

• 導出設置：遵循 Figma 配置的導出設置
• 原始名稱：使用實際節點名稱作為文件名
• 視覺參考：reference.png 展示完整設計上下文
• 多格式支持：支持 SVG、PNG、JPG、PDF

🌟 框架優化

• React：TypeScript、Hooks、自定義 Hooks、性能優化
• Vue：組合式 API、TypeScript、Pinia 存儲、可組合函數
• Angular：獨立組件、信號、現代模板、TypeScript
• Svelte：Svelte 5 符文、TypeScript、SvelteKit、存儲
• HTML/CSS/JS：設計令牌、現代 CSS、無障礙優先
• SwiftUI：狀態管理、MVVM、無障礙、現代模式
• UIKit：現代併發、SwiftUI 互操作性、自動佈局
• Electron：安全強化、IPC 模式、原生集成
• Tauri：Rust 命令、事件系統、安全、WebView
• NW.js：統一上下文、Node.js 集成、Chromium API

📄 許可證

本項目採用 MIT 許可證。

🆘 支持

• 問題反饋：GitHub Issues
• NPM 包：figma-mcp-pro