Making a dropdown menu in Figma

Elements of a dropdown menu: A dropdown menu is an interactive UI component that presents a list of options when selected. It includes visual indicators, list items, multiselect dropdown functionality, and nested dropdown options.

Visual indicators: Dropdown menus use visual indicators such as borders, hover states, and chevrons to show that they can be selected. The chevron changes direction to indicate when the menu is active.

List items: Each row in the dropdown list is a selectable item used in navigation menus, action menus, or form fields where users can choose from options.

Multiselect dropdown: Allows users to select more than one item from the dropdown menu, often displayed as removable tag components for easy selection.

Nested dropdown: Used in complex menus to show a hierarchy of options. Combines elements of searchable dropdowns and text input fields for easier selection.

Designing a dropdown menu in Figma:

• Add text and icon to the frame for the dropdown field.
• Include label and helper text above and below the dropdown field.
• Create active and disabled states for the dropdown field.
• Create a component set with different variants for easy customization.
• Add multiselect functionality with a tag component for selected items.
• Create multiple item variants for the dropdown menu list to cater to different scenarios.