Figma Make（AI）生成 UI 原型教學：從文字描述到可互動介面的實戰指南

第一次聽到 Figma 要出 AI 生成 UI 功能的時候，我心裡想的是「又一個噱頭吧」。結果實際用了 Figma Make 之後，我真的被驚豔到了。它不是那種隨便丟出一堆垃圾設計的工具，生成出來的介面品質真的有一定水準。今天就來分享怎麼善用這個功能。

Figma Make 是什麼？AI 設計新時代

Figma Make 是 Figma 內建的 AI 生成功能，你只要用文字描述你想要的介面長什麼樣子，AI 就會幫你生成對應的 UI 元件跟佈局。它不只是產出一張圖片而已，而是生成真正可編輯的 Figma 圖層，包含 Auto Layout、元件結構、甚至是基本的 Design Token。

這跟之前那些截圖轉 Figma 的工具完全不同層次。Make 生成的設計是結構化的，你可以直接修改文字、調整間距、換顏色，跟你自己手動畫的一樣靈活。

說到 AI 生成介面這個趨勢，A2UI 動態介面設計也是值得關注的方向。AI 正在改變我們設計介面的方式，而 Figma Make 可以說是目前最實用的入口。

開始使用：介面導覽與基本操作

Make 功能目前整合在 Figma 的主介面裡。你可以在工具列找到 Make 的按鈕，或是用快捷鍵叫出來。第一次使用會需要同意一些 AI 的使用條款。

基本操作流程很直覺：選一個 Frame（或是直接在畫布上），開啟 Make 面板，輸入你的描述，然後按下生成。通常幾秒鐘就能看到結果。如果不滿意，可以直接修改描述重新生成，或是在現有結果上做微調。

一個新手常犯的錯誤是描述太模糊，像是「做一個好看的頁面」。AI 不是通靈的，你給的資訊越具體，生成的結果就越接近你要的。

寫出好 Prompt 的技巧

寫 Prompt 是用好 Figma Make 最關鍵的技能。根據我的經驗，好的 Prompt 應該包含以下幾個要素：

一、明確的頁面類型。是登入頁、首頁、設定頁、還是商品詳情頁？先定義清楚。

二、主要功能區塊。列出這個頁面要有哪些功能，像是搜尋列、商品卡片、底部導航列等等。

三、風格描述。簡約風、科技感、可愛風？配色偏好？這些都可以寫進去。

四、目標裝置。手機 App、平板、還是桌面版？尺寸不同，佈局也會不同。

舉個好 Prompt 的例子：「一個 iOS 電商 App 的首頁，頂部有搜尋列和分類 icon，中間是橫向滾動的促銷 banner，下面是兩欄商品卡片網格，底部有五個 tab 的導航列。風格簡約現代，主色調用深藍配白色。」

實戰演練：生成一個電商 App 首頁

讓我們用上面那個 Prompt 實際操作一次。開啟 Figma，建立一個 iPhone 15 Pro 尺寸的 Frame（393 x 852），然後打開 Make 面板。

把描述貼上去，按下生成。通常第一次的結果會有七八成的完成度，整體佈局跟元素位置都還不錯，但細節上可能需要調整。比如說商品卡片的圓角可能不是你要的、字型大小可能偏大或偏小。

這時候你有兩個選擇：一是直接在 Figma 裡手動修改（畢竟生成出來的都是可編輯圖層），二是在 Make 面板裡修改描述重新生成。我個人偏好兩者混合使用——大的佈局調整用重新生成，小的細節修改直接手動改。

微調與迭代：讓 AI 生成更精準

Make 支援在現有設計上做追加描述，這個功能超好用。比如你對整體佈局滿意，但想把商品卡片改成三欄，你可以選中卡片區域，然後輸入「把商品網格改成三欄，卡片更緊湊」。AI 就會只修改你選中的區域，其他部分保持不變。

另一個很實用的技巧是用截圖當參考。你可以上傳一張你喜歡的設計截圖，然後告訴 Make「參考這張圖的佈局風格」，AI 會分析截圖的結構來生成類似的設計。注意是「類似」不是「複製」，生成出來的是全新的設計。

如果你的團隊有在用 Design Tokens，Make 也能配合。你可以在描述中指定要用團隊的色彩系統跟字型規範，生成出來的設計就會自動套用。

加入互動：從靜態到可點擊原型

生成完靜態設計之後，下一步就是加入互動效果。Figma Make 目前在互動生成方面還比較基礎，但它會把元素結構處理得很好，所以手動加互動並不難。

常見的互動效果包括：頁面之間的跳轉、底部 Tab 的切換、卡片的點擊展開等等。在 Figma 的 Prototype 模式下，把這些連線拉一拉就搞定了。

進階一點的話，你可以搭配 Smart Animate 做過場動畫。比如從商品列表點進商品詳情頁的時候，讓圖片有一個放大的過場效果。這些細節會讓你的原型看起來更專業，也能讓開發團隊更清楚你要的互動效果。

關於無障礙設計的部分，建議在生成完原型後做一次WCAG 無障礙檢查，確保色彩對比度、字型大小這些基本項目都有達標。

整合到設計工作流的建議

Figma Make 不是要取代設計師，而是加速設計流程。以下是我建議的最佳實踐：

探索階段用 AI 快速發散。在專案初期，用 Make 快速生成多個版本的設計方案，比你自己從零開始畫快很多。十分鐘就能看到五六種不同的佈局可能。

設計細節手動打磨。AI 生成的設計在大方向上通常沒問題，但品牌調性、微互動這些細節還是需要設計師的手藝。把 AI 當成起點，不是終點。

善用 Make 做變體。有了一個滿意的設計之後，可以用 Make 快速產出不同尺寸的版本，像是從手機版生成平板版或桌面版。

最後，當設計完成要交付給工程師的時候，可以參考設計交付協作指南，確保溝通順暢。AI 加速了設計階段，但好的交付流程一樣重要。Figma Make 是我目前用過最好的 AI 設計工具，如果你還沒試過，真的很推薦花個半小時玩玩看。