How to create an interactive dropdown component in Figma | New Figma UI 2024 |

[@Khelekwen]

A little more slowly with some more detail would be appreciated. I'm a Figma novice and trying to use this to learn something new for work but navigating FIgma is still difficult for me so following along at this speed was a challenge. Also, using the circles to show mouse position before click would be a tremendous help for me! You moved so fast from one thing to another that I couldn't even see what you were clicking on half the time. A bright colored cursor would also help to keep up with where you are in the menus (I use red or High Vis Yellow during presentations at work). Lastly, break out the steps more. When I was taught in elementary school how to teach or explain things, we had an exercise of teaching someone to make a peanut butter and jelly sandwich who knew nothing and only just popped into existence. You had to break down opening the cupboard, taking out the peanut butter, placing it on the counter, opening the lid by twisting it counterclockwise while holding the jar in place, opening the drawer, taking out the butterknife, etc. Simply saying "put peanut butter on one side of the bread...etc." was inadequate as they didn't know how to get the bread or peanut butter. If you take this type of mindset and speak to and point out every selection, I think it would help newbies such as myself quite a bit to learn from you. Beyond the critique, I really appreciate you making this tutorial and will watch it a few more times to try to create the menu. I've still not been successful as it seems every few steps it just isn't working for me as I see it happen on your screen and I don't quite understand why. I'm sure I'm just missing a step that you did or something isn't set up correctly but it's started to frustrate me.

[@jonathanwaterworth]

Thank you for your thorough comment. I’m always trying to learn and improve!

[@VictorAlejandroOrmenoHidalgo]

@@jonathanwaterworth yes man try to do it again but slower haha anyway good video

[@davejeanclerc3066]

Thanks so much for this simple approach to making a dropdown. If I wanted to have multiple dropdowns on the same screen, each with their own distinct options, would I just duplicate each of the three key components? Thanks again!

[@jonathanwaterworth]

Thanks for the comment, Dave! Yes, that would work. You can place the instances on your page, open them individually, and fill out the menu options for each one. Then, set them back to the default variant so that when a user opens them, they will display the correct information.

[@jonathanwaterworth]

A quick tip to avoid an issue I often run into: make sure they are the same width. If they have different widths, you might encounter a strange issue where the dropdown expands inconsistently when opened.

[@tranang1259]

THANK YOU SO MUCH YOU DON'T KNOW HOW MUCH THIS MEANS TO ME RIGHT NOW😭😭😭 I have been struggling and struggling with components and variants but with only a 5-min-long video of yours, my life is saved 😭😭I truly appreciate this

[@jonathanwaterworth]

Thanks so much! I'm glad I could help 😁

[@rootdeyan]

what about dropdown with scroll option with more selections?

[@jonathanwaterworth]

Thanks for the comment! Yep totally possible, I will add it to my list to make videos about. You need to have an extra wrapper for the content and change the 'scroll behaviour' settings in the prototype tab, you can follow this kind of method to get it to work help.figma.com/hc/en-us/articles/360039818734-Prototype-scroll-and-overflow-behavior

[@LexieABr]

Hey, thanks for the great tutorial. I am struggling with the variants - I don't think I am clipping them properly but I am not sure how to fix it.

[@jonathanwaterworth]

Sorry to hear, I'm happy to look at your figma file if you share it and try to help

[@LexieABr]

@@jonathanwaterworth All fixed - I just reloaded Figma.

[@jonathanwaterworth]

@@LexieABr woohoo great to hear!

[@LexieABr]

@@jonathanwaterworth PS. Thank you for your prompt reply!

[@anissa1822]

Hi ! thanks for the video, I managed to do everything except that my menu appears as a whole and not item by item (in a drop down style) and it's driving me crazy !! I tried everything, the interactions are set on smart animate (ease out from closed to open and ease in from closed to open)... I don't know what else to do to make it work

[@jonathanwaterworth]

Sorry to hear you are struggling with it! Did you set up the items within the menu correctly? Can you link a Figma file here so i can have a look at what you have done wrong?

[@LexieABr]

Is it possible to link the individual items to different frames? I.e. if we select "Item 1", it takes us to "Frame - Item 1"

[@jonathanwaterworth]

Yep this is possible, I could make a video on how to make a menu like this, would you find that helpful?

[@saleksieva]

That would be awesome! Yes, please!

[@LexieABr]

@@jonathanwaterworth That would be very helpful! Yes, please!

[@gloriacassidy]

Thanks 🙏🏼

[@jonathanwaterworth]

Thank you!

[@unknownentity648]

Dam, im completely novice to figma, i followed everything, i even play the vid in 0.25 but unfortunately it did not work for me 😢

[@unknownentity648]

Never mind, it worked! So, here's what I did at 4:45: I used CTRL + C and CTRL + Z to copy and paste, which was wrong. The solution is simple-you just need to hold ALT and drag, and it worked! HAHA 😅

[@gasparcho]

This is a great tutorial but how would you get the dropdown to open without pushing the other things underneath it down if you use auto layout. i.e. I have a dropdown in a big auto layout component and when I go to the prototype and open the dropdown it pushes everything else down. I see you didn't use auto layout so do you have any suggestions on if you are.

[@jonathanwaterworth]

This is an annoying limitation i've found with Figma, there isn't a great way to do it within frame You can make the menu that opens position absolute, so then it doesn't push anything down BUT if it's within an autolayout frame it will go behind the items below it If this is something you need to test as example a filter menu with lots of dropdowns stacked below each other, I'd recommend not putting them all in an autolayout frame that way you can get the function of opening them and not affecting the items below

[@gasparcho]

@@jonathanwaterworth Yeah that is what I ended up doing. I used auto layout to get everything pixel perfect then detached that and grouped the elements together and it started to work. Thank you for the help tho!!

[@jonathanwaterworth]

​@@gasparcho Great to hear you figured it out! Yep thats what I normally do, it's an annoying limitation of the way things 'stack' in Figma!

[@sturm_wind]

Day fault?

[@jonathanwaterworth]

Not sure what that means sorry?

[@pavlinamalikova8259]

I lostet it when you said create component and in your Figma nothing appeared my variants show under the first one

[@jonathanwaterworth]

Oh no sorry, did you figure it out?

[@fatjay9402]

Sorry this is a little bit to fast ... i did first try and it didnt work.. i found my mistake .. ( cliping was still on ) but it was 100% because of the speed.. anyway thanks i learned something

[@jonathanwaterworth]

Thanks for following along! Sorry, I'm still trying to find my 'teaching speed' I sometimes get a bit carried away and move a bit quickly! Thanks for the feedback 😀

[@epramatarov]

Bro, you lost me. Just slow down a little, not everyone is a pro like you..

[@jonathanwaterworth]

Sorry mate, I get too excited talking about Figma 😅 will keep learning and try slow down in future videos! Thanks for your comment ✌️

[@juniorrpk3244]

ok vc fez a copia e como faz isso? horrivel essa video aula. Odiei !

[@jonathanwaterworth]

Desculpe pelo incômodo. Qual parte você achou que não fez sentido