Figma 設計 agent 上線:懂 design system 的 AI,直接在畫布上動手

Figma 推出自家設計 agent——住在畫布上、讀得懂你的 design system。拆解它跟 MCP server 怎麼分工、三種實際用法,以及誰現在能用。

The Figma design agent is here | Figma 官方文章封面

今年三月,Figma 把畫布開放給第三方 agent,讓你能透過 MCP 把 design system 的知識帶進 agentic workflow。五月二十號,它再往前一步——推出自家的 Figma agent,直接住在畫布上,也出現在左側欄。

第三方 agent 看 Figma,是隔著一層玻璃;Figma 自家這個經過 fine-tune,專門用來編輯 Figma 檔案。它讀得懂你的 component、token、命名規範與最佳實踐,跟你坐在同一個檔案裡,像個真的協作者那樣改稿。對正在學 Figma、又想把 AI 接進日常的人來說,這次的設計重點很清楚:速度跟精準,Figma 想讓你兩個都拿到。

SOURCE · FIGMA BLOG

The Figma design agent is here

Starting today, work with an agent that is built for Figma—directly on the canvas.

BY Rodrigo Davies & Tammy Taabassum · 2026-05-20 · figma.com/blog
讀原文 →
FIGMA AGENT · 三種進入工作流的方式
01
探索方向
一次攤開多種風格與架構,往寬走、也能選一條往深迭代
02
自動化瑣事
批次改 component、轉 dark mode、補齊 design system 文件
03
處理回饋
把散落的留言分主題、濃縮成行動計畫、模擬不同視角壓測
SOURCE: Figma 官方部落格 2026-05-20
本文要點
  1. 開放第三方還不夠,Figma 為什麼要自己做一個 agent
  2. Figma agent 與 MCP server 怎麼分工
  3. 用法一:往寬探索方向、往深迭代設計
  4. 用法二:把煩到讓你停手的瑣事自動化
  5. 用法三:把散落的回饋變成下一步
  6. 誰現在能用、beta 怎麼開放、credit 怎麼算
§ 01 — INTRO

開放第三方還不夠,Figma 為什麼要自己做一個 agent

Figma 對設計工具的定義一直很窄:探索、實驗、協作、精準,核心就這四件事。它當初做成一張多人畫布,就是為了讓這四件事在同一個地方同時發生。

當團隊開始用 agentic 工具加速做產品,一組假選擇跟著浮現——要速度還是要精準?要 AI 生成還是要手動操作?Figma 給的答案是:你不該被迫二選一。三月開放第三方 agent 之後,它看見一件只有自家做得到的事:把 Figma 本身變成模型讀得懂的格式,帶著你 component、token、標準的深層脈絡進場。這層脈絡,第三方工具碰不到。

所以才有了這個 agent。目標很單純,做一個精通 Figma、也熟悉團隊怎麼工作的協作者。它住在畫布上,省掉另開工具、來回切換的成本:你可以從任何一個 design layer 開始下 prompt,平行丟出多個方向同時跑,一邊自己改、一邊看 agent 也在改。

兩個工具,分工不同
FIGMA AGENT · 在畫布上
在畫布上做設計、改稿、跑想法
內建在 Figma 裡,帶著你 design system 的額外脈絡。無需另外設定、無需切換
MCP SERVER · 跨 code 與 canvas
在 code 與畫布之間搬運、保持同步
用 use_figma 把 code 拉上畫布,或把設計推回 code。兩邊不掉精度
Figma agent 透過 skills 生出 72 個 component 變體的終端畫面
agent 搭配 skills(figma-use、figma-generate-library)讀 3 個檔案,一次生出 72 個 component 變體。圖/Figma 官方部落格
▸ TRY THIS · 搞懂手上工具的分界
下次把 AI 接進 Figma 前,先分清楚兩件事:要在畫布上「生設計、改設計」,用 Figma agent;要把 code 拉進來或把設計推回 repo,用 MCP server。先想清楚你這一步是在「做設計」還是在「搬資料」,再決定叫哪個工具,省下大半來回。
§ 02 — 探索方向

往寬攤開多個方向,往深迭代同一條路

好設計很少來自第一個想法,也很少來自第一個 prompt。探索方向、比較做法、反覆迭代,本來就是設計師的日常,這個 agent 想讓你在更短的時間內踩過更多地。

你可以往寬走:對同一個問題快速生出幾種不同風格、一次攤開多個方向,比較三種為不同商業目標優化的 checkout flow,或請它給你三套資訊架構。也可以往深走:選定一個方向,請它持續迭代、比較不同實作、在符合 design system 的前提下重想現有設計。

agent 預設會拿你最常用、最近用的 component 當起點,但你能用 @ 點名特定的 token、variable、component 來導向它,像給 design system 下了一組快捷鍵。它真正想解的問題藏在這裡:當生成變得太容易,最大的風險是做出一個平均水準的東西。把方向攤開、讓你挑對的那一個——挑定之後再親手收尾,往往比一路 prompt 到理想結果更快、更自然,也更省 token。

▸ TRY THIS · 用平行 prompt 逼出對比
做下一個介面時,與其磨第一版到完美,先丟一條平行 prompt:『給我三個風格版本——一個有機、一個現代、一個復古。』讓三個方向同時長出來擺在一起比,比你腦中想像三個方向再逐一手做,更快看出哪個對。挑定之後再用手收尾。
§ 03 — 自動化瑣事

把那些煩到讓你停手的事,交給 agent

畫布上的流程,不必停在畫布。搭配 Figma MCP server,工作能在 code 跟 Figma 之間來回搬而不掉精度——從 code 開始,用 code-to-canvas 拉進 Figma 套上 design system,再透過 MCP 推回去,兩邊保持同步。agent 就卡在這個交接點上,幫你維持節奏。

它最擅長的,是那些需要脈絡又需要精準、卻煩到讓你停手的瑣事。手動把變數改成一致命名、在幾十個畫面之間換同一個 component、把同一個 padding 改套整條 flow、把大量 frame 填上像樣的內容——這些正是 agent 存在的理由。跟 Figma 對話就能跨檔更新 typography、把整面 grid 的 placeholder 文字跟圖片換掉、把所有 chip 設成 active、把畫面轉成 dark mode 而省去一個個調 fill 跟對比。

如果你還在維護 design system,它會是特別好用的幫手:批次更新 component 的描述、標籤、使用情境,統一命名規範,把每個 component 連同它所有狀態與變體一起做成文件,甚至用你團隊的範例去校準輸出品質。

可以直接丟給 agent 的瑣事

跨檔案統一 typography,換成更乾淨的字體

把整面 grid 的 lorem ipsum 文字與圖片換成真實內容

把所有 chip / tile component 設成 active 或 highlight 狀態

一鍵把畫面轉成 dark mode,省去手動調 fill 與對比

替 component 連同所有狀態與變體產生使用文件

Figma code 與 canvas 來回流動的示意圖
agent 卡在 code 與 canvas 的交接點,讓工作在兩邊來回搬而不掉精度。圖/Figma 官方部落格
▸ TRY THIS · 先讓 agent 做一次 design system 文件
如果你手上有一套還沒寫文件的 component,丟這條給它:『幫我的 component 建立文件,含所有狀態與變體,並加上情境範例說明怎麼用。』把最枯燥、最容易拖延的整理工作先交出去,你就能把時間留給真正要動腦的判斷。
§ 04 — 處理回饋

把散落的回饋,變成可執行的下一步

設計工作會累積大量回饋,散在留言、檔案、crit 筆記、利害關係人的反應、還沒解的問題裡。因為整個團隊在同一個檔案工作,agent 早就握有這些脈絡——請它處理回饋,比較像跟一個已經在房間裡的人一起想,而非從頭 brief 一個新同事。

你可以請它把留言依主題分類、整理成可執行的下一步,也能拿它來壓力測試設計:想知道一個只看營收的 VP 會怎麼反應?agent 能模擬那個視角。一條冗長的留言串卡住了?它能把來回對話濃縮成一份行動計畫。Crit 之前想先把方向想清楚?先用它跟自己對一遍,再拿去團隊面前。

▸ TRY THIS · 把留言串丟給 agent 收斂
下次面對一條吵了很久、結論模糊的留言串,先別自己硬讀。丟給 agent:『把這些留言依主題分類,並針對這個畫面做一版納入回饋的新 rev。』讓它先把雜訊收斂成幾個主題與一份草案,你再從那份草案開始判斷,比從零讀完所有留言快得多。
§ 05 — 整體觀察

誰現在能用、beta 怎麼開放、credit 怎麼算

這個 agent 嵌在工作真正發生的地方,省去開關稅、省去來回切換、也省去學習曲線——你留在 Figma,團隊也都還在迴圈裡。接下來幾個月,Figma 說會把重點放在強化 design system 支援、打磨體驗、擴大 agent 跨檔搜尋的能力,以及加入更多客製化方式。

實際能不能用,要看你的方案。agent 正以 beta 形式分批開放,beta 期間不吃 credit,正式上線後才會計入 AI credit。Professional、Organization、Enterprise 方案的 Full seat 用戶可用;Collab 與 Dev seat 能在 draft 裡用;Starter、教育、政府方案這次沒納入。想搶先體驗,要到官方頁面登記候補,被選上才會收到開通信——登記不保證一定排得到。

"

As AI makes it easier to generate designs, the risk is shipping something average.

當 AI 讓生成設計變得更容易,真正的風險是你送出了一個平庸的東西。

— FIGMA 官方部落格〈THE FIGMA DESIGN AGENT IS HERE〉
重點整理

01Figma 推出自家設計 agent,住在畫布與左側欄,專門 fine-tune 來編輯 Figma 檔案

02與 MCP server 分工:agent 在畫布上做設計、帶 design system 脈絡;MCP 負責 code 與 canvas 來回搬運

03三大用法——往寬/往深探索方向、自動化瑣事(批次改、轉 dark mode、做文件)、把回饋變成下一步

04可用 @ 點名 token、variable、component 導向輸出,像給 design system 下了一組快捷鍵

05beta 分批開放、期間不吃 credit;Pro/Org/Enterprise 的 Full seat 可用,需登記候補

COURSE · 把基本功一次練扎實

Figma 全攻略

agent 再聰明,前提是你得讀得懂自己的 component 跟 token——它的輸出都繞著你的 design system 跑。從底層邏輯到 Design System 實戰,把 Figma 一次練到能用它思考,而非只是用它畫圖。

了解課程內容 →
SUBSCRIPTION · AI 時代的設計師訂閱方案

AI 覺醒設計應用攻略

每週深度拆解 AI 設計工具實戰——從 Figma agent、Make、Weave 到 ChatGPT Images、Claude 在設計流程的應用。把這些工具串成你個人的設計工作流。

查看訂閱方案 →