先说结论:6个步骤

Figma 到 Unity 的主要逻辑是:针对已经分层的 .fig 文件 UI / HUD,要批量化处理好美术素材后,导入到 Unity 中。VberAI StudioImport Project(导入项目) 导入这份文件,再跑 自动分层:检测边缘切图,导出有意义命名的图片文件,然后选 Export to Unity

已经是分层的 Photoshop 文件:PSD 到 Unity

步骤 1:存一份本地 .fig

在 Figma 中打开菜单:File(文件)→ Save Local Copy(保存本地备份)。已经命名的编组(画框、按钮、HUD 条)会带到 VberAI Studio。

Figma 像素风游戏 UI:File 菜单高亮 Save Local Copy

步骤 2:在 VberAI Studio 里 Import Project

在 VberAI Studio 的项目页,选 Import Project(导入项目),选择刚刚导出的 Figma 的 .fig 文件。

VberAI Studio Recent Projects,高亮 Import Project

步骤 3:自动分层

选中画板(例如 cat_journey_UI)。在选中后的工具栏里打开重叠图层,选 Auto-Layering(自动分层)

重叠图层菜单,含 Auto-Layering 和 Layer Split

对话框是 Run AI auto-layering?,再点 Start layering

确认对话框:Run AI auto-layering,Start layering

带名字的边界会出现在图上,这意味着分层切分的图片都处理好了。关于这一步骤的详细说明可以参考 自动分层

Auto Layering 结果:猫之旅 UI 上带命名的边界

步骤 4:导出到 Unity

保持已分层的画板选中(这里是 cat_journey_UI_layer)。打开 Export,选 Export to Unity

Export 菜单,高亮 Export to Unity

步骤 5:选择导出到 Unity 的形式

导出到 Unity 时,可以选导出形式。对话框里 Target engine 是 Unity;格式可以选 Prefab(.prefab)Export to 可以选 ZIP 压缩包,或直接写到目标工程。Default paths 会按引擎默认目录来放文件。

Unity 导出对话框:Prefab 格式与 ZIP 压缩包

步骤 6:检查导出结果

这次选的是 ZIP 压缩包。解压后是 Assets 总文件夹:Prefabs 里是 Unity 可用的 .prefab(组装好的界面,可以拖进场景);Textures 里是具体的切图文件(按图层起好名的 PNG)。

解压后的 Assets:Prefabs 与 Textures