Figma là gì ? Tại sao dùng Figma ?
Figma ban đầu được dùng nhiều cho mảng thiết kế Web/App, nhưng vài năm trở lại đây, nó bắt đầu được các studio ứng dụng để làm giao diện cho Game (đặc biệt là Mobile Game) khá nhiều.
Việc dùng Figma xuất phát từ mục đích muốn kiểm soát tốt hơn và có hệ thống hơn những thành phần trong bộ UI của một con game. Tùy mục đích sử dụng mà quý bạn có thể xem xét, nhưng cách tốt nhất là nên sử dụng song song và linh hoạt các thế mạnh riêng của mỗi công cụ chứ ko nên thần thánh hóa bên nào.
Đối với các con game có UI/UX nhiều và luồng phức tạp, tôi khuyến khích quý bạn nên dùng thêm Figma để bổ trợ, vì Photoshop vẫn rất mạnh khi đáp ứng nhu cầu về chỉnh sửa hình ảnh, vẽ vời, hay render asset tả chất liệu.
Hình dung workflow với Figma
Thay vì nghĩ là phải bỏ cái này học cái kia, quý bạn nên tư duy theo kiểu phân chia nhiệm vụ:
- Photoshop lo phần “Art”: Dùng để vẽ các asset đơn lẻ, vẽ khung ruy-băng, tả chất liệu gỗ/vàng/đá, render các icon kỹ năng cầu kỳ. Những thứ cần độ chi tiết mỹ thuật cao thì cứ để Photoshop thầu.
- Figma lo phần “System”: Ném các asset đã vẽ xong từ Photoshop sang Figma. Ở đây, Figma sẽ đóng vai trò là nơi lắp ráp, sắp xếp bố cục (Layout), quản lý các trạng thái nút bấm (Component/Variant) và dựng mẫu thử (Prototype) để kiểm tra luồng vận hành của game trước khi gửi cho Dev.
Sự kết hợp này giúp quý bạn vừa giữ được chất lượng art của Photoshop, vừa có được sự gọn gàng, nhanh chóng và dễ quản lý hệ thống của Figma.
Quy trình lắp ráp UI game thực tế trên Figma
Thông thường thì quy trình làm một UI game mobile cơ bản sẽ diễn ra như sau (giả định là quý bạn ko cần nghĩ đến UX – trải nghiệm người dùng, mà chỉ cần làm theo yêu cầu được giao):
- Thứ 1 – Tìm ý tưởng: Định làm cái gì thì tìm ảnh tham khảo rồi kéo thả trực tiếp vào Figma để làm một bảng Moodboard nhìn cho tiện.
- Thứ 2 – Vẽ Wireframe: Phác thảo nhanh bố cục đen trắng dạng hình khối để định hình vị trí các thành phần. Khâu này làm bằng Figma là một lựa chọn rất phù hợp.
- Thứ 3 – Lên Layout: Xác định rõ ràng kích thước, khoảng cách, căn lề trái phải cho đồng đều trên toàn bộ màn hình.
- Thứ 4 – Thiết kế Visual: Đắp các asset mỹ thuật (vẽ từ Photoshop hoặc các phần mềm khác) vào bộ khung layout đã setup sẵn trên Figma để hoàn thiện màn hình visual hoàn chỉnh.
- Thứ 5 – Xuất file: Đặt tên chuẩn hóa và xuất các asset ra gửi cho khâu tiếp theo (Dev hoặc Animator).
Trên thực tế khi đi làm thì ko hoàn toàn cần thực hiện đầy đủ và lần lượt các bước như trên đâu, nhưng tôi kể ra để mn hiểu rõ bản chất công việc của mình khi kết hợp các công cụ với nhau. Đến khi quen thuộc rồi thì linh hoạt là chính.
Về phần mềm
- Link tải bản Desktop: Figma Downloads
Đoạn này tôi định viết chỉ chỉ qua phần mềm cơ mà tôi lười quá quý bạn ạ :)) Dạy dùng Figma cơ bản thì có rất nhiều trên Youtube rồi.
Nhưng nếu quý bạn nào newbie cảm thấy muốn tìm hiểu, muốn học hay cần tư vấn thì cứ thoải mái inbox qua thread cho tôi. Tôi chỉ chùa tích đức cho, ai hữu duyên thì đọc được dòng này :))))
Lưu ý: Khi inbox nhớ chụp cái ảnh màn hình đoạn này gửi kèm trước nhé, để tôi còn biết mà nhiệt tình hướng dẫn hê hê.
Đoạn này t định viết chỉ chỉ qua phần mềm cơ mà t lười quá các quý bạn ạ :)) Dạy dùng Figma thì có rất nhiều trên Youtube.
Cảm ơn quý bạn đã rảnh rảnh đọc bài hehe !
Chupapi.
