AI Agent 直接在 Figma 畫布上設計

Figma 推出新功能，讓 AI Agent 能夠直接在設計畫布上操作。透過新的「use_figma」MCP 工具和「Skills」機制，Agent 可以存取設計系統脈絡，產生與團隊決策相符的設計。該功能自 2026 年 3 月 24 日起進入開放測試階段，測試期間免費，未來將轉為使用量計費的付費功能。

設計脈絡的缺失問題

過去 AI Agent 在設計時缺乏關鍵的設計決策脈絡，導致產出的設計常感覺陌生且通俗化。這些決策看似細微——從色彩調色盤、按鈕內距、排版到互動邏輯——卻是定義產品外觀和使用者體驗差異的核心因素。Figma 的解決方案讓 Agent 能夠存取設計系統，確保產出的資源與團隊精心建立的標準保持一致。

核心工具與工作流程

• use_figma 工具：讓 Claude Code、Codex 和其他 MCP 用戶端能夠直接在 Figma 檔案中寫入，生成和修改與設計系統相關聯的設計資源
• generate_figma_design 工具：將現場應用和網站的 HTML 翻譯成可編輯的 Figma 圖層（現有功能）
• 兩個工具互補運作：當設計與程式碼不同步時，generate_figma_design 將最新 UI 匯入 Figma；use_figma 則使用元件和變數編輯這些設計或建立新資源

Skills 機制的角色

Skills 是以 Markdown 檔案撰寫的指令集，定義 Agent 在 Figma 畫布上的工作方式。它們不僅規定執行工作流程的步驟、順序和約定，更重要的是為 Agent 提供專門知識，確保產出耐用且品牌一致的設計。Skills 填補了知識缺口，讓 Agent 瞭解如何在 Figma 中工作，並將團隊的判斷和意圖具體化為規則。

由於 AI 模型本質上是非確定性的，相同提示可能產生不同結果；Skills 透過編碼特定步驟和指南，使這種行為更可預測。

現有技能示例

已有九個範例技能供使用者探索，包括：

• /figma-generate-library：從程式庫生成新元件
• /figma-generate-design：使用現有元件和變數建立新設計
• /create-voice：從 UI 規格產生無障礙規範（VoiceOver、TalkBack、ARIA）
• /apply-design-system：將現有設計連接到系統元件
• /rad-spacing：應用階層式間距與變數
• 其他由 Uber、Warp、Firebender 等社群貢獻者開發的技能

社群驅動與可達性

任何人都可以撰寫 Skill，無需開發外掛或編寫程式。多個推出的 Skill 來自社群實踐者，他們正在實際建構這些工作流程。一個基礎的「/figma-use」Skill 提供所有 Agent 對 Figma 的共同理解，團隊可在此基礎上自訂。

自我修復與迴圈優化

Agent 生成螢幕後可以截圖並迭代不相符的部分。因為它操作的是實際的結構、元件、變數和自動排版，調整會與系統本身互動，而非僅編輯視覺輸出。這種自我修復機制提升了產出品質的可靠性。

安全性與未來方向

此功能原生於 Figma MCP 伺服器，受惠於 Figma 的安全性和可靠性，同時透過 Plugin API 開放 Code Connect、Figma Draw 和 FigJam 等介面的存取。未來 Figma 計畫擴展 Agent 功能，加強原生 AI 能力，簡化 Skills 的使用和分享，並逐步添加影像支援和自訂字型等功能。

該功能現已相容 Augment、Claude Code、Codex、Copilot CLI、Cursor、Factory、Firebender 和 Warp 等多個 MCP 用戶端。