Create a DROPDOWN MENU in Figma (Tutorial)

In today's Figma interactive component tutorial, we will be creating a functional dropdown menu using Prototype and smart animate. You'll be able to create a component that behaves very similarly to the actual final result and it'll make your Figma prototypes more interactive and believable.

Topics: figma interactive components, figma prototyping, dropdown menu in figma, form dropdown

—————————
© 2022 Mavi Design

[Triggerxc]

Thank you for the tutorial, very easy to follow as a beginner, sometimes figma doesn't want to cooperate for some reason, but retracing my steps usually solved every issue

[e.m.]

Thank you so much for this excellent tutorial. It took me about an hour to do this but I'm so happy I kept at it, I'm so pleased with the results. I can't thank you enough!

[rubygonzalez]

It took me a lot of pausing the video and doing it myself but I finally got there! Thank you so much this was so helpful!

[matijasevictomislav]

Thank you, this is the first tutorial I could follow as a beginner and get the result.

[bahartahani]

Great Video! Highly recommended, even though had been following the instructor step by step and made the first chapter less than a minute the second part took days to find out about the magic of the Parent Component!! It's 12:58 am just solved the problem. watch the screen and details carefully, GOOOD Luck :D

[shardulmeshram]

What a wonderfully elaborated tutorial, very helpful ❤❤

[christeUXUI]

Really good tutorial, Im using this for a calendar drop down, any advice on how to keep the selection bar fixed at the top and have each option scroll underneath?

[danielboniveboscan]

Thank you. Nice tutorial. Practical and straight-to-the-point 👌

[AditIrwan]

This is so helpful! I was learn alone when try to make this dropdown menu. Unfortunately, i fvckup. Now I know from this video this is so complicated but it’s important to try. Thank you!

[geddhedd]

Is there anyway to use nested instances like you did on the single choice radio button component walkthough? This is a great tutorial and thanks for sharing, but it would be even more useful if the end component was one that you could edit with the text inputs on the instance itself. I'm not sure how easy this will be modying so much text for each drop down menu within a prototype.

[kianna]

Really appreciate this breakdown! I know many designers will find this to be extremely useful!

[deyvisoncruz]

Thank you very much! Excellent video and very well explained.

Update: To display the selected option in the dropdown menu just check the option "Reset component state" in interaction details for options 1, 2, 3, 4 and 5 that were added in the horizontal of "Select an option".

[michellesudhakar]

Thank you for this wonderful tutorial. Any suggestions on how to use this for an app? As there is no hover stage for mobile unless i assign a down arrow key to move between options. Appreciate your help Thanks!

[sararamirz]

Thanks a bunch! at least one useful tutorial for creating a monthly dropdown! Cheers!

[uimass]

I've watched numerous videos trying to figure this out, and you're the only one who's made it super easy to understand. It's quite impressive how others tend to overcomplicate things.

[jeanclutario-pereira]

Hiii thank you so much for this tutorial! I did it. You're very helpful!

[ersimn]

Thank you for this! Figma is pretty cool but it can be very complex sometimes

[gaxkiller]

Thx a lot, I like that you didn't spend hours on simple task. For those finding it too fast, just play the video in slow mode :)
Btw -> I am a figma beginer. Never used any design tool

[luongtramy]

Really helpful!! Thank you so much for this

[xeniszen]

Thanks for the video! loved it.
QUESTION: IF I have say 2 different dropdowns one has 3 options and the other has 5 options. Do i have to create another component with the exact number of options or I can hide 2 options in the 5 option component?