Dropdown menu in Figma

5 min tutorial on how to design an interactive dropdown list or menu in Figma.

In this video, we will create a dropdown component from scratch using text and polygon elements. After that, we will add interactivity in Prototype mode (show how to open the dropdown list and apply the on-hover effect on individual options).
--

#dropdown #dropdownmenu #dropdownlist #uidesign #ui #userinterface #userexperience #ux #productdesign #uidesigntutorial #userinterfacedesign #designinfigma

[vivianavillabona]

Millll graciassss me salvaste tantos tutoriales largos y el tuyo en 5 minutos hizooo todoooo. AMOOOO!!!

[michelleborja]

Muchas gracias. Después de ver 10 tutoriales, este ha sido el que me sirvió <3

[callumjd]

a true god amongst men oh thank the lord you have just saved my life making an easy video on this. You are a true hero in my eyes and I will forever be grateful for what you have done for me. I cant believe I've finally done this dropdown

[ceciliaw]

I love your tutorials, short and to the point

[Dablkwidw]

The music sound like the news about to start

[Theakam]

Simple and straight to the point...Thank you so much

[jumpTo]

Great Tutorial, easy steps. Thank you, Nick!

[RadmilaKussi]

Thank you for this amazing and easy turotial! Everithing is wotkin well, except last step. When I am playing prototype, the last step (variant) does not shows as it expected. Could please you advise what it could an issue?

[minhaanjum]

Amazing... very nice way of teaching....keep it up :)

[aakritisr]

Thank you for the tutorial, it was really helpful.
One smol tip: you can invert the "dropdown" icon by simply pressing "shift + v".

[jahanzaibnadeem]

Thanks but what to do if we also want to add click state also in this ..means we keep click style different but how to add in this

[morakinyobukola]

I love your tutorial...short and straight forward

[micheliu]

omg thank you for this video. I just starting to use Figma and it's took me ages just to make a dropdown menu ;-;

[yash.]

thank you for this information i spend 1 day of this drop down box and i complete this task so thank you so much

[jocelynmagtubo]

Thank you! Finally found the easiest way to do this

[PaigeKeefer]

How do you make this scrollable/clickable?

[AaradhyaShukla]

Thanks so much this is so much easier idk why people over complicate these 😂

[Jeff-zcrr]

I thought figma actually had a built in dropdown. You must create one from scratch. Figma is just a graphic design tool. Not really a UI tool.

[jahanzaibnadeem]

thanks for easy video but one problem occurring that after clicking one menu option than we click other menu option but first one doesn't close

[brittanyrudquist]

This is so helpful! Is there a video on what happens when the user selects an item from the dropdown?