How To Make a Drop Down Menu in Figma

Dropdowns help users select one option from a list of choices compactly and efficiently. This allows them to navigate forms and interfaces more efficiently, improving overall user experience. In this guide, we will demonstrate how to create a dropdown menu in Figma.

Note: Before proceeding with the steps below, you need to have a basic understanding of frames, components, instances, variants, auto layouts, prototyping, and the options inside the properties panel.

What we cover

Before Getting Started: Start by navigating to Figma and sign in with your credentials. We suggest you get started with a new design by clicking on the New design file rather than working on the old design file from Recently Viewed.

Develop Different Option States

After the new design file is loaded, start by adding text and convert it into an auto layout by pressing Shift + A. For the option to appear, add color using Fill and adjust the padding and position.

Once the Default state is created, convert it as a component by pressing Ctrl + Alt + K key combinations.

Now select the Default state and create variants of it to represent different option states. To do this, click on the Add variant option in the toolbar.

If you have done it right, you will have four default states. Now modify the three new variations created to have four different states: Default, Hover, Selected, and Selected Hover.

After you’ve created different option states, create interactions between the Default and Hover states first.

Create an interaction between Default and Hover

Next, create interactions between the Selected and Selected Hover states to finish the creation of different option states.

Create an interaction between Selected and Selected Hover

Here is a sample demonstration of how different option states respond in a prototype.

Different option states

With different option states developed, it is time to develop the layout for the dropdown. Here are the steps to do it:

Start by creating instances of the default position first and ensure they are placed on each other as if they are options in a dropdown.

Now update the numbers and add auto layout to the list of options created by pressing Shift + A. Next, make the frame a component by pressing Ctrl + Alt + K, and you will see all the default options listed as a single component.

With the options ready, proceed with creating the dropdown button. We have considered a Text box, added text, rounded its corners, adjusted padding, and changed colors. Next, we selected everything, added an auto layout to it, included a vector, and made the entire frame a component.

To add a variant to the dropdown button you created, click on the Add variant option from the toolbar.

If you do it right, you will find two dropdown buttons. Before proceeding, ensure you modify the second dropdown.

The reason for creating two dropdown buttons is that one has no menu, and the other has a menu attached. To get started, create an instance of the options list created in Step 2 in this section and paste it into the bottom dropdown button.

When you paste the instance of the list of options, the dropdown will be disfigured. To fix it, select the added instance and click on Absolute position from the Properties panel.

Doing this will fix the position of the list of options. However, adjust the frame by changing its size and aligning it with the dropdown button, as shown below.

At this stage, you will have the dropdown menu layout ready. To make the dropdown fully functional, you need to make iterations for each option. Here are the steps to do it:

Start by creating a new variating by selecting the dropdown button and clicking on Add variant. Now, adjust the variant to create an iteration for Option 1.

Now repeat the same for all options and create an interaction (On click) for each dropdown button and its associated option in the list of options, as shown below.

Create interaction for each dropdown button

Quick Tip: If you can’t link the options and the dropdown buttons, ensure the options list is a part of the dropdown it is added to.

After successfully creating each iteration of the dropdown button without a menu, create the iterations with a menu by copying, pasting, and rotating the vectors, as shown below.

Similarly, copy the list of options and paste it for each dropdown button with a menu, as shown below.

Copy and paste the list of options for each dropdown buttons

After successfully finishing each iteration, update the list of options by changing the selected value with respect to the option listed in the dropdown button.

Now, create a to-and-fro interaction (On Click) between the dropdown button without a menu and the one with a menu for all iterations.

Create interaction between both dropdown buttons

After linking the dropdown button without a menu and the one with a menu for all iterations, you will find the interactions between all interactions, as shown below.

After finishing all the complex steps, the dropdown menu is ready. If you do it right, you will have a result like the one below.

Final result of the dropdown in action

Wrapping Up

Congratulations on learning how to create an interactive dropdown menu in Figma!

The demonstration displayed above to create an interactive dropdown menu in Figma can be complex if you’re new to Figma. We suggest you learn Figma basics and read the articles linked below to understand better the steps and the tools/features used in this guide.

How To Use Components in Figma

How To Create a Frame in Figma

How To Edit a Component in Figma

How To Embed Figma Prototype in Website

How To Record Figma Prototype