# Figma 到 Cocos Creator，完美支持设计稿转Prefab

把分层 Figma 导入 VberAI Studio，按设计稿转 Prefab 导出到 Cocos Creator 3.x，再在本地网页里预览。

## 先说结论：3个步骤

**Figma 到 Cocos Creator** 的主要逻辑是：针对已经分层的 `.fig` 文件 UI / HUD，要批量化处理好美术素材后，按设计稿转 Prefab，导入到 Cocos Creator 3.x 中使用。[VberAI Studio](https://vberai.com/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](/images/figma-to-cocos-creator/figma_to_cocos_studio_step1_fig_file_.webp)

## 步骤 2：在 VberAI Studio 里 Import Project

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

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

## 步骤 3：导出并预览

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

![已选中 Main Screen，高亮 Export to cocosCreator3.x](/images/figma-to-cocos-creator/figma_to_cocos_studio_ste3_export_to_cocoscreator_3_.webp)

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

![Cocos Creator 构建后的 Main Screen 本地网页预览](/images/figma-to-cocos-creator/figma_to_cocos_studio_ste4_cocos_preview_.webp)

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

![导出后的 Assets：Prefabs 与 Textures](/images/figma-to-unity/step_5_check_output_.webp)

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

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

<figure class="video-embed">
  <div class="video-embed-frame">
    <iframe
      src="https://www.youtube-nocookie.com/embed/_Yv-xl9EcNc"
      title="从 Figma 到 Cocos Creator 逐步演示"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      allowfullscreen
    ></iframe>
  </div>
</figure>