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