Figma Dropdown List

Preview

Figma Dropdown List

Figma Dropdown Component

The Dropdown List component displays a pop-up with options for users to choose from. It includes interactive dropdown elements for hover, clicks, and active states.

The dropdown is a versatile component that can be nested into other components, such as Date Pickers, ComboBox, and Time Pickers.

Dropdown UI Best Practices

Support up/down arrow keys for item selection and enter key for confirmation;
Implement type-to-search functionality for quicker option finding in long lists.

Dropdown List Anatomy

Set	Variants	Properties
DropdownListSearch	24	Size XS, Small, Medium, LargeItems x2, x4, x6, x8, x10, x12
DropdownList	24	Size XS, Small, Medium, LargeItems x2, x4, x6, x8, x10, x12

The file shows the list at XS, Small, Medium and Large sizes with 2 to 12 items, a search variant, ListItem states Default, Hover, Focused and Disabled, and three example menus: a commands menu with shortcuts, an account menu with a user header, and a filter menu.

Dropdown List AI Prompt

Paste this into Claude, ChatGPT, or Figma Make:

Build a Dropdown List component in Figma in XS, Small, Medium and Large sizes with 32, 40, 48 and 56px rows. It is a white panel with a hairline border and a soft shadow. Rows are ListItem instances with a label, an optional leading icon and an optional right-aligned shortcut or chevron; states Default, Hover with a light grey fill, Focused filled in brand blue with white text, and Disabled in light grey text. Make the panel a variant of item count: x2, x4, x6, x8, x10 and x12. Add a DropdownListSearch variant with a ListSearch field at the top in the same four sizes, with a search icon and a Search placeholder and states Default, Hover and Typing. Compose three examples: a Commands menu with rows like Copy, Paste here and Bring to front with their ⌘ shortcuts, an Account menu with a user name header and rows Account, Settings, Privacy & security, Notifications, Integrations and Dark mode, and a Filter menu with Sort Ascending, Sort Descending and Custom Filter. Make a dark mode variant.

Source