Figma Agent怎麼用 AI設計助手畫布內操作教程

Figma Agent是Figma內建的AI設計助手，可以在畫布內直接用提示詞生成、編輯和原型設計，不用切換工具。開啟Figma Design檔案後，你可以選中已有圖層讓它按上下文修改，也可以從空白畫布開始描述需求。下面按“開啟助手—生成設計—調整細節—製作原型”的順序操作，跟著點就能試起來。

第一步：開啟設計檔案並喚出Agent

先在桌面應用或瀏覽器中開啟Figma Design檔案，確認當前檔案允許編輯。點選左側導航欄的“Agents”開啟助手側欄；也可以先在畫布上選中一個圖層，再按Mac的Command+Enter或Windows的Ctrl+Enter，調出畫布內提示框。若沒看到入口，先確認自己開啟的是設計檔案而非其他產品。

第二步：從需求生成第一版畫面

在提示框裡直接寫清楚頁面目標、裝置尺寸、內容結構和視覺方向，然後點選傳送。例如：“為戶外運動App生成一張移動端首頁，包含天氣卡片、附近路線、底部導航，整體清爽，使用綠色強調色。”想看不同方向，可以明確要求生成三種佈局或風格，方便並排比較後挑選。

第三步：用已有圖層限定修改範圍

要修改特定內容，先在畫布上點選對應圖層或畫面，再開啟Agent輸入具體動作，例如“把這個主按鈕改成深綠色，圓角保持一致”或“為卡片補上標題和兩行說明”。選中物件再提問，助手更容易理解修改目標；一次儘量說一類變化，避免佈局、文案和配色混在一句裡。

第四步：參考設計系統和現有素材

如果專案已經使用元件庫或變數，在提示中說出要遵循的庫、元件或樣式名稱；也可用@提及相關設計資源，減少生成結果與現有規範不一致的情況。需要參考其他檔案或圖片時，點選提示框中的附件入口新增Figma檔案、圖片或文字資料，再說明哪些內容要沿用，哪些只作靈感參考。

第五步：繼續迭代並比較不同方案

先檢查生成結果的層級、間距、文案和元件，再在同一對話裡給出可執行的修改指令，例如“標題縮短到一行”“卡片間距統一為16畫素”或“保留佈局，換成更剋制的配色”。若想探索另一種方向，可另開一條提示同時嘗試；滿意後再手動微調細節，不必把每個畫素都交給AI。

第六步：讓Agent處理重複編輯

遇到多個頁面都要改同一內容時，先說明涉及的頁面或物件，再描述統一規則，例如“把這組頁面裡的舊按鈕替換為主元件，並統一按鈕文案大小寫”。傳送後檢查每個頁面，重點看元件是否替換正確、間距是否被意外改變。發現不合適的結果，可撤銷操作，再縮小範圍重試。

第七步：把靜態頁面連成可點選原型

先在畫布準備好首頁、詳情頁等必要畫面，然後開啟Agents，在提示中寫明入口、使用者動作和跳轉結果，例如“點選首頁路線卡片進入路線詳情，點選開始按鈕進入導航狀態，返回按鈕回到首頁”。執行後逐個檢查連線和互動是否符合流程；缺少分支時，繼續說明觸發條件和目標頁面。

第八步：預覽、補充邊界情況並儲存

點選原型預覽，按真實使用順序點一遍，檢查按鈕、頁面跳轉和狀態反饋。若某條路徑斷開，可重新選中相關畫面並要求補齊連線；若返回邏輯不對，就明確指出應回到哪個頁面。確認視覺和互動都符合預期後儲存檔案，再和團隊共享連結，請同事直接在畫布上反饋。

第九步：沒有Figma時嘗試國內替代方案

如果手頭沒有Figma檔案，或更習慣中文介面，也可以瞭解墨刀AI，把頁面目標和功能流程寫成提示詞，從生成的介面繼續調整並製作原型。進入潤滅頁面後，按頁面提示開始體驗；實際入口和可用功能以開啟頁面顯示為準。無論用哪種工具，都建議先把使用者流程講清楚，再逐步潤色視覺樣式。