Figma Make AI 設計教學：用 AI 自動生成 UI 介面的完整指南

如果你最近有在用 Figma，應該已經注意到介面上多了一個讓人好奇的按鈕——Make。這是 Figma 在 2025 年正式推出的 AI 設計功能，簡單來說，你只要輸入一段文字描述，它就能幫你生成完整的 UI 介面。聽起來很神對吧？我第一次用的時候也覺得有點不可思議，但用了一陣子之後，發現它真的能大幅改變設計工作流程。

這篇文章會從零開始，帶你了解 Figma Make AI 到底怎麼用、有哪些實用技巧，以及它在實際專案中能幫上什麼忙。不管你是剛接觸 Figma 的新手，還是已經用了好幾年的老手，相信都能從中找到有用的東西。

Figma Make AI 是什麼？

Figma Make 是 Figma 內建的生成式 AI 功能，核心概念很簡單：用自然語言描述你想要的介面，AI 就會幫你生成對應的設計稿。它不只是丟出一張圖片而已，生成的結果是真正可編輯的 Figma 元件，包含圖層結構、Auto Layout、甚至會套用合理的間距和字型大小。

跟市面上其他 AI 設計工具不同的是，Make 是直接整合在 Figma 編輯器裡的，你不需要跳到別的工具再把設計搬回來。這個無縫整合的體驗，老實說是我覺得它最大的優勢。

如何開始使用 Make 功能

要使用 Make，你需要確認幾件事：

• 你的 Figma 帳號是 Professional、Organization 或 Enterprise 方案（免費版目前有限制次數的體驗額度）
• 使用最新版的 Figma 桌面應用程式或瀏覽器版
• 在設計檔案中，你可以透過右側面板或快捷鍵 Ctrl/Cmd + K 開啟 Make

開啟之後，你會看到一個輸入框，直接輸入你想要的介面描述就好。比方說你可以打：「一個電商產品頁面，包含商品圖片、價格、加入購物車按鈕和評價區塊」，Make 就會在幾秒內生成一個完整的頁面設計。

撰寫有效提示詞的技巧

Make 的輸出品質，很大程度取決於你給它的提示詞（prompt）。以下是我實測後整理出來的幾個重點：

1. 具體描述頁面結構

與其說「做一個登入頁面」，不如說「一個登入頁面，上方有品牌 Logo，中間是 Email 和密碼輸入框，下方有登入按鈕和忘記密碼連結，最底部有 Google 和 Apple 第三方登入選項」。描述越具體，生成結果越接近你的預期。

2. 指定風格和色調

你可以在提示詞中加入風格關鍵字，像是「極簡風格」、「深色主題」、「圓角卡片設計」、「使用藍紫色漸層」等等。Make 對這類視覺風格的描述理解度相當不錯。

3. 參考現有設計系統

如果你的專案已經有建立 Figma Variables 與 Design Tokens，Make 可以參考這些設定來生成更一致的設計。這在團隊協作時特別有用，能確保 AI 生成的元件符合你的設計系統規範。

4. 分步驟生成

不要試圖一次生成整個 App 的所有頁面。我建議一次處理一個畫面或一個區塊，生成後再手動調整和組合。這樣你對最終結果的掌控度會高很多。

實際應用場景

講了這麼多理論，來看看 Make 在實際工作中怎麼派上用場。

快速原型製作

這大概是 Make 最直接的用途。以前做一個中保真原型可能要花半天到一天，現在用 Make 生成基礎框架，再花一兩個小時微調，就能拿出一個像樣的原型給客戶或團隊看。省下來的時間拿去做使用者研究或測試，整個專案效率直接提升一個層級。

設計探索與發想

當你對某個頁面的佈局還沒有明確想法時，可以用 Make 快速生成好幾個不同版本來比較。我自己的做法是先用不同的提示詞生成三到五個方案，從中挑出喜歡的元素再整合成最終設計。這種方式比從空白畫布開始發想要有效率得多。

響應式設計輔助

Make 生成的元件通常已經有基本的 Auto Layout 結構，這表示你在調整成不同螢幕尺寸時，不需要從頭重新排版。當然，細節還是需要手動處理，但至少省去了重複建立佈局框架的功夫。

將設計稿交付開發

當你用 Make 生成的設計稿完成後續調整，就可以搭配 Figma Sites 的功能，直接把設計稿轉換成可上線的網頁。這個從設計到開發的流程整合，是 Figma 生態系中最讓我驚豔的部分。

Make 的限制與注意事項

雖然 Make 很好用，但它不是萬能的，有幾個地方要注意：

• 複雜互動邏輯：Make 生成的是靜態介面，它不會幫你設定 Prototype 連線或微互動。這部分還是得自己來。
• 品牌一致性：如果你沒有事先設定好 Design Tokens 和 Variables，AI 生成的配色和字型可能每次都不一樣。建議先把設計系統建好再開始大量使用。
• 圖片與內容：生成的設計中，圖片通常是 placeholder，文字內容也是 AI 生成的範例文案。正式使用前記得替換成真實素材。
• 細節微調必要：AI 生成的設計大約能達到七八成的完成度，剩下的二三成——像是精確的對齊、特定的互動狀態、無障礙設計考量——還是需要設計師的專業判斷。

進階技巧：讓 Make 發揮最大效益

用了幾個月之後，我歸納出幾個能讓 Make 更好用的進階技巧：

善用選取範圍生成：你可以先選取畫面上的某個區域，再啟動 Make。這時候 AI 會根據你選取的範圍和周圍的上下文來生成內容，結果會更貼合你現有的設計。

疊代式修改：生成後不滿意的地方，可以選取該區塊，再用 Make 針對局部重新生成。比方說你覺得 Header 不好看，就選取 Header 區域，輸入「重新設計這個導航列，改成透明背景加上漢堡選單」。

結合元件庫：如果你的團隊有維護元件庫，Make 生成的結果可以跟現有元件做替換。先用 AI 生成佈局框架，再把裡面的按鈕、輸入框等元素替換成你們自己的元件，這樣既能享受 AI 的速度，又能保持設計一致性。

多語系設計：在提示詞中指定語言，Make 就能生成不同語言版本的介面。做多語系產品的時候特別方便，你可以快速看到不同語言的文字長度對佈局的影響。

結語：AI 是工具，不是替代品

Figma Make AI 無疑是目前最實用的 AI 設計工具之一。它能幫你省下大量重複性的工作，讓你把時間和精力花在真正需要創意思考的地方。但說到底，AI 是加速器，不是自動駕駛。好的設計還是需要設計師去理解使用者需求、做出合理的設計決策、處理各種邊界情況。

我的建議是：把 Make 當成一個超級有效率的助手，讓它處理初始框架和重複性工作，然後你專注在策略思考、使用者體驗和細節打磨上。這樣的人機協作模式，才是 AI 時代設計師最理想的工作方式。

如果你還沒試過 Figma Make，現在就打開 Figma 玩玩看吧。相信我，一旦習慣了這個工作流程，你就回不去了。