Probably the most widespread UI parts in product design is the dropdown menu. It’s a versatile part utilized in varied contexts, resembling kinds, filters, navigation, or settings. A dropdown menu is a vital component in a design system, as it’s utilized in designing apps and web sites.
One of the best half about dropdown menus is their versatility. They are often made easy or complicated, relying on the use case.
For many of us, Figma is by far the device of alternative for UI design, in line with UX Tools’ 2023 Design Tools Survey. On this article, we’ll have a look at the weather of a dropdown menu, its completely different variations, stroll by the steps to design a dropdown menu in Figma, together with finest practices for designing dropdown menus. I’ve additionally created a Figma template that comprises all of the parts wanted for the tutorial.
Components of a dropdown menu
A dropdown menu is an interactive UI part that presents an inventory of choices when chosen. Customers can select one or a number of choices from a dropdown menu, which can end in an motion or habits as soon as the system is knowledgeable of the choice.
Some examples of such actions or behaviors can embody filtering content material, navigating to a unique web page, altering languages, or opening a modal. Earlier than we start making the dropdown menu in Figma, let’s get aware of its completely different parts.
Set off
As with all interactive UI part, a dropdown menu wants a set off for the person to pick to open it. The set off for the dropdown menu can range.
In a kind, the set off is most definitely a kind area, which comprises some placeholder textual content to point that the person can choose it. In different circumstances, resembling a navigation or context menu, a dropdown menu set off can merely be a textual content or icon button:
Visible indicators
Dropdown menus use visible indicators that point out the dropdown menu will be chosen, resembling a border surrounding a kind area, a hover state, or a down chevron.
A chevron is usually used for dropdown menus, as they level within the course {that a} menu will seem. When the dropdown menu is energetic, the chevron factors up, indicating that deciding on it once more will shut the menu:
In navigation or context menus, you need to use a number of dropdown menus, which enforces the expectation on the person that deciding on one other menu merchandise will end in a dropdown. In these circumstances, utilizing a chevron might not be essential as a result of it takes up extra house. Utilizing a hover state is adequate for the person to grasp that the dropdown menu merchandise is selectable.
Labels and helper textual content
Labels assist customers perceive the aim of the dropdown menu and what sorts of choices they’ll count on to see. They seem proper above the dropdown area in barely smaller textual content. Helper textual content is positioned beneath the sector to supply error messages or descriptions that may assist customers with deciding on choices:
Listing
Choosing a dropdown menu triggers an inventory of choices dropping down from the set off. This record comprises selectable objects and will be scrollable if the variety of choices exceeds the house out there for the dropdown. The record can even embody parts like a search bar to assist customers discover the choice that they’re in search of:
Listing objects
Every row within the dropdown record is a selectable merchandise. Hovering your cursor over an inventory merchandise ends in a spotlight to point that the merchandise is selectable.
In a dropdown menu, deciding on an merchandise closes the menu and reveals the person’s choice within the area. To enhance searchability, record objects will be separated into classes by dividers:
Dropdown menu variations
Easy dropdown
A easy dropdown is probably the most customary variation of the dropdown menu. It’s utilized in navigation menus, motion menus, or kind fields the place the person can choose one out of some choices:
Multiselect dropdown
You should utilize a multiselect dropdown to permit customers to pick a couple of merchandise in a dropdown menu, resembling in a filter. Every record merchandise can comprise a checkbox to permit for multiselection. Nevertheless, some multiselect dropdowns spotlight every chosen row as a substitute of utilizing checkboxes.
In each circumstances, the shape area will replace to point out the chosen objects normally as detachable tag parts, to permit customers to simply unselect an choice with out having to open the dropdown menu once more:
Nested dropdown
A nested dropdown is usually utilized in complicated navigation or motion menus to symbolize a hierarchy of choices. The primary dropdown menu comprises high-level classes, which, when chosen, end in a secondary dropdown menu consisting of choices inside that class:
Searchable dropdown
A searchable dropdown comprises a search bar mounted to the highest of the dropdown record. When the dropdown menu is energetic, customers can use the search bar to kind in a search question. Because the person sorts, the record objects slender down to point out solely the outcomes that comprise the search question.
An analogous model of the searchable dropdown is the combobox, which makes use of a textual content enter area to permit customers to immediately kind their search question, which can slender down the dropdown record:
Making a dropdown menu in Figma
Now, we’ll stroll by methods to make a dropdown menu step-by-step in Figma. For this instance, we’ll create a dropdown menu used for a kind area, together with each single choice and multiselection. We’ll additionally create customizations, resembling nested dropdowns, a search bar, headers, and dividers.
First, let’s begin by creating the set off first, then the record objects, which when mixed will make the dropdown record.
Creating the set off
The set off for the dropdown menu might be a choose part. Add a body to your Figma file with a 250px width and 44px peak. This would be the base of your dropdown area. Give the body a white fill and a 1px grey stroke.
Subsequent, add auto structure to the body. Be sure that the structure choice is horizontal. Set the hole to auto and alignment to the middle, then set the horizontal and vertical padding to 10px. It will enable us to neatly house out the contents of the sector.
Add 16px textual content to the body as placeholder textual content on your dropdown area. Then, add a down chevron icon to the body as properly. The auto layout ought to align the textual content to the left and the icon to the suitable of the sector:
Label and helper textual content
To incorporate a label and helper textual content, add textual content in a smaller font, round 12px, above and beneath your dropdown area. Use auto structure to evenly distribute the label, dropdown area, and helper textual content 4px aside, whereas aligning them to the highest left.
Now, you’ve accomplished making the crammed state of your dropdown area:
Lively state
Make a duplicate of your crammed state dropdown area. When the dropdown area is energetic, the border ought to point out that it’s at present open. Change the border colour of the dropdown area’s body to a unique colour, like blue. Change the down chevron icon to an up chevron icon, or just rotate it 180 levels. The chevron ought to point out the course that the menu would transfer if the dropdown area is chosen. When it’s open, clicking the dropdown area would shut the menu.
Error state
To create the error state, make one other copy of your crammed state dropdown area. An error state normally highlights the sector in crimson, so change the border colour to crimson. Change the helper textual content colour to the identical crimson, as that is the place you’d place your error message:
Disabled state
Lastly, a kind area wants a disabled state within the occasion that the motion shouldn’t be enabled for the person. Make one other copy of your crammed state dropdown area and alter the fill colour to grey. Then, change the colour of the textual content contained in the dropdown area to a darker grey. It will point out to customers that the sector is unselectable:
Create part set
Now that your 4 states are accomplished, choose all of them and create a part set. It will make every of them a variant of the identical part, which can assist you to simply swap between variants while you apply an occasion of the part in your designs.
Identify your important part Dropdown. Create a property on your part known as State and title every variant accordingly, resembling Crammed, Lively, Error, and Disabled:
You may want an occasion of the dropdown area with out the label or the helper textual content, or each. Copy every variant and conceal the label. Then copy them once more and conceal the helper textual content.
Lastly, copy them once more and conceal each the label and helper textual content. Add properties to your important part for Label and Helper textual content, with Sure or No assigned accordingly. It will make it simple to activate and off the label and helper textual content in your situations:
Including multiselect
Since we would like the power to multiselect from this dropdown menu, we’ll want so as to add a tag part to the dropdown area, which signifies the variety of objects chosen. This tag ought to have an X icon beside the quantity to permit customers to clear their choice with out opening the dropdown menu:
Make a duplicate of your whole Crammed, Lively, and Error variants inside your part set. The Disabled state received’t want a multi-select variant as a disabled dropdown area would simply present the placeholder textual content.
In every area, add the tag subsequent to the placeholder textual content. Add the tag and textual content into an auto structure body with a 4px hole between objects so they continue to be aligned to the left, whereas the chevron icon stays aligned to the suitable.
Lastly, add a property to your important part known as Sort. Assign the variants as Easy or Multiselect accordingly. Now that we’re completed creating the dropdown set off, let’s transfer on to the record objects:
Creating record objects
Our dropdown menu record could have a number of merchandise variants to accommodate for various use circumstances. Whether or not your designs want a easy dropdown, multi-select dropdown, nested dropdown, or search capabilities, we’ll create the required record objects to make a versatile dropdown menu.
Default
Much like the dropdown area, every record merchandise ought to have the identical dimensions. Add a body with a 250px width and 44px peak. Set the fill to white.
Subsequent, add auto structure to the body. Be sure that the structure choice is horizontal. Set the hole to 0px and alignment to the left. Set the horizontal and vertical padding to 10px, similar to we did with the dropdown area.
Add 16px textual content to the body as placeholder textual content on your record merchandise. You’ve simply created the default record merchandise:
Default — chosen
To point that the record merchandise is chosen, change the placeholder textual content to a unique colour, such because the blue that was used for the dropdown area’s energetic state. The placeholder textual content must also use a heavier font weight, like Semi Daring or Daring.
However merely altering the font might not be sufficient to make the chosen record merchandise noticeable. Add a checkmark icon to the merchandise, whereas setting the body’s hole to auto and alignment to the middle. It will align the placeholder textual content to the left and the checkmark icon to the suitable:
Checkbox
Now, let’s create a checkbox record merchandise for our multi-select dropdown menu. Make a duplicate of the default record merchandise and add an unchecked checkbox icon to the left of the placeholder textual content. Add auto structure across the icon and textual content with a 4px horizontal hole between objects. It will preserve them evenly spaced and aligned to the left aspect of the merchandise:
Checkbox — chosen
For the chosen state of the checkbox record merchandise, apply the identical remedy to the placeholder textual content because the default chosen one. Daring the textual content and alter the textual content colour to blue. Change the unchecked checkbox icon with a checked checkbox icon, additionally crammed in blue:
Class
The class record merchandise might be used to open nested dropdown menus. Merely make a duplicate of the default record merchandise, and add a proper chevron icon to the body. Be sure that the auto structure hole is about to auto and alignment to the middle, in order that the textual content stays aligned to the left whereas the icon is aligned to the suitable:
Hover states
For every record merchandise that you just’ve created up to now, make a duplicate. Change the fill with the identical blue colour, however regulate the opacity to 10 p.c. It will give the record merchandise a spotlight to point that it’s selectable when a cursor hovers over it:
Header
In case your record is complicated and may profit from having separate sections, use a header record merchandise to call them. This merchandise shouldn’t be selectable and won’t have a hover state. To create it, merely make a duplicate of the default record merchandise and daring the placeholder textual content:
Divider
The divider is used for separating your record into sections. It’s merely a horizontal line with a 250px width. Add an auto structure body to it with a 1px vertical padding and align it to the middle:
Search
The search bar is an non-compulsory record merchandise that lives on the prime of the dropdown record. Utilizing the bottom body of 250px width and 44px peak, set the auto structure padding to 4px on all sides. Then add one other body within it with a grey stroke border and 4px nook radius. Set the horizontal and vertical resizing to Fill. That is the container for the search bar.
Subsequent, add auto structure to the search bar body. Utilizing a horizontal structure, set the hole between objects to 8px and alignment to the left. Set the horizontal padding to 10px. Now, the content material of the search bar might be spaced correctly.
Add a search icon round 20px vast and tall into the search bar body. Subsequent to it, add in placeholder textual content that claims Search. Each the icon and textual content must be in mild grey:
Search — energetic
When the search bar is energetic, the search icon disappears. The sunshine grey placeholder textual content is changed by enter textual content, which makes use of the default textual content colour. Add an X icon to permit customers to cancel their search question. Set the auto structure hole to auto and alignment to heart, in order that the textual content stays aligned to the left whereas the cancel icon is aligned to the suitable:
Create part set
By deciding on all the completely different record objects you simply created, create a part set to make every of them a variant of the identical part. Identify your part set Listing-Merchandise:
Creating the record
Now that you’ve your record merchandise variants created, it’s time to place all of them collectively into an inventory. The order during which you add the record objects doesn’t actually matter, as they’ll all be swapped with one another. Nevertheless, the search bar ought to all the time be on the prime.
Add 10 to fifteen situations of the record merchandise and add auto structure to them. You’ll be able to cover a few of these objects for added flexibility in case your designs require it. Be sure that the structure is vertical and the vertical hole between objects is about to 0px. Create the body right into a part known as Listing. Change the record merchandise variants to those that you really want. The doable mixtures are infinite.
Give your record part a white fill, in order that the background colour shines by the hover state record objects. Lastly, add a grey stroke and a drop shadow, as it is going to seem on prime of different parts on the web page. It will create a way of depth and separation to make the dropdown record simpler to learn:
Including the record to the set off
Now that we’ve got our record part created, let’s revisit our dropdown part. We wish to add an occasion of our record part to every Lively state variant of the dropdown part, in order that we not solely have an energetic dropdown area, but in addition the dropdown menu.
Choose every Lively state variant and paste in an occasion of the record part. The helper textual content will separate the dropdown area from the record, so set the positioning of the record to Absolute place. It will exclude the record from the auto structure circulation of the dropdown part, however nonetheless preserve it within the auto structure body. Transfer the record upwards till it connects with the underside border of the dropdown area, overlaying up the assistance textual content:
For the multiselect dropdown variants, make sure that your record makes use of the checkbox record objects. Now your dropdown menu is accomplished:
Greatest practices for utilizing dropdown menus
Now that we’ve made our dropdown menu part in Figma, listed here are some finest practices for utilizing dropdown menus in your designs.
Order record objects logically
A dropdown menu record must be simple to scan. Order the record objects in a approach that may make sense to the person. Contemplate widespread record ordering resembling alphabetical, by final title, or by most often used.
Don’t use greater than two nested dropdowns
Whereas nested dropdowns could also be essential to deal with complicated record choices, in case your menu requires greater than two nested dropdowns, think about making a separate dropdown for that class of choices. Nesting too many dropdown menus makes it troublesome for customers to find the nested choices as they’re hidden inside a number of ranges of menus.
Enable customers to clear their multi-selection with out opening the dropdown menu
Customers ought to have the ability to clear a multi-select dropdown menu with out opening the menu. The clearable tag that seems within the dropdown area when a variety is made permits customers to do this. This makes it handy for them to clear the dropdown, which saves the person time.
Guarantee keyboard accessibility
To make your dropdown menu accessible, make sure that it helps keyboard customers. The person ought to have the ability to navigate the menu utilizing the up and down arrows, whereas the left and proper arrows ought to open and shut nested dropdowns. Because the person strikes by the dropdown menu with the keyboard, the hover states of every record merchandise will present them which choice they’re at present targeted on. By hitting the Enter key, the person ought to have the ability to choose the choice, whereas hitting the Esc key ought to shut the dropdown menu.
Dropdown menu Figma template
Why reinvent the wheel? You’ll be able to download this Figma template with all the dropdown essentials.
Conclusion
A dropdown menu is a vital UI part for product design. We’ve walked by the steps to making a dropdown menu in Figma together with a number of variations, resembling a multi-select dropdown, a searchable dropdown, and a nested dropdown. Now, you need to use the versatile dropdown part in your designs to go well with varied use circumstances.
Simply bear in mind to observe finest practices when utilizing the dropdown menu in your designs. Be sure that record objects are ordered logically in order that customers can simply discover what they’re in search of. Attempt to use a most of nested dropdowns, or in any other case think about separating dropdown menus. Within the case of multi-select dropdown menus, enable customers to clear the dropdown with out having to open the it because it saves them effort and time. Lastly, all the time make sure that your dropdown menu is keyboard accessible so that each one customers can use it.
The put up Making a dropdown menu in Figma appeared first on LogRocket Blog.
