RAR 設計攻略
  • 線上課程
  • 專欄文章
  • AI 覺醒
  • 關於講師
客服信箱:riven@rar.design

© 2026 RAR 設計攻略 All Rights Reserved.欸嗚欸嗚欸欸嗚嗚嗚喔喔有限公司.統一編號: 90841757
使用者條款.隱私權政策
Made with ♥ by 無為教育科技股份有限公司.Teachify
Developer and agent API documentationSite content index for AI agents (llms.txt)API documentation (OpenAPI)API authentication guide
  1. 首頁
  2. 文章列表
  3. Figma Agent 是什麼?直接在 canvas 上動手的設計 AI 完整解析與用法

Figma Agent 是什麼?直接在 canvas 上動手的設計 AI 完整解析與用法

開放 beta 上線,它讀你的元件與變數、能被 @ 指定,還能把你的判斷變成 slash command
設計師 Riven

設計師 Riven

2026年8月2日 下午 3:00

AI 設計

FIGMA · AI 設計 · 2026

Figma Agent 在 canvas 上編輯一組閱讀 App 的註冊引導流程,畫面上有四張手機稿與一句提示:Switch to brown color scheme and dark mode

▲ Figma Agent 不是開一個新分頁生一張圖,而是在你既有的檔案上直接動手改。圖片來源:Figma 官方

QUICK ANSWER

Figma Agent 是 Figma 內建的設計 AI 代理,直接活在 canvas 與左側欄,會讀你檔案裡真實的元件、變數與 token,執行探索方向、批次改稿、整理回饋這類多步驟任務。2026 年 5 月 20 日進入 beta,6 月 24 日 Config 2026 開放 beta 並補上自製工具、外部 context 與 Skills。Professional 以上方案的 Full seat 可用,beta 期間不扣 AI credits。

CHAPTER 01 · WHAT IS IT

它不是側邊欄的聊天機器人

先講最容易誤會的地方。Figma Agent 不是在你的檔案旁邊開一個對話框、回答你「這個間距要用多少」的助理。它會動手。你在 canvas 上選一個圖層、丟一句話,它就在同一個檔案裡建圖層、改屬性、換元件,改完的東西你可以直接拿滑鼠繼續調。

兩個入口。一個是 canvas 上的浮動提示框,你選什麼就對什麼下指令;另一個是左側欄的 Agents,開成常駐側邊欄,所有對話串收在一起。不想要 canvas 上跳提示框的,主選單的偏好設定裡可以關掉。

最實用的一個設計是平行下指令。你在 A 畫面按下送出,不用等它跑完,直接滑到 B 畫面開下一個。每個進行中的任務會在 canvas 上留一顆會轉的指示點,點開能看到它做到哪一步、做完了什麼。這聽起來像小事,但它把「等 AI」這件事從流程裡拿掉了——你不會再對著載入動畫發呆。

官方這支介紹片把上面講的操作感受演了一遍,先看完再往下讀會比較有畫面:

▲ Meet the Figma design agent,Figma 官方頻道

CHAPTER 02 · THE REAL SHIFT

過去兩年的 AI 設計工具,都在解一題錯的

從 2024 年開始,市面上的 AI 設計工具大致分兩派。一派生介面的圖:好看、能貼進簡報、不能出貨。另一派從一句話生 React:技術上聰明,但生出來的東西跟你團隊的設計系統毫無關係。兩派共同的預設是——設計是一個「一次性生成」的問題。你打一段字,它給你一個成品,不滿意就重來。

Figma 這次換了題目。它把設計當成一個編輯問題:檔案早就存在,裡面有元件,元件掛著 token,token 背後有規則。agent 動任何一個圖層之前,先把這整套讀進去。所以它產出的不是「一張長得像你們產品的畫面」,而是真的用你們的 Button、你們的間距變數組出來的東西。

“

生成是從零開始,編輯是從你已經決定過的事情開始。差別不在誰比較快,在誰的產出你敢直接交出去。

這個換法有一個安靜、但很硬的副作用:agent 的產出上限,等於你餵給它的 context 品質。元件命名亂七八糟、變數散在三個 library、同一個灰色有五種寫法——以前這些只是讓新人上手慢一點;現在它讓你的 AI 變笨。

於是「維護設計系統」這件長年被當成行政雜務、永遠排在需求後面的工作,突然變成整個團隊槓桿最高的一件事。這是我覺得這波更新裡最值得先想清楚的一句。

FIGMA AGENT 的時間線

2026 / 02 / 17

程式碼與 canvas 並存的路線宣告

Dylan Field 提出設計的未來是 code 與 canvas 兩條腿走路,Claude Code to Figma 是第一步。

2026 / 03 / 24

canvas 對第三方 agent 開放

透過 MCP server 的 use_figma,外部 agent 可以直接在 Figma 檔案裡建東西;同場推出 markdown 格式的 skills。

2026 / 05 / 20

Figma 自家的 agent 進入 beta

內建在 canvas 與左側欄,主打探索方向、批次雜務、處理回饋三件事。

2026 / 06 / 24

Config 2026:開放 beta+自製工具

開放給更多人,並補上生成式外掛、shader、外部檔案 context、MCP 連接器與自訂 Skills。

如果你想一次看完 Config 2026 的全部發布,我另外寫過一篇 Config 2026 完整解析,Code Layers、Motion 與六種材料上 canvas 都在那邊。

CHAPTER 03 · HOW IT WORKS

它實際上被拿來做三件事

官方把使用情境收斂成三塊,我覺得收得很準,因為這三塊剛好對應設計師一天裡三種完全不同的耗損。

01 EXPLORE

把方向鋪開

一次要三種風格、三種資訊架構、三版針對不同商業目標的結帳流程,攤在同一張畫布上比。

02 AUTOMATE

吃掉重複勞動

整份檔案換字體、整條流程改內距、把假字換成真內容、整套稿轉深色模式、統一變數命名。

03 FEEDBACK

消化意見

把散在留言串的回饋按主題分類、整理成待辦,或請它模擬某個角色的視角先幫你壓力測試。

怎麼讓它照你的規矩來?兩個控制點。第一個是選 library——你指定哪一套,它就只用那一套裡的樣式、元件與變數。第二個是 @ 提及,直接把某個 token、某個變數、某個元件點名進提示裡。官方形容這像是「設計系統的快捷鍵」,我覺得這個比喻剛好:它不是讓 AI 猜你想要什麼,是讓你用最短的方式把答案講清楚。

沒特別指定的時候,它會拿你最近、最常用的元件當起點。這個預設值蠻誠實的——它承認自己不知道你在做什麼,只好從你的使用習慣猜。所以檔案越乾淨,猜得越準。

Figma Shader fills 面板,列出 Dither waves、Fluid halftone、Particle web、Magnetic field 等自製材質預設,右側是黑色字體搭配橘灰網點的作品

▲ 6 月更新後,agent 也能幫你寫 shader,做出原生工具做不到的材質。圖片來源:Figma 官方

Config 2026 之後多了一件事:你可以叫它替你做工具。生成式外掛用 PropsKit 蓋,外觀跟原生功能一致、直接活在 canvas 上;shader 則是跑在 WebGPU 上的小程式,能做出 dither、液態金屬、碎形噪點這類原生效果給不了的質感。這兩塊我各寫過一篇拆解——生成式外掛怎麼用一句話做出來、Figma Shaders 完整教學,這裡就不重複。

要注意的是分工:外掛只要有人做好了,任何方案的人都能免費用;花錢的是「叫 agent 幫你做一個」這個動作。另外,任何需要碰到 Figma 以外世界的事——串 AI 服務、打第三方 API——還是得寫傳統外掛。

CHAPTER 04 · GETTING STARTED

誰能用、要不要錢、從哪開始

Full seat

需要的席次類型

3 種

支援方案|PRO/ORG/ENT

0

BETA 期間消耗的 AI CREDITS

開放 beta 的門檻是 Professional、Organization、Enterprise 三種方案的 Full seat。Collab、Dev、View 席次不是完全沒得玩,可以在自己的草稿檔裡用。免費的 Starter 方案不在名單裡。beta 期間不扣 AI credits,正式上線後才開始計費——這句話的實際意思是:現在是拿它練手最便宜的時候。

要摸清楚它的脾氣,最快的路不是讀說明文件,是去玩官方那個 Agent Playground 檔案,裡面有一步步的引導任務,從批次改稿到套用回饋都有。官方也錄了一支完整的工作流教學:

▲ How to use Figma agent in your design workflows,Figma 官方頻道

CHAPTER 05 · CONTEXT

餵什麼進去,決定它長什麼樣

6 月那次更新,表面上看是加了幾個入口,實際上是把 agent 從「只認識這個檔案」拉到「認識這個專案」。四個管道:

直接丟檔案進對話

使用者訪談逐字稿、UX 文案文件、數據報告,丟進去它整段對話都會拿來當參照。

貼另一個 Figma 檔案連結

它拿到的是完整結構——元件、token、版面、樣式,不是一張扁平的截圖。所以它能複製模式,不是照著像素學樣子。

上網查

不用離開檔案就能抓真實資料。做餐廳列表就抓真的店名跟照片,做競品分析就抓現在的介面模式。假字終於可以少一點。

接你自己的工具

MCP 連接器把 GitHub、Atlassian、Slack、Notion 這些地方的 context 拉進來,也能把結果推回去。

Figma Agent 對話框的 Connectors 選單展開,可選 Atlassian、Dovetail、GitHub、Granola、Hex、Notion、Slack,上方還有加圖片、附加 Figma 檔案、網頁搜尋、Libraries、Skills 等選項

▲ 一個提示框裡塞了圖片、Figma 檔案、網頁搜尋、Libraries、連接器與 Skills 六種 context 來源。圖片來源:Figma 官方

這裡有一個心態上的轉換值得講。多數人用 AI 工具的習慣是「把提示詞寫好」,但提示詞寫再漂亮,也補不上它不知道的事實。真正拉開差距的是你有沒有把環境準備好——這件事我在 Loop Engineering 那篇講過完整的思路,換到 Figma 上一樣成立:與其花二十分鐘雕一句提示,不如花五分鐘把該給的檔案跟連結掛上去。

CHAPTER 06 · SKILLS

把你的判斷,寫成一條全隊都能跑的指令

這是整包更新裡最少人討論、但我認為影響最久的一塊。

Skills 讓你把反覆用的那段提示存成一個斜線指令。一種特定的視覺語言、一套改稿的檢查順序、一個你已經想通但每次都要重講一遍的流程——存起來,變成 /contrast-improvements 這種東西,然後發布給團隊。

Figma Agent 的 Skills and commands 選單,列出 clay-morphism、comment-synthesis、crit-recap、contrast-improvements 等自訂斜線指令,並顯示已發布給 Growth Team

▲ 自訂 Skills 變成斜線指令,並可以發布給整個團隊使用。圖片來源:Figma 官方

停下來想一下這代表什麼。過去一位資深設計師的產出,是他畫的那些畫面;他的判斷力只有在 crit 的時候會外流一點點,然後隨著他離職一起消失。現在他的判斷可以被寫下來、被發布、被整隊每天執行。他的產出從作品變成了工具。

“

會被 AI 稀釋掉的,是那些說不出所以然的手感;會被放大的,是寫得下來的判斷。

還有一個容易被忽略的設定:agent 的對話紀錄預設對同檔案的協作者是公開的。也就是說,別人怎麼問、怎麼一步步逼近答案,你看得到。這其實是設計團隊很稀缺的東西——平常你只看得到同事的成品,看不到他的思路。當然,需要私密的時候可以關掉。

CHAPTER 07 · COMPARED TO

Agent、Make、MCP 到底差在哪

Figma 現在有三條 AI 路徑,名字都很像,很多人搞混。用一句話分:agent 管畫布,Make 管行為,MCP 管跨界。

FIGMA AGENT

在畫布上直接改

產出的是設計圖層。強項是拿你的設計系統把流程、狀態、文案、結構講清楚。零設定、零切換。

FIGMA MAKE

把行為變成程式碼

產出的是程式碼圖層。設計定稿後丟進 Make 生互動行為,再嵌回 Figma Design 繼續改。

MCP + USE_FIGMA

跟外面的 agent 對接

把 repo 裡的程式碼拉上畫布,或把畫布上的設計推回程式碼。適合已經有外部 agent 工作流的人。

實務上三者是接力而不是二選一。官方給的路線是:先在 Figma Design 用 agent 把意圖釐清,送到 Make 生行為,再嵌回 Design;反過來從 Make 起手也行,把 frame 複製到 Design、用 agent 迭代、再送回去。至於 MCP 那條線怎麼跑,我在 Codex × Figma 雙向工作流 那篇有完整實測。

CHAPTER 08 · TAKEAWAYS

現在該做的三件事

先講不足的地方,才公平。它還在 beta,官方自己列的待補項目包括設計系統支援要加強、跨檔案搜尋能力要擴,還有整體體驗要再磨。AI credits 的計費方式正式上線後才會明朗,現在沒人能算出真實成本。另外,agent 會不會自己發布資產到共用 library?不會,那一步永遠留給你按。

扣掉這些,我會建議照這個順序動:

一、趁 beta 不扣點數,拿一個真實但不緊急的專案去操它。不要拿玩具檔案測,玩具檔案沒有你的設計系統,測不出真實體感。

二、去修你的元件命名跟變數。這件事以前的回報週期是幾個月,現在是下一次下指令。你的檔案有多整齊,直接決定它給你的東西能不能用。

三、挑一件你每週都要重講一次的事,寫成 Skill。不用一次寫十條,一條就好。你會很快發現「把判斷寫下來」這個練習本身,比那條指令值錢。

關於 AI 到底該接手什麼、什麼該留在自己手上,我另外整理過 一張判斷地圖,可以搭著看。

這波工具更新真正重新定價的東西,其實不是畫圖速度。速度已經便宜到不值得拿來比了。被重新定價的是兩件很不性感的事:你的檔案有多整齊,以及你的判斷寫不寫得下來。前者決定 AI 幫得上你多少,後者決定你能不能把自己複製給團隊。這兩件事都不需要等 beta 開放,今天就能開始做。

RELATED READS · 延伸閱讀

Figma Config 2026 重點懶人包:六大發布、上線時間、設計師先學哪個?

一次看完這場發表會的全部更新與優先順序。

閱讀 →

Figma Code Layers 是什麼?程式碼變成設計素材的完整教學

agent 生完設計圖層之後,下一步就是它。

閱讀 →

Figma Motion 怎麼用?核心能力、製作流程與把動效做好看的實戰原則

畫布上多了時間軸之後,動效不必再外包給別的軟體。

閱讀 →

Figma Shaders 是什麼?一句話生成全息箔、噪點質感的 AI 材質完整教學

agent 幫你寫 shader 的那條線,實際做起來長這樣。

閱讀 →

Figma Weave 工具是什麼?20+ AI 圖像工作流一鍵進 Figma 的完整解析

影像端的那一半,跟 agent 是同一個 Tools 分頁的鄰居。

閱讀 →

Figma Make 現在能改你的 production code:本機程式碼 beta 解析

接力棒交到 Make 手上之後會發生什麼。

閱讀 →

AI 會取代 UI/UX 設計師嗎?2026 想轉職的人,問題從來不在這

當畫圖變便宜,剩下值錢的是什麼。

閱讀 →

EXTRA · 官方資源

Figma 官方發表文|The Figma design agent is here →
Config 2026 更新|自製工具、外部 context 與 Skills →
Figma Community|Agent Playground 練習檔 →
Figma 說明中心|在設計檔案裡使用 agent →
100 種 Figma 設計的方法

COURSE

100 種 Figma 設計的方法

agent 讀得懂的檔案,是你先整理好的檔案。元件、變數、設計系統的底子從這裡打。

了解課程 →
AI 覺醒設計應用攻略

SUBSCRIPTION

AI 覺醒設計應用攻略

AI 工具每週都在更新,我幫你過濾雜訊,只留對設計師真正有用的應用。

了解訂閱 →

常見問題

Q:Figma Agent 跟 Figma Make 差在哪?

A:agent 產出的是設計圖層,在 canvas 上用你的設計系統把流程、狀態、文案與結構講清楚;Make 產出的是程式碼圖層,負責把互動行為做出來。官方建議的路線是先用 agent 釐清意圖,再送到 Make 生行為,最後嵌回 Figma Design。

Q:免費方案可以用 Figma Agent 嗎?

A:不行。開放 beta 限 Professional、Organization、Enterprise 三種方案的 Full seat。Collab、Dev、View 席次可以在自己的草稿檔裡使用,免費的 Starter 方案不在支援名單內。

Q:用 agent 會消耗 AI credits 嗎?

A:beta 期間免費、不扣點數,正式上線後才開始計費。另外要分清楚:使用別人做好的外掛或 shader 在所有方案都免費,花點數的是「請 agent 幫你做一個」這個動作。

Q:它會照我的設計系統做嗎?

A:會,但要你指路。選定要參考的 library,它就用那套樣式、元件與變數;也可以用 @ 直接點名特定的 token 或元件。沒指定的話它會拿你最近、最常用的元件當起點。它不會自己把新資產發布到共用 library,那一步留給你。

Q:Skills 是什麼?跟一般提示詞差在哪?

A:Skills 是把你反覆使用的提示存成斜線指令,還能發布給整個團隊共用。差別在於一般提示詞用完就散了,Skills 把你的判斷變成團隊資產,別人打一個指令就能複製你的思考方式。

Q:Figma Agent 跟 MCP server 要選哪一個?

A:不是二選一。在畫布上工作就用 agent,它內建、而且對你的設計系統有更多 context;需要把 repo 裡的程式碼拉上畫布,或把畫布上的設計推回程式碼,就走 MCP server 與 use_figma。

Q:新手要從哪裡開始練?

A:先去玩官方的 Agent Playground 檔案,裡面有一步步的引導任務。摸熟之後,拿一個真實但不緊急的專案下手,別用玩具檔案——玩具檔案沒有設計系統,測不出它真正的實力。