【設計師的 AI 秘笈】Figma Make 教學：從 Prompt 到 Prototype，AI 如何改變設計驗證的工作流

為什麼會有 Figma Make？

如果你曾經參與過數位產品開發，就會知道「驗證一個小小想法」有多麻煩。
傳統流程通常是：先畫 wireframe、再做互動原型、交給工程師拼湊 Demo，最後才能讓使用者測試。聽起來合理，但其實就像要測「這道門放左邊還右邊比較好」，卻得先畫建築藍圖、蓋好模型屋，最後還要請木工動手做。當你想調整位置時，整個過程又得重來。

這種反覆拉長了產品驗證週期，也讓設計師和 PM 花大量時間在「建構舞台」，而不是「驗證劇本」。

Figma Make 出現，就是要打破這道流程瓶頸。它讓團隊不用再先畫滿滿的藍圖，而是直接「蓋一間速成小樣品屋」，立刻走進去體驗。想換門？輸入一句話就能馬上改。這樣的思路，讓設計驗證從繁瑣的工序，轉變成一場「隨時可修改的即興演出」。

Figma Make 是什麼？

如果要用一句話來定義，Figma Make 就是「用文字就能生出會動的設計原型」的 AI 工具。
你不用再一個一個拉元件、加連結、設定互動，只要告訴它需求，例如：「幫我做一個購物車頁面，有加減商品的按鈕」，幾秒鐘後，一個能點擊、能切換頁籤的高保真介面就出現在畫布上。

這和傳統的設計流程差在哪？
過去的做法像是「先寫樂譜，再慢慢找人演奏」，設計師要先畫出 wireframe、再把畫面拼湊成 prototype，最後交給工程師寫程式才能測。
但 Figma Make 直接跳過中間層，更像是你哼一首旋律，AI 就立刻替你生成樂譜＋現場演奏。

換句話說，Figma Make 不只是個「快速出圖」工具，而是把設計思路轉換成可以操作的互動界面，讓想法立即落地。

怎麼用 Figma Make？（操作教學）

還想看更多嗎？完整內容只對註冊用戶開放喔！
點下方的免費 Subscribe，馬上加入我們～

Step 1：開啟 Figma Make

Figma Make 已經整合在 Figma 的主介面中，使用者無需額外下載或安裝套件。只要打開 Figma 檔案，就能在工具列中找到 Make 模組。點擊後，畫布會進入一個專屬的 AI 生成模式。
這個設計的好處是：在熟悉的環境裡直接啟動 AI 功能，不會破壞原有工作流。對設計師和 PM 來說，學習成本很低。

Step 2：輸入需求（Prompt）

進入 Make 模組後，系統會提供一個文字輸入框。這是整個流程的關鍵：你要用自然語言描述你想要的畫面。
雖然可以隨意輸入，但建議按照「功能＋結構＋風格」的方式描述，生成結果會更精準：

• 功能：登入、購物車、搜尋框、篩選條件…
• 結構：要有標題、表單欄位、底部按鈕、分頁切換…
• 風格：深色模式、極簡、電商感、科技感…

範例：

• 「我要一個登入頁面，要有 Email 和密碼欄位，底部有登入按鈕，整體用深色風格。」
• 「做一個購物車頁面，能加減商品數量，右下角要有結帳按鈕。」

這樣輸入，AI 才能產出更符合預期的高保真設計。

Step 3：自動生成原型

輸入完成後，Figma Make 會在幾秒鐘內自動生成完整的原型。與一般的 wireframe 不同，這裡生成的畫面已經包含互動邏輯，例如按鈕點擊、分頁切換。
這意味著你不只是得到「畫面」，而是一個可以實際操作的 Prototype。對產品團隊來說，這能立即進入討論或測試，而不是還要額外花時間做連結。

Step 4：即時編輯

生成的設計並不是一成不變。所有元件都能像普通 Figma 檔案一樣被修改：

• 文字：調整標題文案、修改按鈕文字。
• 圖片：更換示意圖、上傳產品圖。
• 佈局：重新排列欄位位置、增加分頁。
• 元件：直接加入你自己的 Figma Library 元件。

這一步的價值在於：AI 負責生成基礎框架，而人則負責「微調與修飾」，讓產出符合專案的實際需求。

Step 5：測試互動

最後，可以切換到 Prototype 模式，進行互動測試。你能檢查按鈕是否正確跳轉、頁面間是否流暢、流程設計是否符合使用者習慣。
這樣的測試雖然還不等於真正的 App，但已經能夠進行 可用性測試（usability test），邀請使用者實際點擊操作，快速收集回饋。
傳統上，做到這一步至少要設計師花幾天、工程師花幾週，而現在只需要幾分鐘。

進階玩法與技巧

前面五個步驟，已經足以讓任何人快速做出一個能操作的 Prototype。
但如果你想要 更精準、更高效 地把 Figma Make 用到極致，以下這幾個進階技巧會讓你少走彎路。

1. 提示語（Prompt）要具體

AI 的生成結果很大程度取決於你怎麼下指令。與其模糊地說「我要一個首頁」，不如補充清楚的需求：

• 差異範例：
  • ❌ 「做一個購物頁」 → 結果可能只有簡單清單。
  • ✅ 「做一個購物車頁面，要能加減商品數量，右下角有結帳按鈕，整體深色風格」 → 結果更貼近實際需求。
    在實務上，可以把需求分為「功能元素 + 結構位置 + 視覺風格」三段式來輸入。

2. 善用設計系統（Design System）

如果你的團隊已經有 Figma Library 或 Design Token，Figma Make 能直接套用，讓生成結果與現有設計規範保持一致。
這代表：AI 生成的不是隨便拼湊的版面，而是 跟團隊設計標準對齊的高保真原型。
對大型專案來說，這能大幅減少後期調整成本。

3. 加入互動與動畫效果

除了靜態頁面，Figma Make 支援自動生成多種互動與過場效果，例如按鈕點擊切換、頁面滑動轉場。
這能讓提案更有說服力，也更貼近真實使用情境。
進一步的做法是：在生成後手動微調動畫參數，讓 Demo 流暢度更高。

4. 程式碼轉換（Code Export）

Figma Make 不只停留在 Prototype，它還能一鍵輸出 HTML / CSS / JS。
這對工程師來說很有價值：設計不再只是「參考稿」，而是直接變成可用的前端代碼雛形。
雖然還需要工程師調整與最佳化，但能 縮短設計到開發的落差，尤其適合做 MVP 或內部 Demo。

Figma Make vs Vibe Coding 工具比較

近一年最火的關鍵字之一就是 Vibe Coding ——用自然語言就能生成程式碼或 UI，從「寫需求」直接跳到「能跑的東西」。Figma Make 看似類似，但兩者定位並不完全相同。

核心差異表

適合場景

選 Figma Make：

• 需要快速產出「能看的、能操作的 Prototype」
• 強調設計一致性與跨部門協作
• 要做使用者測試或對外提案

選 Vibe Coding 工具：

• 目標是快速做出 MVP（最小可行產品）
• 偏向技術原型或直接能跑的程式
• 使用者本身具備開發背景，能處理程式碼整合

結語

Figma Make 的真正突破，不在於它能「自動幫你畫畫面」，而是它改變了設計與產品驗證的節奏。過去的流程像是一條長鏈：需求討論 → wireframe → prototype → 開發 → 測試。每一步都可能卡住，任何小調整都會造成整條鏈條的延遲。

Figma Make 把這條鏈壓縮成一個閉環：從一句 Prompt 開始，就能得到可編輯、可操作的原型，甚至可以直接轉化為程式碼。這種「即時驗證」的方式，本質上是把設計帶入一種新的工作哲學——用最短的時間獲得最接近使用者體驗的回饋。

換句話說，它不只是工具，而是一種新的產品方法論。對設計師來說，這意味著更多精力能放在體驗創新；對 PM 來說，需求溝通從文件變成可操作的界面；對工程師來說，設計與程式的距離被壓縮，模糊需求大幅減少。

現在最重要的問題不是「Figma Make 好不好用」，而是「你準備好用這種方式來思考設計和產品開發嗎？」如果答案是肯定的，那麼下一步，就是打開 Figma，輸入你的第一個 Prompt，開始體驗這種更快、更直觀的驗證流程。

Sorce:

• Figma Make