Nay tôi giới thiệu cho quý bạn một file Figma UI của game Brawl Stars trên trang cộng đồng. File này được tác giả study lại cực kỳ chi tiết và khoa học. Link tôi kèm ở phía dưới cho mn tiện tải về vọc vạch thử:
👉 Brawl Stars Game UI Kit – Figma Community
Trong file này có demo đầy đủ để quý bạn có thể nghiên cứu. Phần bố cục layout của các màn hình được sắp xếp rất bài bản, mn hoàn toàn có thể tham khảo để học cách tổ chức và quản lý file của mình sao cho chuẩn chỉ.
Component lồng Component
Tác giả file này ko biến cả cái popup to đùng thành một cục duy nhất, mà áp dụng tư duy lồng ghép:
- Cấp độ nhỏ: Định nghĩa các thành phần nhỏ như nút Close, nút nhận thưởng, tag danh mục, khung viền làm các Component độc lập.
- Cấp độ lớn: Lắp ráp các bản sao của những Component nhỏ trên lại để tạo thành một Component lớn hơn là Event Popup.
Tác dụng thực tế: Khi cần đổi thiết kế của tất cả các nút Close trên mọi popup trong game, quý bạn chỉ cần sửa đúng một cái Component nút Close gốc. Tất cả các Event Popup lớn nhỏ khác sẽ tự động cập nhật theo, ko cần đi sửa thủ công từng màn.
Quản lý trạng thái bằng Variant (Biến thể)
Game Brawl Stars có rất nhiều sự kiện: bán Skin, mở hòm, cập nhật mùa giải, ưu đãi nạp tiền… Mỗi sự kiện cần một kiểu hiển thị Popup khác nhau.
Thay vì vẽ hàng chục popup nằm rải rác làm loạn file, tác giả gom tất cả chúng vào trong một khung Component duy nhất và thiết lập các thuộc tính Variant (Biến thể) ở thanh công cụ bên phải.
Khi kéo bản sao của popup ra màn hình UI hoàn chỉnh, quý bạn chỉ cần click chuột ở thanh thuộc tính bên phải để chuyển đổi qua lại giữa các loại popup. Nội dung, nút bấm và màu sắc của popup sẽ tự động biến đổi đúng theo thiết kế đã cài đặt sẵn.
Hãy thử tưởng tượng quý bạn có thể sử dụng hệ thống UI dựa trên Component này ko chỉ 1 thành phần nhỏ lẻ mà là cả bộ UI, hơn thế nữa là bộ UI của nhiều con game khác nhau trong mọi lúc và mọi dự án quý bạn làm,… Thì rất cháy đúng ko :))))
Nên quý bạn hãy thử vào file và tham khảo thử đi nhé, rất hữu dụng đấy ! Có thể tham khảo video dưới để hiểu hơn về Component trong Figma nha:
Cảm ơn quý bạn đã rảnh rảnh đọc bài hehe !
Chupapi.
