Figma 把 canvas 開放給 AI agents：設計系統的價值正被重新定義
Figma 推出 use_figma 工具讓 AI agents 直接在 canvas 上動手寫檔案，搭配 markdown 寫成的 skills 指引 agent 怎麼工作。這個更新真正在做的事，是把設計系統從「設計師之間的共同語言」升級成「人跟 agent 共用的合約」——對正在學設計系統的轉職設計師而言，這是一個最值得進場的時機。
3 月 24 日 Figma 官方部落格刊出 Matt Colyer（Figma 產品總監）的更新：Figma 的 canvas 從這天起對 AI agents 開放。具體來說，是推出一個叫 use_figma 的新工具，讓 Claude Code、Codex 這類 AI agents 可以直接寫到你的 Figma 檔案裡，沿用你已經建好的元件、變數、設計系統。
這篇文章對轉職設計師而言看似很遙遠——你可能還在學 Auto Layout，怎麼會關心 agent 怎麼寫 Figma？實際上恰恰相反。Figma 同時推出一個叫 skills 的新概念：用 markdown 寫的指令檔，告訴 agent「在這個團隊應該怎麼工作」。這個設計把設計系統從「設計師之間的默契」升級成「人跟 agent 都讀得懂的合約」。設計師懂 design system 的價值，從這一天開始多了一個維度。
這篇譯介把 use_figma 是什麼、為什麼跟 generate_figma_design 互補、skills 怎麼寫、self-healing loop 是什麼、以及這對轉職設計師的學習路徑有什麼意義一次拆清楚。
Agents, meet the Figma canvas
Matt Colyer（Product Director, Figma） · 2026-03-24 · figma.com/blog
read original →Figma 在 MCP server 上提供兩個工具，方向相反、互相補位。
為什麼 AI 設計出來的東西總是「一看就 AI」？
Colyer 文章開頭的觀察很犀利。一個產品的調性，是由無數個小決定累積出來的：色票該選哪幾個、按鈕的內距該抓 12 還是 16、字級階層怎麼排、互動該加哪種微動畫——這些細節加總起來，才形成一個品牌的辨識度。
到目前為止 AI agents 沒有這些 context，所以它們生出來的設計常常有一種「看起來對，但就不是你的產品」的怪感。原文的講法是 generic and unfamiliar——通用、陌生。
use_figma 工具直接接到團隊的設計系統，agent 寫出來的東西自動繼承你已經建好的元件、變數、token。這就是這次更新真正在解決的事：讓 agent 從「在白板上畫東西」變成「在你家工作室裡照著你的標準做東西」。
use_figma：agent 直接寫到你的 Figma 檔案
use_figma 是這次更新最具體的產品。Claude Code、Codex、Copilot CLI、Cursor、Warp 這些 MCP client 透過 use_figma，可以「找到」你的 Figma 檔案、讀取設計系統、然後直接在 canvas 上建立或修改設計資產。整個過程不再經過匯出 PDF、截圖、傳檔案——agent 跟設計師共用同一張 canvas。
OpenAI 的 Codex 設計負責人 Ed Bayes 在原文裡描述他們團隊的工作方式：「OpenAI 的團隊用 Figma 迭代、調整、做產品決定。現在 Codex 可以找到 Figma 裡所有重要的設計 context，幫我們把產品做得更快、更好。」這句話的潛台詞是：Figma 已經從「設計工具」變成「跨工具共用的 source of truth」。產品工作從哪一端開始（coding agent、Figma、命令列）都行，Figma 是所有人匯流的地方。
打開你最近做的一個 Figma 練習檔，問自己：如果今天有一個 agent 要照著你的檔案延伸做新頁面，它能找到「按鈕該用哪個元件」「主要色該抓哪個變數」「行距該套哪個 text style」嗎？檢查的同時，你已經在練設計系統的核心思維了。
兩個工具如何互補：generate_figma_design × use_figma
Figma MCP server 早先就有 generate_figma_design 這個工具，作用是把線上 app 或網站的 HTML 翻譯成可編輯的 Figma layers。use_figma 是這次新加的，作用是讓 agent 在 canvas 上直接操作既有的設計系統。
兩個工具的方向其實是反的。generate_figma_design 是「從程式碼往 canvas 走」——當你的設計檔跟線上產品脫鉤了，這個工具能把最新的 UI 帶回 Figma 重新整理。use_figma 則是「在 canvas 上工作」——以你的元件、變數為材料創造新東西。組合起來形成一個閉環：跑去看現況、回來修補、再產出新的。
這個分工對學設計的人有一個值得注意的訊號：Figma 把「現況同步」（generate）跟「主動創造」（use）拆成兩個動作。這正是設計團隊真實的工作節奏——一半時間在追上 production、另一半時間在規劃下一步。Figma 的 agent 工作流照這個現實切分，等於默認設計工作就該這樣分配。
下次接到一個練習題目（例如做一個 SaaS 後台），用兩個資料夾分別放：「現況」（既存的網站截圖、競品 reference）跟「下一步」（你的新設計）。一週後檢視兩個資料夾的比例——你會更清楚自己是「在補功課」還是「在創造」。
Skills：用 markdown 寫的「給 agent 的工作手冊」
這次更新真正讓人意外的概念是 skills——一份用 markdown 寫的指令檔，告訴 agent「在這個團隊應該照什麼步驟、用什麼順序、遵守什麼規則來工作」。Skills 不是 plugin、不需要寫程式，任何人都能寫一份。
底層有一份基礎 skill 叫 /figma-use，所有其他 skill 都建立在它之上——它教 agent 理解 Figma 的結構與核心原則。其他 9 個示範 skill 涵蓋了不同的工作流：
/figma-generate-library：從程式碼建立 Figma 元件/figma-generate-design：用既有元件與變數產生新設計/create-voice：從 UI 規格生成螢幕閱讀器規格（VoiceOver、TalkBack、ARIA），由 Uber 的 Ian Guisard 撰寫/cc-figma-component：從 JSON 結構生成 Figma 元件，由 One North 的 Nick Villapiano 撰寫/apply-design-system：把現有設計連到設計系統元件/rad-spacing：套用變數階層化的間距規則/sync-figma-token：在程式碼跟 Figma 變數之間同步 design tokens 並偵測 drift/multi-agent：跑多 agent 並行流程，由 Augment Code 提供
這些 skill 大多由社群實作者撰寫，不是 Figma 內部團隊。這個生態策略很值得注意——Figma 把 skill 當成新的擴充槽，比 plugin 門檻更低，又比文件更可被執行。對設計師而言，這是一個新的職涯空間：寫 skill 的人正在定義「什麼叫好設計」的執行版本。
用一張 A4 紙寫下你最近做一個專案的 SOP——從「打開 Figma 開始」到「交給工程師」之間的每一步。寫到第三步你會卡住，那個地方就是團隊默契沒被寫下來的地方。Skill 的本質就是把這種默契寫出來給 agent 讀。把 SOP 寫清楚是設計師升級的隱形分水嶺。
Self-healing loop：agent 怎麼自己改自己的設計
原文裡有個很關鍵的段落：當 agent 生出一個畫面，它會自動截圖，比對結果跟原本指令的差距，再回去調整。Colyer 把這個過程叫 self-healing loop——agent 執行完一次後不會直接交差，會反覆校對自己的產出。
這個能力為什麼重要？因為 agent 是在跟真實的元件、變數、Auto Layout 互動，不是只在改視覺輸出。當它調整字級、改間距、換顏色，這些更動會經過設計系統的結構過濾——也就是說，調整過程本身就遵守你的規範，不會偏離設計系統。
AI 模型本質上是 non-deterministic（非決定性的），同一個 prompt 跑兩次可能產生不一樣的結果。Skills 把這個不穩定性框起來：透過明文的步驟、規則、程式碼，agent 的行為被收斂到可預期的範圍。對設計團隊而言，這代表一個重要的轉變——團隊的設計規範不再只是 PDF 文件，而是 agent 工作時會遵守的活的規則。
下次做完一個 UI 練習，截圖丟到 Claude 或 ChatGPT，附上你原本的 brief，問它「這份設計有哪三點沒符合 brief？」。這就是 self-healing loop 的人工版本——你會發現自己過去靠直覺做的判斷，被攤開來說的那一刻變得清晰很多。
這對轉職設計師的學習路徑代表什麼
對正在學 Figma 的人來說，最容易誤會的是：「agent 都能做設計了，我學設計還有用嗎？」這個更新的訊息恰好相反——設計系統的價值因為 agent 的存在而被放大。
Anthropic Claude Code 的產品總監 Cat Wu 在原文裡講得很直接：「最好的產品來自重視細節的團隊。許多設計團隊在 Figma 形塑作品，再用 Claude Code 把它們做出來。Skills 教 Claude Code 怎麼直接在 canvas 上工作，這樣產品才能保留團隊的判斷與意圖。」這句話翻成白話：agent 的產出品質上限，由設計系統的完整度決定。
設計系統是 token、元件、變數、命名規範、互動模式的集合，過去主要是給設計師之間建立默契用。現在它多了一個讀者：agent。當設計師在 Figma 裡建立一個有結構的設計系統，這個系統會被 agent 沿用、被工程師讀取、被 skill 引用。懂設計系統的設計師價值會變高，因為他們建出來的東西能被 agent 放大複用。
這對轉職設計師而言反而是好消息：基礎打得越扎實的人會越受益。Auto Layout、Variables、Components、Variants 這些原本被當成「進階功能」的東西，現在是基本功。
這週給自己一個小目標：把以前做過的一個 Figma 檔案重整一次——把所有顏色換成 Color Variable、所有按鈕換成 Component、所有文字套上 Text Style。整理完用螢幕錄影記錄成果，這份練習在面試時拿出來會比 10 個畫面截圖更有說服力。
整體觀察：canvas 開放給 agent 之後的設計學習路線
這次更新表面上是 Figma 加了一個工具，實際上在做的是把設計系統從「團隊內部的合約」推到「人跟 agent 共用的合約」。Figma 的角色從設計工具升級成介於 code 跟 canvas 之間的中介層——所有 agent 想動手畫東西的時候，都得透過 Figma。這個位置的戰略意義不小。
對學設計的人來說，這代表幾個務實的方向。第一，學 Figma 不應該只學畫面，要學系統——Components、Variables、Auto Layout 這些結構性能力是這個時代的基本功。第二，學會把工作流程寫下來——SOP 寫得清楚是 skill 的素材。第三，把設計練習放到「能被 agent 接手延伸」的標準上自我檢查——這個標準會強迫你的檔案變整齊、變一致、變可被複用。
beta 期間 use_figma 是免費的，目前支援 Augment、Claude Code、Codex、Copilot CLI、Copilot in VS Code、Cursor、Factory、Firebender、Warp 這些 client。未來會變成 usage-based 的付費功能。Figma 同時也在持續擴充工具能力，下一步會增加圖片支援與自訂字體。
QUOTE · 原文金句最好的產品來自重視細節的團隊。Skills 教 Claude Code 怎麼直接在 canvas 上工作，這樣作品才能保留團隊的判斷與意圖。
這篇 5 個重點濃縮成可截圖收藏的清單
- 01 use_figma 讓 agent 直接在 canvas 上動手寫檔案，沿用既有設計系統。
- 02 generate_figma_design（code→canvas）跟 use_figma（canvas 上工作）方向相反、組合形成閉環。
- 03 Skills 用 markdown 寫，門檻比 plugin 低、但執行力比文件強。
- 04 Self-healing loop：agent 截圖比對自己產出，反覆校對直到符合規範。
- 05 設計系統懂得越深，被 agent 放大複用的價值越高。
