Figma AI 完整教學：從 Make 生草稿到 MCP 交付，設計流程到底變了什麼

早上十點，台北一家 SaaS 新創的設計師打開 Figma，準備做下一版的訂閱方案頁。過去她會先開一張空白畫布發呆二十分鐘，現在她打了一段 prompt，選了公司的設計系統，四十秒後畫面上出現三個佈局方向。

她盯著看了三秒，說了一句：「都不對，但我知道要往哪裡改了。」

這句話大概就是 2026 年 Figma AI 的真實價值——它不會幫你做出對的設計，但它能非常快地讓你看到「不對」長什麼樣子。而對設計工作來說，這件事的價值被嚴重低估了。

Figma 的 AI 現在到底有哪些東西

先把地圖攤開。Figma 在 2026 年的 AI 功能已經橫跨內容生成、圖像編輯、智慧搜尋、UI 草稿、程式碼交付到整站建立，主要包含這幾塊：

畫布上的設計代理：直接在你的畫布上生成 UI，而不是丟給你一張圖片。

Make：prompt 轉程式碼，從一段描述產出可運作的方向。

First Draft：快速生出 UI 佈局草稿。

圖像生成與內容取代：生成圖片，以及把設計稿裡的假字換成像樣的內容。

Auto layout 建議：自動判斷排版結構。

MCP Server：給編碼代理使用，讓 AI 寫程式工具能讀懂你的設計檔。

Skills：自訂代理的指令，等於教它你們團隊的做事方式。

Sites：發布網站。

Draw：AI 輔助的插畫繪製。

Buzz：品牌內容產出。

清單很長，但實務上會天天用到的其實只有三到四個。以下是我建議的實際流程。

步驟一：發想階段用 Make 或 First Draft 生三到四個方向

不要一開始就想生出「對的那個」。這是多數人用 AI 設計工具的第一個錯誤——他們寫一段很長的 prompt，期待一次到位，然後對結果失望。

正確的用法是量產方向。實際做法：

打開 Figma Make，針對新功能生成幾個佈局選項。prompt 裡要寫清楚兩件事：使用者需求是什麼，以及選擇你的設計系統。第二件事很多人會漏，但它決定了產出能不能用——沒指定設計系統，AI 會給你一套完全陌生的顏色與元件，看起來漂亮但跟你的產品毫無關係。

生完之後別急著挑最好看的。挑「結構最接近你想要的」那一個，視覺可以之後改，結構錯了整個要重來。

我自己的習慣是生四個，然後問自己：如果只能留一個，我會留哪個？留完之後再問：我為什麼留它？第二個問題的答案，通常才是這次設計的真正需求。

步驟二：把生成的框架搬進工作檔，先整理圖層

這一步最無聊，也最多人跳過，然後在交付時付出代價。

把生成的 frames 拉進你的工作檔之後，執行 Rename layers 工具，讓開發者讀得懂你的檔案。AI 生成的圖層名稱通常是 Frame 427、Group 88 這種東西，工程師打開只會想哭。

這件事在 2026 年比以前更重要，原因是 MCP。當編碼代理會直接讀你的設計檔時，圖層命名不再只是禮貌問題——它是輸入品質問題。命名亂七八糟，AI 生出來的程式碼結構也會跟著亂。

步驟三：用 Replace content 換掉假文案

點 Replace content，把剩下的佔位文字換成像樣的真實資料。

這一步的價值不在省時間，在於揭露問題。假字（Lorem ipsum 或「標題文字」）會讓所有設計看起來都很完美，因為每個欄位的長度都剛剛好。換成真實資料以後，你才會發現「這個中文標題兩行就爆版了」、「這個價格欄位放不下四位數加幣別」。

台灣設計師尤其要注意這一點：中英文的字寬差異很大，用英文假字排出來的版面，換成繁體中文常常整個垮掉。愈早發現愈好。

步驟四：交付時把 MCP 接上

如果你的團隊有在用 AI 寫程式工具，Figma 的 MCP Server 值得設定。它讓編碼代理能取得設計檔的結構化資訊——間距、顏色、元件層級，而不是只能看一張截圖猜。

這對台灣常見的小團隊特別有意義。多數台灣新創沒有專職的前端，設計交付之後往往是全端工程師邊查邊刻，落差就是在這裡產生的。把 MCP 接上，至少讓 AI 拿到的是結構而不是像素。

搭配 Cursor 或其他 AI 編碼工具使用時，工作流程會變成：設計在 Figma 定案 → MCP 提供結構 → 編碼代理產出第一版程式碼 → 工程師修。中間那段「照著圖慢慢刻」的時間會明顯縮短。

進階技巧：用 Skills 教它你們團隊的規矩

Skills 讓你自訂代理的指令。這個功能被討論得不多，但它是把 AI 從「通用工具」變成「你們團隊的工具」的關鍵。

實際可以寫進去的東西例如：我們的按鈕一律用圓角 8、我們不使用純黑當文字色、表單錯誤訊息一律放在欄位下方、間距只用 4 的倍數。

把團隊的設計規範寫成 Skills，等於讓每次生成都自動遵守。這比事後一個個改快太多，也讓資淺設計師的產出品質變得比較穩定。

注意事項：三件 Figma AI 現在還做不到的事

第一，它不懂你的使用者。 AI 生的介面是「看起來合理的介面」，不是「你的使用者需要的介面」。它沒看過你的客服工單、沒讀過你的使用者訪談。這部分沒有捷徑。

第二，無障礙設計仍要人工把關。 色彩對比、鍵盤操作順序、螢幕閱讀器的標籤，AI 產出的東西通常過不了檢查。台灣的公部門專案有無障礙規範要求，這一塊千萬不要相信 AI 的預設值。

第三，真實狀態的設計。 空狀態、載入中、錯誤、超長文字、權限不足——這些「不漂亮但必要」的狀態，AI 幾乎不會主動幫你生。而它們往往佔了實際開發工時的一半。

還有一件事要講：商用前要確認生成內容的權利歸屬與素材來源。比較安全的做法是把 AI 產出當結構草稿，視覺元素仍使用自有或有明確授權的素材。

台灣設計師的實務建議

我跟幾位在台灣接案與在企業內的設計師聊過，歸納出兩個實際的用法差異。

接案設計師最有感的是提案階段。過去給客戶看三個方向要花兩天，現在半天能生出六個，然後把省下的時間拿去做真正會被記住的那一版。但要小心一個陷阱：客戶會因此期待你「反正很快」，報價與時程要重新談，不然你只是把自己的利潤讓出去。

企業內設計師最有感的是跟工程協作那一段。台灣公司的設計與工程之間常常沒有中間層，MCP 加上圖層整理，能把交付的摩擦壓下來。

至於「AI 會不會取代設計師」——我的看法很簡單：它取代的是「把腦中已經想好的東西畫出來」這個動作，而那本來就是設計工作裡最不值錢的部分。想不清楚要做什麼的設計師，用了 AI 只會更快地產出更多沒用的東西。

如果你想從更基礎的地方開始，可以先看 AI 圖片生成工具 的整理，或到 提示詞範本 找可以直接套用的設計類 prompt。想把 AI 導入完整工作流程的話，任務指南 裡有依情境整理的做法。

TheAI學院 評語

Figma 這一輪的更新，方向其實很一致：它沒有想取代設計師的判斷，而是把「從零到有」那段摩擦拿掉，同時把設計與程式碼之間的斷層補起來。MCP 那一塊是我認為最被低估的——當 AI 開始直接讀設計檔，設計檔的品質就變成工程品質的上游。

評語：Figma AI 讓「畫得快」變成標配，於是「想得對」變成唯一的差異。台灣設計師該擔心的不是被 AI 取代，是繼續把自己定位成「執行者」——那個位置確實正在消失。

給台灣讀者的具體建議：這週挑一個真實案子，強迫自己用 Make 生四個方向，然後花時間寫下「為什麼都不對」。你會發現這份清單比那四個設計有價值得多，因為它就是你的設計判斷——而那是 AI 目前完全複製不了的東西。另外，務必花二十分鐘把團隊的設計規範寫成 Skills，這是投報率最高的一次性投資。

資料來源

• Use AI tools in Figma Design – Figma Learn Help Center
• Figma AI Design Generator（官方產品頁）
• Figma AI in 2026: Everything it can do — and what it still can't（LogRocket）

依公開資訊整理、以官方說明為準。功能與方案內容可能隨版本更新調整，實際以 Figma 官方公告為準。