▲MCP伺服器整合多項工具，設計圖不再只是參考圖。（圖／Figma）
記者吳立言／綜合報導
設計平台Figma宣布推出全新Dev Mode MCP（模型上下文協定，Model Context Protocol）伺服器的Beta測試版本，為開發者在VS Code、Cursor、Windsurf等IDE中使用AI助理（如 Copilot、Claude Code）生成程式碼時，提供更完善的設計脈絡支援，進一步強化「設計到程式碼」的整合效率。
過去，若想讓AI工具「理解」設計意圖，多半僅能透過螢幕截圖或API輸出資料進行溝通。如今藉由MCP標準，Figma能「主動」將設計檔案中的元件、樣式、變數等資料轉換為語意豐富的上下文，幫助大型語言模型（LLM）更準確地輸出與現有程式架構和設計系統相符的程式碼。
Figma表示，Dev Mode MCP伺服器可視任務需求，彈性提供以下類型的上下文工具：
※元件與變數語法資訊（Pattern Metadata）：若設計檔已與程式碼系統緊密對應（如使用 token 或變數命名），MCP 可將正確的元件路徑與變數語法傳遞給 LLM，提升準確度與效能。
※截圖輔助（Screenshots）：可用於傳遞高階版面邏輯，幫助 AI 理解多畫面間的關聯與整體 UI 流程。
※互動性描述（Interactivity）：MCP 可輸出 React + Tailwind 為主的原型程式碼，有助於描述元件狀態與 UI 邏輯流程。
※內容語意（Content）：包括假文、層級命名與 SVG、圖像，皆可作為資料模型設計的參考依據。
目前，Figma MCP伺服器預設支援三種操作工具，包含程式碼輸出（Code）、影像截圖（Image）與變數定義（Variable）。這些工具可依照任務設定，自訂輸出語法，並整合Code Connect將設計元件與實際程式碼一一對應。
Figma 團隊表示，未來版本將持續擴充MCP的支援功能，包括：
◆移除對 Figma 桌面應用的依賴，讓團隊能從雲端直接使用。
◆提供更深入的程式碼庫連結機制與簡化的Code Connect設定流程。
◆導入註解、格線（Grid）等更多設計資訊以支援更全面的LLM理解。
開發者可透過Figma Dev或Full方案存取該MCP伺服器，目前正開放回饋意見以持續優化開發流程。Figma也釋出影片範例說明如何快速批次為變數加入語法，進一步加快建構設計驅動程式碼的流程。
隨著MCP標準逐步普及，Figma此次的更新可望加速設計與開發整合，讓設計不再只是參考圖，而是能直接驅動開發，成為團隊跨部門協作的關鍵橋樑。
