Figma 到 Unity UI：用 VberAI Studio 從設計稿到預製體

為什麼 Figma → Unity 總卡在中段

多數遊戲 UI 先在 Figma 裡完成：選單、HUD、商店頁、彈窗棧。落到 Unity 時，常見做法是導出 PNG，丟進 Canvas，再手工搭錨點、字型和嵌套面板。

時間往往耗在交接上：

• 設計在 Figma 迭代，程式在 UGUI 裡重搭同一套結構
• 扁平切圖幾乎留不下圖層命名與分組
• Figma 小改一版，RectTransform 又要返工半天

真正缺的是結構保留——把 Frame 變成引擎層級，而不是再走一遍切圖流水線。

一條有用的 Figma → Unity 路徑應具備什麼

可上線的交接至少要完成三件事：

1. 導入 Figma 檔案，保留命名 Frame / Group
2. 畫布上直觀操作，調整佈局和資源
3. 導出或同步到 Unity，得到可在編輯器裡預覽的 UI 元件 / 預製體（面向遊戲引擎層級，而不是網頁 HTML）

VberAI Studio（簡稱 AI Studio）按這個閉環設計：設計稿進入 → 檢查層級 → 可選 AI 編輯 → 面向 Unity 導出。它不替代設計體系，也不替你寫 C# 綁定；省掉的是「在 Canvas 裡把面板再搭一遍」的重複勞動。

若你同時使用 Unity MCP，可以在預製體進專案後，用 Cursor 或 Claude Code 繼續細化。本文聚焦設計 → Unity UI 這一段。

先整理好 Figma 檔案

AI Studio 更適合「已經像 UI 結構」的稿件。

做法	為什麼重要
Frame 命名清晰（Panel_HUD、Btn_Play、List_Item）	名稱會落到節點 / GameObject
多用分組，少用整屏合併圖層	導入後還能認出層級
文字盡量保持文字層	更易映射 TextMeshPro / UI Text
間距與 Auto Layout 盡量統一	錨點與 Layout Group 更穩
隱藏草稿 Frame 和未用變體	減少導出樹雜訊

盡量不要只交一張拼好的截圖——那會把你拉回手動切圖。

流程：導入 → 編輯 → 導出到 Unity

1. 導入 Figma 設計

1. 打開 VberAI 上的 VberAI Studio
2. 新建導入，選擇 Figma，上傳 Figma 檔案
3. 確認左側圖層 / Frame 樹對應你要交付的螢幕

理想狀態是：左側結構、中間畫布預覽、右側引擎導出——像設計工具，而不是批量轉圖工具。

2. 導出前檢查層級

重點看：

• 面板嵌套（頭 / 身 / 底）
• 按鈕點擊區與裝飾圖示是否分開
• 需要保持可編輯的文字層
• 可拉伸底板 vs 固定圖示

命名或分組不對，盡量在這裡改。進 Unity 後再拆爛預製體，成本更高。

3. 需要時用自然語言改一版

團隊常用的說法例如：

• 「標題和主按鈕之間收緊一點」
• 「商店列表項統一高度」
• 「隱藏草稿角標，保留主 CTA」

重點不是用聊天重做整套美術，而是在結構變成 Unity 物件之前把佈局理順。

4. 面向 Unity 導出或同步

目標引擎選 Unity，優先輸出 UI 層級 / 預製體，而不是「僅精靈圖」。

然後在 Unity 中：

1. 導入到清晰目錄（如 Assets/UI/Generated/）
2. 放到 Canvas（或專案的 UI 根節點）下
3. 用 16:9 和直立機型各測一遍
4. 按鈕與資料綁定仍用 C# 正常接線

互動邏輯仍歸你。省掉的是按 Figma 手工重搭每一個 Image / Text / LayoutGroup。

和純手動導出怎麼選

路徑	更適合
手動 PNG + 重搭	一次性宣傳閃屏、強訂製 Shader
AI Studio：Figma → Unity	選單、HUD、商店、設定等重複結構
AI Studio + Unity MCP	同一屏進專案後，再用 AI 客戶端批量改名 / 接線

Godot 側對比可讀：Figma 到 Godot：手動 vs AI Studio。偏 PSD 的 Unity 短流程見：5 分鐘用 AI Studio 把 PSD 導入 Unity UI。

常見問題

這和 Figma 自帶的「轉程式碼」外掛一樣嗎？
那些工具多面向 Web。遊戲 UI 需要 Canvas / RectTransform（或引擎等價物）、字型與預製體約定。引擎友善的導出，和網頁 codegen 是兩件事。

還需要設計師在 Figma 裡出稿嗎？
需要。AI Studio 消費設計結構，不替你定美術方向。佈局與 token 仍以 Figma 為準。

和 Figma MCP 是什麼關係？
Figma MCP 適合 AI 客戶端即時讀寫 Figma（讀 Frame、批註、在設計側微調）。Figma design → Unity 遊戲 UI 的務實路徑仍是：在 AI Studio 裡導入 → 層級 → Unity 導出。預製體落地後再用 Unity MCP 做編輯器自動化。

第一次導出會不會像素級完美？
字型、安全區、本地化通常還要過一遍。收益在於：結構遷移是分鐘級，而不是手搭半天。

下一步

1. 在 Figma 裡整理好一個真實選單頁的 Frame 命名
2. 用 VberAI Studio 跑一遍
3. 導入 Unity 套件，和上次手搭耗時對比

若進編輯器後還要批量自動化，再接上 Unity MCP，從你的 AI 程式設計客戶端繼續迭代。