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 rồi nhập vào Cocos Creator dùng như scene. VberAI Studio nhập file bằng Import Project (nhập dự án), rồi xuất sang Cocos Creator 3.x. 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

Video hướng dẫn

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