---
title: "Figma Agent 是什麼？直接在 canvas 上動手的設計 AI 完整解析與用法"
slug: figma-agent-complete-guide
url: https://rar.design/posts/figma-agent-complete-guide
published_at: 2026-08-02
modified_at: 2026-08-02
author: "設計師 Riven"
category: "AI 設計"
access: public_access
---

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

> 開放 beta 上線，它讀你的元件與變數、能被 @ 指定，還能把你的判斷變成 slash command

By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2026-08-02

FIGMA · AI 設計 · 2026▲ Figma Agent 不是開一個新分頁生一張圖，而是在你既有的檔案上直接動手改。圖片來源：Figma 官方QUICK ANSWERFigma 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 / 24canvas 對第三方 agent 開放透過 MCP server 的 use_figma，外部 agent 可以直接在 Figma 檔案裡建東西；同場推出 markdown 格式的 skills。2026 / 05 / 20Figma 自家的 agent 進入 beta內建在 canvas 與左側欄，主打探索方向、批次雜務、處理回饋三件事。2026 / 06 / 24Config 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 猜你想要什麼，是讓你用最短的方式把答案講清楚。沒特別指定的時候，它會拿你最近、最常用的元件當起點。這個預設值蠻誠實的——它承認自己不知道你在做什麼，只好從你的使用習慣猜。所以檔案越乾淨，猜得越準。▲ 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／ENT0BETA 期間消耗的 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 檔案、網頁搜尋、Libraries、連接器與 Skills 六種 context 來源。圖片來源：Figma 官方這裡有一個心態上的轉換值得講。多數人用 AI 工具的習慣是「把提示詞寫好」，但提示詞寫再漂亮，也補不上它不知道的事實。真正拉開差距的是你有沒有把環境準備好——這件事我在 Loop Engineering 那篇講過完整的思路，換到 Figma 上一樣成立：與其花二十分鐘雕一句提示，不如花五分鐘把該給的檔案跟連結掛上去。CHAPTER 06 · SKILLS把你的判斷，寫成一條全隊都能跑的指令這是整包更新裡最少人討論、但我認為影響最久的一塊。Skills 讓你把反覆用的那段提示存成一個斜線指令。一種特定的視覺語言、一套改稿的檢查順序、一個你已經想通但每次都要重講一遍的流程——存起來，變成 /contrast-improvements 這種東西，然後發布給團隊。▲ 自訂 Skills 變成斜線指令，並可以發布給整個團隊使用。圖片來源：Figma 官方停下來想一下這代表什麼。過去一位資深設計師的產出，是他畫的那些畫面；他的判斷力只有在 crit 的時候會外流一點點，然後隨著他離職一起消失。現在他的判斷可以被寫下來、被發布、被整隊每天執行。他的產出從作品變成了工具。“會被 AI 稀釋掉的，是那些說不出所以然的手感；會被放大的，是寫得下來的判斷。還有一個容易被忽略的設定：agent 的對話紀錄預設對同檔案的協作者是公開的。也就是說，別人怎麼問、怎麼一步步逼近答案，你看得到。這其實是設計團隊很稀缺的東西——平常你只看得到同事的成品，看不到他的思路。當然，需要私密的時候可以關掉。CHAPTER 07 · COMPARED TOAgent、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 →COURSE100 種 Figma 設計的方法agent 讀得懂的檔案，是你先整理好的檔案。元件、變數、設計系統的底子從這裡打。了解課程 →SUBSCRIPTIONAI 覺醒設計應用攻略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 檔案，裡面有一步步的引導任務。摸熟之後，拿一個真實但不緊急的專案下手，別用玩具檔案——玩具檔案沒有設計系統，測不出它真正的實力。