Bạn có thấy việc thiết kế Navigation Bar (Thanh điều hướng dưới đáy màn hình) là công việc lặp đi lặp lại nhàm chán nhất không? Dự án nào cũng cần, nhưng mỗi lần làm là mỗi lần phải: Vẽ khung, chia Grid, kiếm icon, tạo trạng thái Active/Inactive, rồi lại chỉnh Auto-layout… Tốn cả tiếng đồng hồ chỉ cho một thanh bé xíu.

Tại sao phải “phát minh lại cái bánh xe” trong khi bạn có thể lấy về dùng ngay? Mobile Navigation Bundle chính là chiếc chìa khóa giúp bạn bỏ qua bước setup tẻ nhạt này để tập trung vào những phần quan trọng hơn của UI.

1. Trong “chiếc hộp” này có gì?

Đây không chỉ là một file thiết kế tĩnh, nó là một bộ thư viện Component được xây dựng cực kỳ bài bản về mặt kỹ thuật.

  • Đa dạng phong cách (Styles): Bộ này cung cấp đủ các kiểu Navigation phổ biến nhất hiện nay:
    • Classic: Kiểu chuẩn mực (Icon + Label) giống iOS/Android gốc.
    • Modern/Floating: Kiểu thanh nổi bo góc, tách biệt với cạnh dưới màn hình.
    • Curve/Creative: Các kiểu có đường lượn sóng hoặc nút Home lồi lên ở giữa (thường thấy ở các App thương mại điện tử hoặc đặt xe).
  • Sức mạnh của Figma (Technical Specs): Đây là điểm “ăn tiền” nhất:
    • 100% Auto-layout: Kéo giãn thoải mái, tự động căn giữa khoảng cách các icon. Dù bạn làm màn hình iPhone 14 hay 16 Pro Max, nó đều co giãn mượt mà.
    • Variants & Properties: Tác giả đã setup sẵn các biến thể (On/Off, Active/Inactive). Bạn chỉ cần gạt nút (Toggle) để chuyển đổi trạng thái icon sáng/tối mà không cần vẽ lại.
    • Clean Layer: Cấu trúc đặt tên layer gọn gàng, khoa học, rất dễ quản lý.

Bạn có thể tìm resource này bằng cách:

2. Hướng dẫn khai thác tối đa

Đừng chỉ tải về rồi để đó, hãy biến nó thành tài sản của riêng bạn theo quy trình sau:

  • Bước 1: Lấy về (Duplicate): Mở link file và nhấn “Open in Figma” để nhân bản về Drafts.
  • Bước 2: Chọn món (Pick & Drop): Tìm kiểu Navigation hợp với Style dự án của bạn (ví dụ dự án cần sự sang trọng thì chọn kiểu Classic Minimalist). Copy Component đó và Paste sang file làm việc chính.
  • Bước 3: “Biến hình” (Customize):
    • Thay Icon: Nhờ cấu trúc Component chuẩn, bạn chỉ cần chọn Icon bên trong và dùng tính năng “Swap Instance” để thay bằng bộ icon của dự án bạn.
    • Đổi màu: Click vào thanh Nav, nhìn sang bảng bên phải mục Selection Colors. Đổi màu xám/đen mặc định thành màu Brand của bạn.

Lưu ý: File này được chia sẻ miễn phí cho cả cá nhân và thương mại. Tuy nhiên, hạn chế Detach Instance (phá vỡ liên kết component) trừ khi thực sự cần thiết để giữ lại khả năng chỉnh sửa hàng loạt.

3. Kết luận

Mobile Navigation Bundle là một resource “nhỏ nhưng có võ”. Nó giúp Designer tiết kiệm thời gian xử lý các tiểu tiết (pixel-pushing) để dành não bộ cho việc tư duy trải nghiệm người dùng (UX).

Dù bạn là Newbie đang học cách tổ chức Auto-layout hay là Senior cần dựng lẹ một cái Prototype để đi họp, đây chắc chắn là file nên có trong kho tài nguyên của bạn.