延續上一篇提到 Figma 近期推出的 AI agent 功能正在 Beta 測試中，我很幸運地進入 Beta 使用群裡，實際體驗了一輪，並且整理它怎麼用、好不好用、哪些地方還不穩。希望跟大家分享這位設計助理到底能完成哪些工作任務。
- Figma 官方介紹頁是 The Figma agent is here
- 或者，看看我的文章介紹：Figma design agent：體驗全新的設計工作流程
我在體驗過程看到 Figma 跳出的問卷調查，旨在了解用戶對於新功能的使用感想。而從研究選項可以得知這次更新要解決的不是單一功能，而是優化整個設計流程。
問卷列出的使用情境，大致包含：
- 探索不同風格版本，例如配色、視覺感、版型變化
- 生成或整理 design system
- 從不同角度整理或套用回饋
- 補上更接近真實產品的內容
- 從截圖回推設計稿
- 在畫布上做大量精準修改
- 摘要畫布內容，整理成可執行的行動項目
接下來就一起看看，Figma AI Agent 如何讓提修改、改局部內容、整理留言、延伸下一版這些事情，都能在同一個畫布裡完成。
功能入口
Figma agent 目前主要有兩種使用方式。
第一種，是在側邊欄打開對話串，直接跟 agent 溝通。如果你有選取某個內容，該 layer 也會出現對話框裡面，然後可以針對它進行修改或討論。另外，每一次對話都會保留紀錄，可以持續討論同一個任務，也可以開啟多個對話，讓 AI 同步執行多個任務！
適合用來持續處理同一個任務。
第二種，是先在畫布上選取內容，然後點擊出現在右上角的 AI 圖示，就會出現像是 Comment 功能的輸入框，可以打字直接跟 AI agent 下指令讓它修改設計。
適合直接針對局部內容修改。
簡單來說，當你看到設計檔案裡任何想調整的內容，只要點它、打字寫下需求、按下送出，就已經把任務交辦給 Agent 了，接著在畫布可以看到執行結果，操作流程都在同一個視窗完成，非常方便！
先簡單看一下互動過程
Agent 在規劃的過程，有時候會顯示不同的選項讓用戶直接點選，就像是 Claude 的對話體驗，只要點擊選項就等於把下一個指令送出，Agent 就會繼續做事了。
當開始著手設計時，AI 會自動先在畫布上預留新內容的位置，顯示淡藍色的畫面並且已命名，而且這個狀態是可以被移動，妳可以同時手動整理畫布的內容。另外，我很喜歡這裡的動畫設計，邊緣的虛線會一直往前移動，還有右上角的星星會持續轉動，讓用戶在等待過程不那麼無聊。
設計完成後，就會看到淡藍色畫面被換上完稿的樣子，並且畫面會自動聚焦在產出結果的位置，還滿方便的，假設你在等待過程中已經滑到畫面其他位置，至少可以馬上回頭檢視 AI 產出的結果是否符合預期。
當然，如果對於 AI 設計的結果不滿意，只要回到對話裡面繼續討論和下指令就行。
實測主要功能
1. 設計提案：版面、配色等
由 Figma agent 規劃不同的設計方案，包含 Layout 調整、顏色搭配和設計風格等，就像下面截圖，他基於既有的設計，提出額外的三種配色方案，同時畫面 layout 沒有跑版，完全只有調整顏色，表現還不錯。
2. 統整留言回饋，規劃下一步
讓 Figma agent 直接讀取頁面上的留言，並整理出後續需要處理的內容。在團隊協作過程中，常常會針對設計討論並留下回饋，然後設計師要回頭一一整理留言，歸納、產出後續行動項目，真的是一份苦工，現在可以交棒給 Agent 先做初步歸納，大幅減少人工逐條拆解的負擔，也方便後續判斷哪些項目需要優先處理，哪些可以暫時保留。當然，也很適合在看完 Agent 產出的設計後，直接留下回饋，然後讓它自己去吸收和處理。
截圖是 Agent 根據我留下的回饋，按照相關脈絡重新整理成多個項目，並提供後續的評估與建議。
3. 建立 Design System、批次修改，降低維護檔案成本
Figma agent 可以協助整理 design system，包含建立 variables、styles 與 components。以 variables 來說，會涵蓋顏色、間距、圓角等可重用的設計值；components 則適合整理成按鈕、導航欄、標籤、卡片這類重複出現的元件，並且 components 可以建立不同的 style、state，像是 enable, disable 按鈕狀態，或者欄位是否為必填等。
接著，它也能自動將既有設計圖都套用設計規範，例如：將原本寫死的色碼改成對應的 design tokens，並逐步統一元件與樣式，降低後續維護設計檔案的成本。
我自己上週才花了至少半小時，手動一個一個調整設計圖細節，慢慢建立 variables、components 等內容；但這次改用 agent，類似範圍的調整大約在 5 分鐘內就完成，體感差異非常明顯。
3-1. 建立 Design System 效果
3-2. 批次修改檔案內容
我讓 agent 去盤點之前弄得亂亂的初稿設計檔案，對照後來新版的 Design System 色值變數，他找出上百個不一致的節點，並且提出規劃，引導我逐步確認改動方向，在我確認後自動執行所有改動。
AI agent 盤點結果會列出對應的節點內容，而點擊對話中的節點可以自動定位到畫布的對應位置，非常方便。
測試後發現的限制
- 不能直接在對話裡附圖：如果要讓 AI 參考圖片，圖片要先放到畫布上，選取圖片後和它對話，因為對話框本身不能直接附圖，comment 裡面的圖片也不會被它讀到。
- 小細節還是會漂移：例如在同一個畫面上讓它延伸不同情境版本時，有時候一些細節會跑掉。像是原本標題前面是星星 icon，到了另一個版本，icon 可能會變成月亮。它能跟上大方向，但不一定每次都能完整保留所有細節。
- 畫布移動後，留言定位可能受影響：如果 agent 直接移動畫布內容，原本掛在上面的留言有時候會對不到正確位置。這點在做大量修改時要特別注意。
跟 Figma Make 的主要功能差異
簡單來說，Figma Make 像是前端工程師，可以直接做出可互動的原型，如果你提出的指令是：「做一個 onboarding 走完的動畫」，它就會寫 React 程式刻出動畫。另一方面，Figma agnet 像是設計助理，可以檢查整份檔案的設計元件是否一致、批次修改套用的變數、文案等，你可以要求：「找出這頁與 design system 不一致的按鈕」，它就會全部列出來。
| 功能 | Figma AI Chat | Figma Make |
|---|---|---|
| 目的 | 設計協助、管理設計資產 | 建立可互動原型 |
| 輸出 | 畫面、元件、文案 | Prototype、互動 Demo |
| 動畫 | 提供建議 | 可直接產生 |
| 設計系統整理 | 強 | 弱 |
| 批次修改元件/文案 | 強 | 弱 |
| 互動流程設計 | 有限 | 強 |
| 互動流程執行 | 無 | 有 |
| React 程式產生 | 無 | 有 |
| 程式專案開發 | 無 | 有限 |
| 適合情境 | 設計維護、Design System | 驗證產品體驗、動畫、Prototype |
總結
Figma agent 把設計討論和修改放回同一個畫布裡。你可以直接在設計上提修改、請它整理留言、再讓它接著產生下一版，整個流程不用一直切換到其他工具。
對 PM、設計師、工程師來說，這會讓討論節奏明顯變快。以前比較像是先看稿、留回饋、等設計師回去改，再看下一版；現在則更接近在畫布上直接討論、直接修改、直接看結果。
雖然不是完全不用人工確認，但如果是畫布內的迭代、變體探索、局部修改，已經很適合拿來加快工作流程。
