Figma sang Unity: sau AI First, không cần coi xử lý UI bằng tay là khoản thời gian lớn nhất
Tóm lại
Sau khi site đăng quy trình Figma sang Unity, có thể thấy: trong bối cảnh AI đang đụng mạnh quy trình làm game cũ, dù là tiêu chí vàng trong bài Figma to Unity của Saharukh tháng 5 năm 2026, hiện ít nhất một nửa không còn chặn tiến độ phát triển. Nhìn từ AI First, đó chỉ là để mọi quy trình tự động hóa được càng tự động hơn, hiệu suất theo lên.
Mọi hướng dẫn và bài đã đăng trên site đều xoay quanh logic cốt lõi AI First: không học thông thạo game engine trước, mà ghép năng lực AI đã dùng được, quay lại thú làm game. Bộ công cụ đã đi thông lúc này:
- Codex: phụ trách viết code
- VberAI Studio: phụ trách sinh và xử lý art hàng loạt
- Unity MCP: phụ trách đồng bộ giữa công cụ lập trình và game engine
- Unity: cuối cùng kiểm, thử, sắp thành dự án game đủ
Chi tiết bài gốc vẫn bám, một nửa đã không còn hiệu lực
Trước hết liệt kê các kinh nghiệm trong bài gốc, sau sẽ đối từng mục.
Bản thiết kế đẹp trong Figma không có nghĩa dùng được trong game. Bài gốc nói: giao diện phải chuyển động, phải phản hồi, phải scale, phải nhiều trạng thái, phải chạy trên thiết bị khác nhau, còn phải chịu được hiệu năng trong engine realtime. Vì vậy Figma sang Unity không thể coi «xuất một tấm là xong».
Figma là bản vẽ, Unity là công trường. Vào Unity mới lộ các vấn đề cụ thể: nút bấm được không, hover thế nào, disabled thế nào, đổi ngôn ngữ chữ có nổ khung không, popup trên điện thoại và máy tính có ổn không, animation có mượt không, giao diện có kéo frame rate không.
Một nút không phải một hình chữ nhật cộng một dòng chữ. Bài gốc liệt cả chuỗi: thường, hover, nhấn, disabled, chọn, focus tay cầm, âm thanh, animation click, bản địa hóa, scale thích ứng, hiệu ứng sáng có thể có, và event nối vào code gameplay. Vì vậy «xuất nút từ Figma» nghe nhẹ, làm vào dự án thì không nhẹ.
Xuất cắt ảnh chỉ là một khúc nhỏ. Còn phải quyết trước: cái nào làm ảnh, cái nào dựng thẳng trong Unity, cái nào làm prefab dùng lại, cái nào nine-slice, cái nào animation, cái nào shader, cái nào bản địa hóa, cái nào phải chịu cùng lúc bàn phím, chuột, cảm ứng và tay cầm.
Đừng xuất cả màn thành một tấm. Ví dụ xấu bài gốc điểm tên: cả màn, nút có chữ, panel kích thước cố định, ghép thanh tiến độ bằng nhiều ảnh tĩnh, nướng copy vào PNG. Chữ một khi vào ảnh, dịch rất khó sửa; cả khối panel khó scale; thanh tiến độ ảnh tĩnh không fill mượt; mỗi màn một tấm lớn vừa nặng vừa khó sửa. Cách tách ổn hơn: chữ để trong Unity thành chữ thật, nút làm component dùng lại, panel nên dùng nine-slice, thanh tiến độ dùng ảnh fill hoặc shader, icon xuất thành ảnh sprite, món lặp làm prefab.
Đặt tên trông chán trước khi dự án lớn. Rectangle 124, Group 56, Icon copy 9, Frame 32 vào dự án thì dev hoặc technical artist chỉ còn đoán. Tên tốt bài gốc đưa: btn_primary_bg, icon_currency_gold, panel_shop_base, hud_health_fill, popup_reward_frame, img_avatar_border_rare.
Nghĩ theo component, đừng chỉ nghĩ theo cả màn. Màn cửa hàng tách: thanh trên, thanh tiền, thẻ hàng, nút mua, vùng cuộn, tab loại, popup xác nhận. Trong Figma là component dùng lại, trong Unity là prefab dùng lại, ví dụ Shop Item Card khớp PF_ShopItemCard, trong đó lại icon, tên, giá, khung rarity, nút mua, khóa / chọn / hover.
Bố cục Figma không bằng bố cục Unity. Cùng một bộ giao diện có thể gặp điện thoại, tablet, máy tính, màn siêu rộng, tai thỏ và safe area, ngôn ngữ khác, cách nhập khác. Khi làm phải tính neo, scale, safe area, layout group và khoảng cách co giãn. Giao diện không thể như một sticker, chỉ dán một độ phân giải.
Animation đừng để cuối. Popup fade in, nút scale nhẹ, thanh máu nháy, icon thưởng phát sáng, lỗi thì rung—những thứ này đang nói với người chơi chuyện gì đang xảy ra. Không làm sớm, sau sẽ đánh nhau với bố cục, nhịp, hiệu năng, luồng gameplay.
Giao diện cũng ăn hiệu năng. Chồng bán trong suốt, texture lớn, blur, mask, particle, icon chuyển động, canvas chưa sắp, quá nhiều ảnh sprite rời, rebuild layout thường xuyên. Máy mạnh không rõ, điện thoại thành vấn đề thật.
Mười bước sản xuất bài gốc đưa: sắp file Figma → đánh dấu component dùng lại → quyết xuất gì → chuẩn bị tài nguyên theo kích thước và vùng trong suốt → nhập Unity và đặt texture, nén, atlas → làm prefab → bổ sung trạng thái → thêm animation và phản hồi → thử trên nhiều màn → sớm nhìn draw call, VRAM, overdraw và rebuild canvas.
Sai lầm bài gốc bảo tránh: xuất cả màn thành ảnh, nướng copy vào ảnh sprite, bỏ qua trạng thái nút, chỉ thiết kế một độ phân giải, lớp đặt tên loạn, quên bản địa hóa, bỏ qua tay cầm hoặc cảm ứng, tài nguyên độc quá nhiều, không làm atlas, animation quá muộn, bỏ qua safe area, hiệu năng để cuối mới xem.
Technical artist giao diện được viết thành người giữa thiết kế và kỹ thuật: chuẩn bị tài nguyên, dựng prefab, làm shader, làm animation, tối ưu hiệu năng, làm component dùng lại, thích ứng độ phân giải, một bên để designer thấy giới hạn engine, một bên để dev giữ được hình. Trách nhiệm được tóm: bảo vệ thiết kế, để nó còn sống trong quá trình sản xuất.
Những điều trên, thời «có người trước, có công cụ sau», mỗi điều đều tốn thời gian.
Đối chiếu: sau AI First, điều nào còn đứng, điều nào không còn là trung tâm
Trang chủ viết thẳng: dùng tương tác gần Figma để tổ chức art, rồi phối hợp dày qua MCP engine, tách các khâu vốn dựa sức người. Đối bài gốc, có thể xem như một bảng.
| Việc bài gốc vẫn nhấn | Sau AI First còn đứng không |
|---|---|
| Bản thiết kế đẹp không có nghĩa dùng được trong game | Vẫn đứng. Bấm được, scale được, đổi ngôn ngữ được, cuối cùng đều phải kiểm trong Unity. |
| Xuất cắt ảnh chưa phải toàn bộ | Vẫn đứng, nhưng trung tâm đổi. Thiếu không còn là người tự quyết từng khối cắt thế nào, mà file có xuất theo thư mục engine để Codex đọc được không. |
| Đừng xuất cả màn, đừng nướng copy vào ảnh | Vẫn đứng. Bài bản địa hóa đã viết: chữ nướng vào ảnh, sau chỉ làm lại cả tấm. |
Tên kiểu Rectangle 124 vào dự án sẽ loạn | Vẫn đứng. Tách lớp tự động chính là phát hiện mép rồi cắt ảnh, xuất file đặt tên có nghĩa; tên loạn thì prefab và script phía sau cũng không thẳng hàng. |
| Nút cần hover, nhấn, disabled, focus tay cầm, âm, event | Đứng một nửa. Các trạng thái và event này vẫn phải xuất hiện trong Unity; nhưng không bắt buộc technical artist giao diện dựng tay xong trước khi nhập. Codex cộng Unity MCP bổ sung sau khi prefab đã vào chỗ. |
| Nine-slice, shader, atlas, rebuild canvas | Đứng một nửa. Dự án mobile những thứ này vẫn nổ. Thứ tự AI First: để giao diện vào dự án chạy được trước, rồi để Codex nhìn trình soạn đang mở mà kiểm, mà sửa, chứ không lấy chúng làm ngưỡng vào cửa. |
| Làm prefab theo component | Vẫn đứng, và bước xuất đã đỡ một phần. Trong Figma sang Unity, chọn Prefab (.prefab) rồi giải nén, Assets/Prefabs là giao diện đã lắp, Assets/Textures là cắt ảnh. |
| Animation và hiệu năng phải nhét vào «quy trình trước khi xuất» | Không còn là trung tâm. Bài gốc viết animation và hiệu năng thành bước 8 và 10 của quy trình sản xuất, như không xếp vào kế hoạch thì không xuất được. Giờ phổ biến hơn: xuất prefab dùng được trước, rồi trong Unity dùng Codex và Unity MCP bổ sung chuyển động và chi phí. |
| Phải có một technical artist giao diện đứng giữa | Với người không có nền tảng làm game, điều này mất tác dụng trước. Tiền đề trang chủ là không cần thông thạo engine trước. Vai trò chốt đổi thành: VberAI Studio phụ trách sắp bản thành thư mục engine, Unity MCP đưa scene và script hiện tại cho Codex. |
Vì vậy không cần coi xử lý UI bằng tay là khoản thời gian lớn nhất. Giao diện vẫn phải làm đúng: đừng còn lấy mười bước xử lý từng chút bằng tay trong bài gốc làm điều kiện bắt buộc để đi từ Figma sang Unity.
Bộ này thực sự đổi đoạn nào
VberAI Studio nhắm nửa đầu tốn người nhất trong bài gốc: sắp lớp, đặt tên dùng được, quyết cắt ảnh nào, xuất theo thư mục Assets của Unity. .fig vào bằng Import Project (nhập dự án), rồi chạy tách lớp tự động, cuối cùng Export to Unity. Bước này phủ «file xuất có cấu trúc vào thư mục dự án Unity», không phủ hover, cỡ chữ bản địa hóa, particle đẹp không—nửa sau bài gốc vốn không nên giả định công cụ thiết kế làm xong một lần.
Unity vẫn là nơi kiểm xảy ra. Prefab kéo vào scene xong, những câu bài gốc hỏi vẫn còn: bấm được không, đổi ngôn ngữ có nổ không, tai thỏ có che không, có tụt frame không.
Unity MCP nhắm đoạn MCP làm được, công cụ thiết kế không làm được: đồng bộ scene, hierarchy và script hiện tại cho công cụ AI. Figma cộng Cursor rồi, bản thiết kế vào Godot thế nào đã viết phân công tương tự: MCP phụ trách phát triển và ngữ cảnh scene; công cụ thiết kế tiếp tục sửa bản, khi cần thì xuất theo thư mục engine. Bên Unity cùng logic.
Codex nhắm đoạn bài gốc để cho «technical artist giao diện / lập trình»: gắn event cho nút, bổ sung vài trạng thái, để chữ thành text dịch được, thử một lần theo độ phân giải khác. Định danh trang chủ là designer kiêm product manager biết viết code cơ bản, không phải chuyên gia engine; nếu đoạn nối này còn đòi viết tay xong một khung giao diện trước, AI First đi không tiếp.
Bốn món nối lại, mô hình phát triển cũ thành:
- Dùng công cụ sinh AI làm ảnh chụp UI game trước, rồi vào Figma xử lý nhẹ mép và chỗ cần vá.
- Trong VberAI Studio nhập, tách lớp tự động, xuất
Assetscủa Unity (prefab + cắt ảnh). - Trong dự án Unity đang mở, dùng Unity MCP để Codex thấy hierarchy giao diện hiện tại.
- Dùng Codex bổ sung tương tác, trạng thái và thích ứng cơ bản; bản cần sửa thì về VberAI Studio xuất thêm một vòng, chứ không đổi tên texture bằng tay trong engine.
Technical artist giao diện trong bài gốc bảo vệ «thiết kế đừng bị làm mất trong sản xuất». Cách bảo vệ thiết kế giờ đổi: lớp và tên đã thẳng hàng lúc xuất, phán đoán phía sau để người xem kết quả, thao tác cụ thể để Codex sửa trong engine.
Có lẽ nhét mọi thông tin chữ vào lớp—cách giờ trông vụng—sau này cũng chưa chắc còn là vấn đề, miễn chi phí và sự tiện của sinh AI cộng gắn nhãn tự động đã đè chi phí cả bộ sửa tay trước đây.
Kết luận
- Năng lực AI đang nuốt nhanh những quy trình trong làm game cũ chưa tự động hóa.
- VberAI Studio gần như đi dọc hướng làm game, dùng AI First lặp thêm một lớp. Loại công cụ này sớm muộn sẽ đẩy làm game nhanh hơn ở quy mô lớn hơn.
- Phần không bị bộ này nuốt tự động sẽ co lại rất mạnh về sau.