Figma Canvas (AI agent canvas)

什麼是 Figma Canvas？

Figma Canvas 如本 Figma 部落格文章所述，是 Figma 將畫布工作流程開放給 AI agent，讓它們能直接在 Figma 檔案內進行設計。其核心目的是讓 agent 在使用團隊於 Figma 維護的相同設計情境（如設計系統、元件、變數及團隊慣例）時，建立並更新設計資產。

該文章也介紹 beta 版 Figma MCP 伺服器，將 Figma 整合至開發者工作流程，讓 LLM 驅動工具以連結既有設計結構的方式產生及修改設計工作。

AI agent 可直接寫入 Figma 檔案畫布，讓產生的作品能在團隊迭代設計的相同位置建立或修改。
Beta 版 Figma MCP 伺服器，將 Figma 引入開發者/LLM 工作流程，支持基於設計的程式碼產生及設計資產操作。
use_figma 工具用於畫布操作，讓 MCP 用戶端（包括文章提及的 Claude Code 及 Codex）能產生及修改連結設計系統的設計資產。
程式碼與畫布間的共享情境，讓 agent 能在更新程式碼衍生 UI 與於 Figma 精煉設計間流暢切換。
使用 markdown 指示引導 agent 行為的技能，技能定義 agent 在 Figma 應遵循的工作流程步驟、順序及慣例。

使用支援 Figma MCP 伺服器的 MCP 用戶端（文章提及如 Claude Code 及 Codex 等工具），透過 MCP 存取 Figma 功能。
使用 use_figma 工具，指示 agent 利用你的設計系統情境，在 Figma 內建立或更新元件及其他設計資產。
透過技能加入指引，提供 agent 可遵循的 markdown 指示，說明如何在 Figma 執行任務（包括文章提及的基礎 /figma-use 技能）。
選用從即時 UI 同步，使用 generate_figma_design，從 HTML/程式碼開始，然後切換至 use_figma 以既有元件及變數編輯這些設計。

將程式碼庫轉為初始 Figma 元件：使用如 /figma-generate-library 的技能，從程式碼庫在 Figma 建立新元件。
使用既有元件及變數產生新畫面：使用 /figma-generate-design，讓 agent 在 Figma 建構設計時依賴元件/變數，而非自由佈局。
從 UI 描述套用無障礙規格：使用 create-voice 從 UI 規格產生螢幕閱讀器規格（VoiceOver、TalkBack、ARIA）。
透過系統感知規則強制間距慣例：使用 rad-spacing 在 Figma 套用階層間距模式。
連結或重新對映既有設計至系統元件：使用 apply-design-system 將設計對齊系統元件，而非留作獨立圖層。

部落格文章指出，Figma 畫布上 AI agent 的支援最終將成為依使用量計費的付費功能，但 beta 期間免費提供。

文章描述 use_figma 工具，讓 agent 使用設計系統情境操作畫布。它也提及現有 generate_figma_design 工具，用於將即時應用程式/網站的 HTML 轉譯為可編輯 Figma 圖層。

文章中，技能是書寫為 markdown 檔案的指示集合，形塑 agent 在 Figma 的運作方式—涵蓋工作流程步驟、順序、慣例及產生耐用、品牌一致設計所需的領域知識。

不需要。文章表示 任何人皆可撰寫技能，且無需建置外掛或撰寫程式碼。

文章點名 Claude Code 及 Codex 為可使用 use_figma 的 MCP 用戶端，並描述「其他 MCP 用戶端」。未列出完整相容性矩陣。

設計轉程式碼工作流程（無直接畫布代理編輯）： 你可以在 Figma 外部產生設計，或將 Figma 視為唯讀目標，然後在 Figma 中手動重建資產。這與缺少直接代理編輯（連結至畫布內的設計系統）有所不同。
使用現有的 Figma 專屬自動化或外掛： 若無需 AI agent 即可擁有一致的元件與變數，你可依賴 Figma 外掛或範本導向方法。這以更具確定性的行為，交換代理自主性。
在 Figma 外部產生設計產出的代理工作流程： 某些 LLM 工具鏈可能輸出設計檔案或規格，供設計師實作。相較本文所述方法，代理無法透過 use_figma 直接修改相同的 Figma 元件/變數。
僅限 HTML 轉 Figma： 若焦點在將現有 UI 匯入 Figma（透過 generate_figma_design 類型功能）而無代理畫布編輯迴圈，這可降低複雜度，但可能需更多手動後續以符合設計系統。