# 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)