# Figma sang Cocos Creator: chuyển bản thiết kế sang Prefab

Nhập Figma đã tách lớp vào VberAI Studio, chuyển bản thiết kế sang Prefab rồi xuất Cocos Creator 3.x, xem trước trên trang web local.

## Tóm lại: 3 bước

Logic chính của **Figma sang Cocos Creator**: với UI / HUD file `.fig` đã tách lớp, xử lý art hàng loạt, chuyển bản thiết kế sang Prefab rồi nhập vào Cocos Creator 3.x. [VberAI Studio](https://vberai.com/studio) nhập file bằng **Import Project (nhập dự án)**, rồi xuất sang **Cocos Creator 3.x**. Kết quả nằm trong `Assets`: `Prefabs` là UI đã lắp, `Textures` là ảnh cắt đặt tên theo lớp. Logic giao diện bổ sung bằng Cursor hoặc Codex. Trong Cocos Creator nhấn **Build**, bản xem trước mở trên trang web local.

## Bước 1: Lưu một bản `.fig` local

Trong Figma, mở menu: **File (Tệp) → Save Local Copy (lưu bản local)**.

![UI game pixel Figma: menu File tô sáng Save Local Copy](/images/figma-to-cocos-creator/figma_to_cocos_studio_step1_fig_file_.webp)

## Bước 2: Import Project trong VberAI Studio

Ở trang dự án của VberAI Studio, chọn **Import Project (nhập dự án)**, chọn file `.fig` vừa xuất từ Figma.

![VberAI Studio Recent Projects, tô sáng Import Project](/images/figma-to-cocos-creator/figma_to_cocos_studio_step2_import_project_.webp)

## Bước 3: Xuất và xem trước

Chọn màn này (ví dụ **Main Screen**). Mở **Export**, chọn **Export to cocosCreator3.x**.

![Main Screen đã chọn, tô sáng Export to cocosCreator3.x](/images/figma-to-cocos-creator/figma_to_cocos_studio_ste3_export_to_cocoscreator_3_.webp)

Logic giao diện nối bằng Cursor hoặc Codex. Trong Cocos Creator **Build** dự án, bản xem trước mở trên trang web local.

![Xem trước Main Screen trên trang web local sau khi build Cocos Creator](/images/figma-to-cocos-creator/figma_to_cocos_studio_ste4_cocos_preview_.webp)

Kết quả xuất nằm trong `Assets`: `Prefabs` chứa Prefab dùng được trong Cocos Creator (giao diện đã lắp, kéo vào scene được); `Textures` là file cắt ảnh cụ thể (PNG đặt tên theo lớp).

![Assets sau khi xuất: Prefabs và Textures](/images/figma-to-unity/step_5_check_output_.webp)

## Hướng dẫn thao tác mới nhất tháng 9/2026

Một lượt đầy đủ từ Figma qua VberAI Studio vào Cocos Creator:

<figure class="video-embed">
  <div class="video-embed-frame">
    <iframe
      src="https://www.youtube-nocookie.com/embed/_Yv-xl9EcNc"
      title="Demo từng bước từ Figma sang Cocos Creator"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      allowfullscreen
    ></iframe>
  </div>
</figure>