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

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

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

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

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

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: