Tóm lại: 6 bước

Logic chính của Figma sang Unity: với UI / HUD file .fig đã tách lớp, xử lý art hàng loạt rồi nhập vào Unity. VberAI Studio nhập file bằng Import Project (nhập dự án), rồi chạy tách lớp tự động: phát hiện mép rồi cắt ảnh, xuất file đặt tên có nghĩa, sau đó chọn Export to Unity.

Đã là file Photoshop tách lớp: PSD sang Unity.

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). Nhóm đã đặt tên (khung, nút, thanh HUD) sẽ theo sang VberAI Studio.

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: Tách lớp tự động

Chọn board (ví dụ cat_journey_UI). Trên thanh công cụ khi đã chọn, mở lớp chồng, chọn Auto-Layering (tách lớp tự động).

Menu lớp chồng, gồm Auto-Layering và Layer Split

Hộp thoại là Run AI auto-layering?, rồi nhấn Start layering.

Hộp xác nhận: Run AI auto-layering, Start layering

Biên có tên hiện trên ảnh, nghĩa là các tấm đã tách lớp xong. Chi tiết bước này xem tách lớp tự động.

Kết quả Auto Layering: biên có tên trên UI Cat Journey

Bước 4: Xuất sang Unity

Giữ board đã tách lớp được chọn (ở đây là cat_journey_UI_layer). Mở Export, chọn Export to Unity.

Menu Export, tô sáng Export to Unity

Bước 5: Chọn dạng xuất sang Unity

Khi xuất sang Unity, chọn dạng xuất. Trong hộp thoại Target engine là Unity; định dạng có thể chọn Prefab (.prefab). Export to chọn gói ZIP, hoặc ghi thẳng vào dự án đích. Default paths đặt file theo thư mục mặc định của engine.

Hộp thoại xuất Unity: định dạng Prefab và gói ZIP

Bước 6: Kiểm tra kết quả xuất

Lần này chọn gói ZIP. Giải nén ra thư mục gốc Assets: Prefabs chứa .prefab dùng được trong Unity (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 giải nén: Prefabs và Textures