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 設計工具,如果你還沒試過,真的很推薦花個半小時玩玩看。
繼續閱讀
Figma Multi-Edit 批次編輯完整教學:一次修改多個元件的高效設計技巧
相關文章
你可能也喜歡
探索其他領域的精選好文