How Do You Make a Drop Down in Figma?

Figma is one of the most popular UI/UX design tools out there. It allows designers to create interactive, high-fidelity designs quickly and easily.

One of the unique features in Figma is its ability to create dropdown menus. A dropdown menu is a menu that appears when you click on it, revealing more options. Dropdowns are commonly used in navigation menus, user interfaces, and other places where you need to present a list of options for users to choose from.

Making a dropdown in Figma is relatively easy and straightforward. To begin, you will need to have a frame with all the elements you want in your dropdown already set up on your canvas.

This could be anything from links to images or icons. Once that’s done, you can start setting up your dropdown.

Step 1: Select Your Dropdown

The first step is selecting which element will be the trigger for your dropdown menu. It’s important to select an element that will clearly indicate when the user can open the menu. This could be a button, link, or icon.

Step 2: Add Interactivity

Once you’ve selected your trigger element, it’s time to add interactivity to it. To do this, select the element and then go to “Interaction” on the right-hand side toolbar. From there, click “Create Trigger” and then select “On Click” as your trigger event.

Step 3: Create Your Menu

Now that your trigger element has been set up with interactivity, it’s time to create your actual menu. To do this, add a new frame onto your canvas and place all of the elements you want in your menu inside of it (i.e., links or images).

Once that’s done, select both the trigger element and the frame containing all of the elements inside of them (while holding shift). Then go back into “Interaction” and select “Create Action”.

Step 4: Connect Your Menu

In this step you will connect your trigger element with its associated action — revealing your menu when clicked on. Click on “Show/Hide Frame Menu” under Actions and then click “Connect Trigger Element…” Select your trigger element from the list that appears and then hit save.

Step 5: Test Your Drop Down

The final step is testing out your drop down menu — make sure everything looks right and functions properly before moving onto other projects!


Creating a drop down in Figma doesn’t have to be complicated or time consuming! By following these five simple steps – selecting a trigger element; adding interactivity; creating a menu; connecting it with a trigger;and testing – anyone can make their own custom drop down menus quickly and easily!