Tạo dropdown menu trong Figma: hướng dẫn chi tiết từ cơ bản đến nâng cao

Dropdown Menu là một thành phần giao diện (UI component) quen thuộc và cực kỳ hữu ích, giúp tiết kiệm không gian và tổ chức các tùy chọn một cách gọn gàng. Trong Figma, việc tạo Dropdown Menu không chỉ dừng lại ở việc thiết kế tĩnh mà còn có thể biến chúng thành các thành phần tương tác (interactive components) mạnh mẽ, phục vụ cho cả thiết kế giao diện và tạo prototype. Bài viết này sẽ hướng dẫn bạn chi tiết cách tạo Dropdown Menu trong Figma, từ những bước cơ bản nhất đến việc sử dụng các tính năng nâng cao như Variants và Interactive Components để tạo ra một dropdown hoạt động mượt mà và chuyên nghiệp.

I. Hiểu về cấu trúc của một Dropdown Menu

Trước khi bắt tay vào thiết kế, hãy hình dung cấu trúc cơ bản của một Dropdown Menu:

1. Trigger (Kích hoạt): Là phần tử mà người dùng tương tác để mở dropdown (ví dụ: một nút, một trường nhập liệu, hoặc một biểu tượng mũi tên).
2. Dropdown List (Danh sách thả xuống): Là phần chứa các tùy chọn, xuất hiện khi trigger được kích hoạt.
3. Dropdown Item (Mục trong danh sách): Mỗi tùy chọn riêng lẻ trong danh sách.
4. State (Trạng thái): Dropdown có thể có các trạng thái khác nhau như mặc định (default), hover, active, disabled, open, closed.

Xem thêm: Figma là gì?

II. Các bước tạo Dropdown Menu cơ bản trong Figma

Chúng ta sẽ bắt đầu với việc tạo một dropdown đơn giản bằng cách sử dụng Auto Layout và Components.

Bước 1: Thiết kế các “Dropdown Item”

1. Tạo một mục cơ bản:
   • Sử dụng công cụ Text (T) để viết tên một mục (ví dụ: “Option 1”).
   • Vẽ một hình chữ nhật (Rectangle – R) hoặc sử dụng Frame (F) để tạo nền cho mục đó. Đặt văn bản vào trong hình chữ nhật/frame.
   • Áp dụng Auto Layout: Chọn cả văn bản và hình nền, nhấn Shift + A để tạo Auto Layout. Đặt Padding (ví dụ: 12px ngang, 8px dọc) và Spacing between items (nếu có nhiều thành phần trong một item).
   • Đặt tên cho Frame này là Dropdown Item.
2. Tạo các trạng thái (States) cho Item:
   • Biến Dropdown Item thành một Component (Ctrl/Cmd + Alt + K).
   • Tạo các Variants cho Component này:
     • Default: Trạng thái bình thường.
     • Hover: Khi di chuột qua (thay đổi màu nền hoặc màu chữ).
     • Selected: Khi mục được chọn (thêm biểu tượng checkmark hoặc đổi màu khác).
   • Thiết lập các thuộc tính Property cho Variants (ví dụ: State: Default, State: Hover, State: Selected).

Bước 2: Thiết kế “Dropdown List”

1. Tạo danh sách các Item:
   • Kéo nhiều instance (bản sao) của Component Dropdown Item đã tạo ra.
   • Sắp xếp chúng theo chiều dọc.
   • Áp dụng Auto Layout: Chọn tất cả các instance của Dropdown Item, nhấn Shift + A. Đặt Spacing between items là 0 hoặc một giá trị nhỏ.
   • Thêm Padding cho toàn bộ danh sách (ví dụ: 4px xung quanh).
   • Thêm Fill (màu nền) và Corner Radius (bo góc) cho Frame Auto Layout này để tạo thành một hộp danh sách.
   • Đặt tên cho Frame này là Dropdown List.

Bước 3: Thiết kế “Trigger” (Nút mở Dropdown)

1. Tạo nút kích hoạt:
   • Vẽ một hình chữ nhật hoặc sử dụng Frame (F).
   • Thêm Text (T) (ví dụ: “Select Option”).
   • Thêm biểu tượng mũi tên xuống (ví dụ: từ plugin Iconify hoặc Feather Icons).
   • Áp dụng Auto Layout: Chọn tất cả các phần tử (nền, văn bản, icon), nhấn Shift + A. Đặt Padding và Spacing between items phù hợp.
   • Đặt tên cho Frame này là Dropdown Trigger.

Bước 4: Kết hợp thành “Dropdown Menu” hoàn chỉnh

1. Tạo Component chính:
   • Đặt Dropdown Trigger và Dropdown List cạnh nhau.
   • Chọn cả hai, nhấn Shift + A để tạo Auto Layout.
   • Lưu ý quan trọng: Để Dropdown List ẩn đi khi không hoạt động, bạn có thể:
     • Đặt Dropdown List nằm ngoài Frame chính của Dropdown Menu và sử dụng Prototype để hiển thị/ẩn.
     • Hoặc, đặt Dropdown List vào trong Dropdown Trigger và sử dụng Clip content và Height để ẩn/hiện. Cách này phức tạp hơn một chút với Auto Layout, nhưng hiệu quả cho Interactive Components.
2. Biến thành Component và Variants:
   • Chọn toàn bộ Frame chứa Dropdown Trigger và Dropdown List, biến nó thành một Component.
   • Tạo hai Variants cho Component này:
     • State: Closed: Chỉ hiển thị Dropdown Trigger. Dropdown List bị ẩn (ví dụ: bằng cách đặt Layer visibility của Dropdown List là 0% hoặc di chuyển nó ra ngoài vùng nhìn và sử dụng Clip content).
     • State: Open: Hiển thị cả Dropdown Trigger và Dropdown List.

III. Tạo tương tác (Interactive Components) cho Dropdown Menu

Đây là phần giúp dropdown của bạn thực sự “hoạt động” mà không cần chuyển đổi giữa các Frame trong Prototype.

1. Chọn Component Dropdown Menu (Component chính chứa cả Trigger và List) trên Canvas hoặc trong Assets panel.
2. Chuyển sang tab Prototype.
3. Tạo tương tác cho trạng thái “Closed” sang “Open”:
   • Chọn Variant State: Closed.
   • Kéo một mũi tên tương tác từ Dropdown Trigger của Variant Closed đến Variant Open.
   • Thiết lập:
     • Trigger: On click (Khi nhấp chuột).
     • Action: Change to.
     • Destination: Variant State: Open.
     • Animation: Smart Animate (để có hiệu ứng chuyển động mượt mà khi dropdown mở ra/đóng lại).
4. Tạo tương tác cho trạng thái “Open” sang “Closed” (khi nhấp ra ngoài hoặc chọn một mục):
   • Chọn Variant State: Open.
   • Tương tác đóng khi nhấp ra ngoài (Optional): Kéo một mũi tên tương tác từ nền của Variant Open (hoặc một overlay trong suốt) đến Variant Closed. Thiết lập Trigger: On click, Action: Change to, Destination: Variant State: Closed.
   • Tương tác khi chọn một mục:
     • Chọn một instance của Dropdown Item trong Dropdown List của Variant Open.
     • Kéo mũi tên tương tác từ Dropdown Item đó đến Variant Closed.
     • Thiết lập: Trigger: On click, Action: Change to, Destination: Variant State: Closed.
     • Nâng cao: Để hiển thị mục đã chọn trên Dropdown Trigger, bạn cần thêm một Variant thứ ba cho Dropdown Menu (ví dụ: State: Selected Option 1) hoặc sử dụng các biến (Variables) trong Figma (tính năng nâng cao hơn).
5. Tạo tương tác Hover cho “Dropdown Item”:
   • Chọn Component Dropdown Item (Component con).
   • Chuyển sang tab Prototype.
   • Kéo mũi tên tương tác từ Variant Default đến Variant Hover.
   • Thiết lập: Trigger: While hovering, Action: Change to, Destination: Variant Hover.

IV. Mẹo và thủ thuật nâng cao

• Sử dụng Variables (Biến): Với các dropdown phức tạp hơn, nơi bạn muốn hiển thị giá trị đã chọn trên trigger, hãy sử dụng tính năng Variables của Figma. Bạn có thể tạo một biến kiểu “String” để lưu trữ giá trị của mục đã chọn và hiển thị nó trên trigger.
• Overlay: Đối với các dropdown phức tạp hơn hoặc khi bạn muốn tạo hiệu ứng mờ nền khi dropdown mở ra, hãy sử dụng tính năng Open Overlay trong Prototype thay vì Change to Variant.
• Plugins: Sử dụng các plugin như “Iconify” để nhanh chóng thêm các biểu tượng mũi tên hoặc “Content Reel” để điền nội dung mẫu vào các mục.
• Tổ chức Components: Đặt tên rõ ràng cho các Component, Variants và Properties để dễ dàng quản lý và sử dụng trong các dự án lớn.

V. Kết luận

Tạo Dropdown Menu trong Figma là một kỹ năng thiết yếu cho mọi nhà thiết kế UI/UX. Bằng cách tận dụng sức mạnh của Auto Layout, Components, Variants và Interactive Components, bạn có thể tạo ra những dropdown không chỉ đẹp mắt mà còn hoạt động mượt mà và linh hoạt. Việc thành thạo các kỹ thuật này sẽ giúp bạn xây dựng các prototype chân thực hơn và tối ưu hóa quy trình thiết kế của mình.

Bạn đã từng gặp khó khăn gì khi tạo dropdown trong Figma chưa? Bạn có mẹo nào khác muốn chia sẻ không?