先說結論：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 的完整一遍：