Danh sách kiểm tra bàn giao Figma / PSD: Cách thiết kế UI game tránh làm lại

Khi kỹ sư phải làm lại UI, đôi khi không phải vấn đề thẩm mỹ—mà là bàn giao không đáp ứng yêu cầu của engine. Bạn chỉnh sửa một frame trong Figma hay Photoshop, và kỹ sư phải cắt lại, dựng lại Canvas, và căn chỉnh lại anchor. Tiến độ kéo dài.

Dưới đây là danh sách kiểm tra trước khi bàn giao bao quát các tình huống tìm kiếm phổ biến: Figma export Unity, PSD import Unity UI, game UI slicing, reskin sự kiện, và UI đa ngôn ngữ. Phần cuối giải thích khoảng cách giữa “chỉ có PNG” và xuất có cấu trúc; công cụ chỉ là điểm tham chiếu.

---

Kỹ sư thực sự cần gì

Họ cần	Không phải cái này
Phân cấp có tên (nút, bảng, mục danh sách)	Một JPG toàn màn hình
Nút normal / pressed / disabled	Một hình “trông có vẻ bấm được”
Lớp văn bản có thể thay thế	Mọi thứ được raster hóa thành chữ hiển thị
Vị trí tương đối và ngữ nghĩa anchor	Ảnh tham chiếu bố cục + 20 PNG rời
Cấu trúc prefab tái sử dụng	Dựng lại từ đầu mỗi sự kiện

Bài kiểm tra nghiệm thu một dòng: Sau khi nhập vào Unity UGUI / Godot Control / Cocos UI, thay đổi nội dung chữ hoặc reskin không nên đòi hỏi dựng lại toàn bộ cây.

---

12 mục kiểm tra trước khi bàn giao

Cấu trúc và đặt tên

#	Kiểm tra	Ghi chú
1	Tên Frame / group có ngữ nghĩa	Panel_Shop, Btn_Buy—không phải Group 12
2	Tách lớp tương tác và trang trí	Nền, viền, biểu tượng, văn bản
3	Mục danh sách là group tái sử dụng	List_Item có thể nhân bản
4	Ẩn bản nháp và Frame lỗi thời	Ít nhiễu khi xuất

Trạng thái và thông số kỹ thuật

#	Kiểm tra	Ghi chú
5	Đầy đủ trạng thái nút	normal / pressed / disabled (hoặc quy ước đặt tên của nhóm)
6	Đánh dấu vùng 9-slice / kéo giãn	Bảng và ô nhập không nên bị scale cứng
7	Độ phân giải mục tiêu và vùng an toàn	Mobile dọc: notch và thanh dưới
8	Chiến lược font	Lớp văn bản cho bản địa hóa; chữ hiển thị ghi chú riêng

Live ops và bản địa hóa

#	Kiểm tra	Ghi chú
9	Dư địa độ dài nội dung	Tiếng Đức / Tây Ban Nha thường dài hơn tiếng Anh 30%+
10	Reskin = chỉ thay hình ảnh	Skin sự kiện: cùng bố cục, art và màu mới
11	Bản địa hóa: nội dung so với bố cục	Lý tưởng: cùng cấu trúc, nhiều tệp ngôn ngữ
12	Định dạng xuất được ghi lại	PSD phân lớp / liên kết Figma, hoặc quy ước đặt tên slice

Chuẩn bị Figma: Quy trình Figma → Unity. Chuẩn bị PSD: Nhập PSD vào Unity UI trong 5 phút.

---

Ba con đường bàn giao (so sánh khách quan)

Con đường	Cách tiếp cận	Phù hợp nhất với	Điểm đau
A. Cắt thủ công	Xuất PNG + ảnh chụp bố cục; kỹ sư dựng bằng tay	UI tối giản, demo một lần	Mỗi lần sửa = cắt lại và dựng lại
B. Plugin engine	Figma Converter, Psd-Exporter, v.v.	Nhóm có thông số cố định	Đa engine thường phải làm lại; chất lượng plugin khác nhau
C. Canvas có cấu trúc	Tệp phân lớp → canvas game → tách tại chỗ → xuất Prefab	UI nhiều màn hình, reskin thường xuyên / phát hành toàn cầu	Cần áp dụng quy trình xuất hướng game

Con đường C phổ biến trong các sản phẩm như VberAI Studio: phân tích PSD / Figma → tách UI giữ nguyên bố cục → xuất sang Unity / Godot / Cocos (xem tách UI game vào engine). Nhà thiết kế vẫn có thể làm việc trong Figma; sau khi duyệt.

---

Các tình huống nhà thiết kế thường gặp

Cắt UI game / cắt tại chỗ

Nếu concept toàn màn hình chỉ có PNG, kỹ sư phải đoán biên nút. Quy trình an toàn hơn: thả màn hình lên canvas → tách control tại chỗ (cắt tại chỗ) để dữ liệu vị trí đi kèm với phần tách—tránh “slice trông đúng nhưng mọi thứ lệch trong engine.”

Xuất Figma sang Unity / Godot

Nếu plugin chỉ xuất ra gói sprite phẳng, kỹ sư vẫn phải dựng lại cây RectTransform / Control. Khi đánh giá, hãy hỏi: sản phẩm bàn giao là Prefab / phân cấp, hay zip ảnh rời? So sánh Godot: Figma → Godot thủ công so với quy trình AI.

Reskin UI game (theo mùa / sự kiện)

Halloween, Giáng sinh, v.v.: cùng bố cục, tài nguyên chủ đề mới. Nếu mỗi lần reskin đều phải cắt lại và dựng lại, nhịp live-ops sẽ chậm. Công cụ reskin nên giữ cấu trúc node không đổi (reskin UI và biến thể chủ đề).

Dịch UI game / Figma đa ngôn ngữ

Cạm bẫy phát hành toàn cầu: nội dung dịch tràn bố cục. Quy trình lý tưởng: chỉ hoán đổi chuỗi, không reflow Frame (dịch UI một cú nhấp). Trong Figma.

Biểu tượng và tài nguyên bán trong suốt

Biểu tượng kỹ năng và UI VFX thường cần xóa nền trước khi nhập (tóc, độ trong suốt, phát sáng). Matting thông thường làm mờ viền; công cụ hướng game nhấn mạnh alpha (matting phát sáng / VFX).

---

Điều này liên quan thế nào đến công cụ ảnh AI

Midjourney, Jimeng, GPT Image 2, v.v. tốt cho định hướng hình ảnh; nếu đích đến là engine, bạn vẫn cần tách và phân cấp. Kết hợp phổ biến:

Concept UI toàn màn hình bằng AI → nhà thiết kế sắp xếp lớp trong Figma → xuất có cấu trúc sang engine

Đừng coi “một hình đơn cấp poster” là bàn giao cuối cùng. So sánh công cụ: máy tạo art thiết kế game AI.

---

FAQ

Tôi có thể chỉ bàn giao PNG không? Được cho demo; UI sản xuất sẽ phải làm lại nhiều lần. Ít nhất hãy kèm ghi chú bố cục và quy tắc đặt tên.

Figma Auto Layout có cần hoàn hảo không? Không cần hoàn hảo như web—nhưng nhóm và đặt tên quan trọng hơn tinh chỉnh từng pixel.

Kỹ sư nói “slice sai” nghĩa là gì? Thường là: thiếu trạng thái.

Reskin so với làm lại UI? Reskin: cùng cấu trúc, hình ảnh mới. Làm lại: phân cấp cũng thay đổi. Live ops nên đi theo con đường reskin.

Nhà thiết kế có cần học Unity không? Không cần scripting—nhưng kiến thức cơ bản về Canvas / Anchor / Prefab giúp giảm mạnh chi phí giao tiếp.

VberAI Studio có giống Google AI Studio không? Không. Cái trước là canvas game và xuất engine; cái sau là môi trường phát triển AI tổng quát của Google. Xem so sánh.