figma/mcp-server-guide

解決的問題

本專案提供了一個 Model Context Protocol (MCP) 伺服器，允許 AI 編程代理直接存取 Figma 設計數據。透過為代理提供必要的上下文（如佈局、組件和變數），縮小設計與程式碼之間的差距，從而生成與設計系統「單一真理來源」相匹配的高保真程式碼。

工作原理

該伺服器充當 Figma 與 MCP 相容用戶端（如 VS Code、Cursor 和 Claude Code）之間的媒介。當使用者向 AI 代理提供 Figma URL 時，代理會使用 MCP 伺服器提取特定的節點 ID 並擷取結構化的設計數據。伺服器提供諸如 get_design_context（回傳 React + Tailwind 表示）和 get_variable_defs（擷取顏色和間距等設計令牌）之類的工具。

適用對象

使用 AI 代理將 Figma 設計轉換為生產級程式碼，同時保持與現有設計系統一致的產品團隊、開發人員和設計師。

亮點

• 雙向互動：支援從 AI 用戶端直接讀取設計上下文並寫入原生 Figma 內容（框架、組件、變數）。
• Code Connect 整合：允許代理重用實際的程式碼庫組件而不是進行猜測，從而確保一致性。
• 多用戶端支援：為 VS Code (透過 GitHub Copilot)、Cursor、Claude Code 和 Gemini CLI 提供即插即用的配置。
• Web-to-Design：能夠透過 AI 代理將網頁擷取並轉換為 Figma 設計。
• 工作流技能：包含將 UI 錄影轉換為故事板以及將 PRD 轉換為 FigJam 專案計畫的獨立技能。