先说结论：3个步骤

Figma 到 Cocos Creator 的主要逻辑是：针对已经分层的 .fig 文件 UI / HUD，要批量化处理好美术素材后，按设计稿转 Prefab，导入到 Cocos Creator 3.x 中使用。VberAI Studio 用 Import Project（导入项目） 导入这份文件，再导出到 Cocos Creator 3.x。导出结果在 Assets 总文件夹里：Prefabs 是组装好的界面，Textures 是按图层起好名的切图。界面逻辑用 Cursor 或 Codex 补。在 Cocos Creator 里 Build，预览会开到本地网页。

步骤 1：存一份本地 .fig

在 Figma 中打开菜单：File（文件）→ Save Local Copy（保存本地备份）。

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

步骤 2：在 VberAI Studio 里 Import Project

在 VberAI Studio 的项目页，选 Import Project（导入项目），选择刚刚导出的 Figma 的 .fig 文件。

VberAI Studio Recent Projects，高亮 Import Project

步骤 3：导出并预览

选中这一屏（例如 Main Screen）。打开 Export，选 Export to cocosCreator3.x。

已选中 Main Screen，高亮 Export to cocosCreator3.x

界面逻辑用 Cursor 或 Codex 接上。在 Cocos Creator 里 Build 工程，预览会开到本地网页。

Cocos Creator 构建后的 Main Screen 本地网页预览

导出结果按 Assets 目录来放：Prefabs 里是 Cocos Creator 可用的 Prefab（组装好的界面，可以拖进场景）；Textures 里是具体的切图文件（按图层起好名的 PNG）。

导出后的 Assets：Prefabs 与 Textures

2026年9月最新操作流程指引

从 Figma 经 VberAI Studio 进到 Cocos Creator 的完整一遍：