# Figma 到 Unity

儲存本地 .fig，匯入 VberAI Studio，跑自動分層，再匯出到 Unity。

## 先說結論：6個步驟

**Figma 到 Unity** 的主要邏輯是：針對已經分層的 `.fig` 檔案 UI / HUD，要批次化處理好美術素材後，匯入到 Unity 中。[VberAI Studio](https://vberai.com/studio) 用 **Import Project（匯入專案）** 匯入這份檔案，再跑 [自動分層](/docs/sprite/auto-layering-image-to-layers/)：檢測邊緣切圖，匯出有意義命名的圖片檔案，然後選 **Export to Unity**。

已經是分層的 Photoshop 檔案：[PSD 到 Unity](/docs/convert/psd-to-unity/)。

## 步驟 1：存一份本地 `.fig`

在 Figma 中開啟選單：**File（檔案）→ Save Local Copy（儲存本地備份）**。已經命名的編組（畫框、按鈕、HUD 條）會帶到 VberAI Studio。

![Figma 畫素風遊戲 UI：File 選單高亮 Save Local Copy](/images/figma-to-godot/figma_to_godot_step1_save_local_copy_.webp)

## 步驟 2：在 VberAI Studio 裡 Import Project

在 VberAI Studio 的專案頁，選 **Import Project（匯入專案）**，選擇剛剛匯出的 Figma 的 `.fig` 檔案。

![VberAI Studio Recent Projects，高亮 Import Project](/images/figma-to-godot/figma_to_godot_step2_import_project_.webp)

## 步驟 3：自動分層

選中畫板（例如 **cat_journey_UI**）。在選中後的工具欄裡開啟重疊圖層，選 **Auto-Layering（自動分層）**。

![重疊圖層選單，含 Auto-Layering 和 Layer Split](/images/auto-layering/step1_auto_layering_.webp)

對話方塊是 **Run AI auto-layering?**，再點 **Start layering**。

![確認對話方塊：Run AI auto-layering，Start layering](/images/auto-layering/step2_confirm_debit_payment_.webp)

帶名字的邊界會出現在圖上，這意味著分層切分的圖片都處理好了。關於這一步驟的詳細說明可以參考 [自動分層](/docs/sprite/auto-layering-image-to-layers/)。

![Auto Layering 結果：貓之旅 UI 上帶命名的邊界](/images/auto-layering/step3_ai_output_.webp)

## 步驟 4：匯出到 Unity

保持已分層的畫板選中（這裡是 **cat_journey_UI_layer**）。開啟 **Export**，選 **Export to Unity**。

![Export 選單，高亮 Export to Unity](/images/figma-to-unity/step_3_export_to_Unity_.webp)

## 步驟 5：選擇匯出到 Unity 的形式

匯出到 Unity 時，可以選匯出形式。對話方塊裡 **Target engine** 是 Unity；格式可以選 **Prefab（.prefab）**。**Export to** 可以選 ZIP 壓縮包，或直接寫到目標工程。**Default paths** 會按引擎預設目錄來放檔案。

![Unity 匯出對話方塊：Prefab 格式與 ZIP 壓縮包](/images/figma-to-unity/step_4_export_settings_.webp)

## 步驟 6：檢查匯出結果

這次選的是 ZIP 壓縮包。解壓後是 `Assets` 總資料夾：`Prefabs` 裡是 Unity 可用的 `.prefab`（組裝好的介面，可以拖進場景）；`Textures` 裡是具體的切圖檔案（按圖層起好名的 PNG）。

![解壓後的 Assets：Prefabs 與 Textures](/images/figma-to-unity/step_5_check_output_.webp)