Figma 到 Godot UI：用 AI Studio 匯出 Control 階層（步驟）

遊戲 UI 多半先在 Figma 定稿：主選單、HUD、商店、設定頁。落到 Godot 時，需要的是一棵可維護的 Control 樹——MarginContainer、VBoxContainer、TextureRect、Label、Button 以及 Theme——而不是一堆失去分組的 PNG。

常見卡點在中段：設計繼續改 Frame，程式在場景裡按像素重搭容器與錨點。本文只寫一條可重複的路徑：用 VberAI Studio（簡稱 AI Studio）把 Figma 結構變成 Godot 可用的 Control 階層，從匯入到編輯器驗收。

若要比較「手搭 vs AI Studio」何時更合適，見：Figma 到 Godot：手動流程 vs AI Studio。Unity 同路徑見：Figma 到 Unity UI。

完成標準：什麼叫「進 Godot 了」

只出現貼圖不算完成。至少同時滿足：

1. 節點樹能對應有意義的 Figma Frame（頂欄、列表、底欄等）
2. 在 16:9、直式與視窗化解析度下，主殼佈局不需要整樹手擰
3. 文字圖層盡量仍是 Label（或專案約定的文字節點），而不是整塊烤進圖裡
4. Figma 改殼層後，可以再匯出一輪，而不是整景從零重建

互動（訊號、資料繫結、本地化鍵）仍在 Godot 側完成。AI Studio 省掉的是「按稿重造佈局殼」。

前置條件

項	說明
Figma	已有按螢幕拆好的 Frame，命名可讀
AI Studio	可開啟 VberAI Studio
Godot	建議 Godot 4.x 專案；匯出目標選 Godot
資源約定	事先定好 UI 場景目錄（如 res://ui/generated/）與 Theme 落點

盡量不要只交一張拼好的整螢幕截圖——那會把流程拉回手動切圖。

步驟 1：整理 Figma，讓結構像 UI 樹

匯入前花一點時間整理稿件，比進引擎後再拆節點便宜。

做法	原因
Frame 命名清晰（Panel_HUD、Btn_Play、List_Item）	名稱會落到 Godot 節點名
用 Frame / Auto Layout 表達分組，少用整螢幕合併圖層	匯入後還能認出階層
文案盡量保留文字圖層	更易對應為 Label
九宮格底板與固定圖示分開	拉伸規則更清楚
隱藏草稿 Frame、未用變體	減少匯出樹噪音

步驟 2：在 AI Studio 匯入 Figma

1. 開啟 VberAI Studio
2. 新增匯入，選擇 Figma，上傳設計檔案（或依產品支援的 Figma 接入方式）
3. 在圖層 / Frame 樹中核對應交付的螢幕，而不是整份檔案裡的所有草稿

理想狀態是：左側結構、中間畫布預覽、右側面向引擎的匯出選項——確認結構對了再匯出。

步驟 3：匯出前校對階層

在畫布側重點檢查：

• 面板巢狀是否對應頭 / 身 / 底（或你們的殼層約定）
• 按鈕點擊區與裝飾圖示是否拆開
• 需要本地化的文字是否仍是文字圖層
• 可拉伸底板 vs 固定尺寸圖示是否區分

命名或分組不對，盡量在 AI Studio 裡改。進 Godot 後再拆爛的 .tscn，成本更高。

需要微調佈局時，可用自然語言說明意圖（例如收緊標題與主按鈕間距、統一列表項高度、隱藏草稿角標）。目標是在變成引擎物件之前理順殼層，而不是用對話重做整套美術。

步驟 4：面向 Godot 匯出

目標引擎選 Godot，優先輸出 Control 階層 / 場景，而不是「僅精靈圖」。

匯出後在 Godot 中：

1. 把資源放到約定目錄（如 res://ui/generated/）
2. 用 CanvasLayer 或專案 UI 根節點掛上匯出場景
3. 檢查根節點是否為合理的 Control（或容器）樹
4. 在編輯器裡用多種解析度預覽
5. 按鈕的 pressed 等訊號、資料填充，仍依專案慣例用 GDScript / C# 接線

邏輯仍歸工程。省掉的是按 Figma 手工堆每一個 TextureRect / Label / 容器。

步驟 5：編輯器驗收清單

檢查項	通過標準
節點命名	與關鍵 Frame 可對應，無大量 Node2D/Control 無意義編號堆砌
佈局	拉伸視窗時殼層不錯位到不可用
文字	改 Label 文案不必重導整螢幕貼圖
Theme	字型、顏色可接到專案 Theme，或明確還需手工掛 Theme
再匯出	改 Figma 殼層後再匯一輪，能替換或並列新場景，而不是無從下手

字型替換、安全區、本地化通常還要過一遍——這屬於正常打磨，不是流程失敗。

常見問題

和 Figma「轉程式碼」外掛一樣嗎？
多數面向 Web。Godot 需要的是 Control / 容器 / Theme 約定。引擎友善匯出與網頁 codegen 不是一類產物。

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

Godot MCP 在這一步做什麼？
AI Studio 負責設計稿 → Control 結構。Godot MCP 在場景進專案後，用 Cursor 等用戶端做編輯器內改名、掛訊號、查節點等操作。MCP 不負責「從圖生成整螢幕 UI」。安裝見：Godot MCP 安裝。

第一次匯出會不會像素級一致？
通常不會。收益是結構遷移以分鐘計，而不是手搭半天；像素與主題再在 Godot 收。

改版時怎麼再走一遍

Figma 變更	建議
殼層行列重排、新頁籤	經 AI Studio 再匯出
只換圖示色、文案	優先改 Godot 場景 / Theme / 翻譯表
整螢幕新畫板	新匯出 → 新 .tscn 或替換約定路徑