Create a DROPDOWN MENU in Figma (Tutorial)
HTML-код
- Опубликовано: 20 май 2024
- Get the SOURCE FILES for this project ($1.99): payhip.com/b/sVu0a
Visit my STORE: bit.ly/mavi-design-store
Explore Mavi Design COURSES : bit.ly/mavi-design-courses
Get FIGMA for FREE: bit.ly/get-started-with-figma
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-professional-plan
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 
Хобби
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
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!
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!
Thank you, this is the first tutorial I could follow as a beginner and get the result.
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
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".
I can only reset "all changes" or "interactions" which doesn't lead to the desired outcome. I can't make the selected option visible. It did work some months ago but something seemed to have changed.
Thanks a lot ! been trying to figure this out all day long...too bad reading the comments is always the last thing I do :))))
thank u so much for this tip:)
@@Fabiuschasame problem here
Thank you so much. I wasted about 2 hours fretting over this.
What a wonderfully elaborated tutorial, very helpful ❤❤
Thank you for this! Figma is pretty cool but it can be very complex sometimes
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?
Mavi, please make a tutorial on prototyping. You are the best teacher❤
Ditto on all the thank yous! It took a minute (not literally) to get this right, but I got it! Word to the wise: Make sure "clip content" in right margin is unchecked or you will not see the drop-down selections. Thanks, Mavi Design!!
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.
Thank you. Nice tutorial. Practical and straight-to-the-point 👌
Thank you very much. I have a few problems with reproducing the tutorial:
1) when at 8:05 I try to move the "list of options" with my mouse, Figma just kicks it out immediately out of the parent component (dropdown menu) and up to the top level. What the heck?
2) when using this drop-down, it doesn't overlaps the elements lying below it. How to fix this?
You have explained clearly.....thanks for the video
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!
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.
thank you!
Stop lying
no way this is easier
Really appreciate this breakdown! I know many designers will find this to be extremely useful!
Thank you for clear explanation !
Thank you for this tutorial ❣
You are doing this awfully fast for beginners!
Thanks for the feedback! I'll remember to slow down next time.
Agreed, I slowed down the video too 1,75 speed, helped me follow better, great tutorial either way, very powerful tool.
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!
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
Hiii thank you so much for this tutorial! I did it. You're very helpful!
Awesome tutorial, thank you so much!
thank u man good tutorial! a bit complicated but i can do it!
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?
I'm really grateful for this tutorial and the Figma community. Like many others, I struggled at the 2:44 point and wasn't able to see the option to "Fill Container". I too was thinking maybe there was a special duplicate process or something. NOPE! The video shows EXACTLY how to do it and I just wasn't paying close attention. So before I reveal the SIMPLE answer, I say hats off to Mavi Design and I won't doubt your mad skills again! (BIG GRIN). OK, here's the big reveal . . . there is no special duplicate process . . . all you need to do is after you have all five options created, just as shown in the video, then turn it into a frame and then a component . . . right there, Mavi has the component selected, and say "I'm going to change the size like this, PRESS ENTER". Bingo, if you don't press ENTER, you have the component selected and you WILL NOT see the option to "Fill Container". As long as you do exactly like Mavi says and PRESS ENTER, which drills into the component and selects all the stuff inside, then go to the horizontal resizing menu and the "Fill Container" option is there waiting for you. Okay, I probably could have written this much shorter, but if you were struggling and this helped, give my comment a Thumbs up, so I don't feel so alone in my confusion. Ha! Thanks Mavi Design . . . I'm a subscriber.
I still don't understand how he did that at 2:44 minutes, did he duplicate the option 1?
I pressed enter, did exactly what he told but still cant find that option
Thx million! I was looking for your comment. I forgot to do the COMPONENT and I was just trying to 'Fill Container' in the frame instead on the component. You helped me to save some minutes
@@samuelakinde842hold Alt key and drag from mouse
It was an excellent tutorial, very easy to follow! I'm designing a coffeeshop app and want to use this dropdown for coffee and milk type selection but i have no idea how to add these items to cart with selected options? Any help would be great!
Really helpful!! Thank you so much for this
Always like me a no-nonsense, clear, and concise guide instead of a corny, cringe, over-hyped for no reason guide. Thank you!
Thanks a bunch! at least one useful tutorial for creating a monthly dropdown! Cheers!
Thank you and good job! I purchased the source file as a thank you.
This is so smart! Please make more videos about animations🔥🔥🔥
There are times i feel like im out of my depth. this is one of those times. but you def explained it well.
This is grate video! Thanks so much. The best explanation.
Thanks a lot! Great video 👍
So very helpful thank you
Best channel ever!! Keep it up 😍
Something I found out while testing is that we can make the dropdown separated from the "Select option" menu if we make an auto-layout with it before making it a set of components. Then when we create the set with that auto-layout we have the space to move the open menu freely and it will still be inside the auto-layout. Damn, I hope someone can understand XD. But now the smart animate does some weird, subtle stuff that I'm trying to figure out lmao. Thanks again for this tutorial and the other when you explain the auto-layout!
This works, I was having issues previewing the attached 'list of options' the first time, but after trying what you suggested, it works fine.
YOU HAVE SAVED MY LIFE!!!!!
Bro i have also same problem can you expIain once
Great video...., this is tutorial that I looking for. Thank you so much.
Next, I suggest tutorial data table interactive with figma...
Such a good tutorial!! Thank you for showing me how to do this :)
Do I have to make a new component for each dropdown menu I need? Or can I customize the text inside the instance of the dropdown menu for each instance? Changing the text in one instance isn't working, and I need multiple different dropdown menus that look the same, just with different text. Do I need to make a new component for each one?
Thanks a lot for this tutorial. I used it some months ago and it did work perfectly but something has changed. I can't make the selected option in the dropdown visible. I set the selected Option to active in the list but in prototype it always shows the default list. Any idea why?
This was super helpful..thank you so very much!
So much hustle!!!!
Thank you, you helped me a lot
Super helpful! Thanks a ton.❤💯
Really helpful video. I enjoyed every bit of it👍
Very useful, thanks mate!
HI. i love your tutorial, but how you duplicate options? every time when i do command+d i just create one more option inside of the component, how can i create a duplicate of component, not making one more option of component?
OMG
Thanks❤
It was complicated, but I did it )))😊
how do you add hyperlink to an option that you have selected from the list of options? like when you click on one of the options, it will link to another screen page
all good, just one question, if I want to change the size of the options box do I have to do it in the main component? or there is a way when can I ajust the size of my dropdown entirely
Thanks so much!
I didnt manage to get the thick stroke working when selecting an option but everything else works perfect. Great tutorial ! Thank you
Same for me.. did u sloved that problem now?
@@kishoreexperience x3....
guys!! I figured it out! basically you need to name each component of the "option list" and also name every "option list" differently inside the component "dropdown menu"... so what I did was name option 1 "option 1" and so on and so forth, and named the "option list" as "option list 1" for the list of options that should appear under option 1, and so on and so forth...
@@laurocastro2864 thank you a lot for this tip! it works)
@@laurocastro2864 Thanks man, I had issues with getting the selected option highlighted in the dropdown menu. I changed the list of options to "list of options 1" , "list of options 2" and so on and it solved the problem, thank you.
@mavidesign All were going good but when i make the dropdown menu into absolute position, it cannot be shown when clicking default state
Amazing, Thanks
thank you
Small tip: If your Selected option buttons, in the dropdown, aren't the correct colour/visual in the prototype... despite all of your prototype being linked up the same as the vid
It's due to the component naming being the same for all your buttons. Rename your selected button component variables, in the dropdowns, to something else like "Selected button" and your prototype will work
Or another solution is- maybe when you made connection from "select an option" to "select an option" with option list for each 5 separate option there you have to check mark "reset component state" In the prototype option.
@@Soumya_uiuxproductdesignthank you random stranger
Man I owe you a beer, coffee or anything. I watched the video a lot of times to see what I'd missed, but I couldn't run it correctly until I saw your comment.
It worked! Thank you! @@Soumya_uiuxproductdesign
Awsm Bruhhh
Thank you!! You explained clearly and it worked for me!
Thank you so much for this. Understand components and variables a lot more because of this, especially for menu drop down design.
thank you sir
thanks for the greate video and explenation!
at the same time im wondering that there is no collection for basic dropdown widgets in figma
Thank you very much for this tutorial, i have tried it and it works but i encountered one problem.
When i am on the prototype screen, the selected option does not display the selected property.
I have redone each step twice over and I get the same result, the hover works.
If i change the selected option from the master component, it works but when i change it manually on each instance, it doesn’t work. Why??
Thank you!!!!!!
thaaaaaaaank you for this video
for all those having problems connection the options to the dropdownmenu, check your layers!
the optionlist has to be under the open-dropdown component!
I am having this problem but what do you mean by check your layers?
my option list is directly under the open dropdown
I followed the steps but in the dropdown menu the selected option is not appearing infact all the Option dropdown menus are showing the default one with no selected option
Can anyone help me out here where I'm going wrong
Thanks
Thank you
Gracias 🤩
Nice! Subbed.
You are awesome!!!
That's why to create components and its states I always use XD. Easy and simple........
Thank you!!! Looks easy but definitely takes time for a bignneer 😅
For begginer I'd recommend to do a hover button first, and learn what is auto layout and how to use this ^^
Very nice tutorial and Figma is definitely is going into the right direction! But saying that... I made the same dropdown menu including all the visual effects in Axure and it only took me only 5 minutes using dynamic panels!
Thank you for the tutorial, but I have a question, how to make it to return to "Select an option" when you click outside of dropdown?
I'm learning Figma for a weeks. I feel like this rushing. if there's aw that you could not be rushing will be helpful. aw found this helpful.
Iam not getting any interaction while select option 1 to option 1 .Can You please tell us why sir.
thank you! that is great tutorial. please, could you say if it is possible to close the dropdown when mouse is clicking outside the options menu? I am searching for the solution, but found only the way with frames for each variant, however it would be more elegant to do it into component. What do you think?
Only solution I can think of is to do this through “open overlay” interaction. That enables you to check “close when clicking outside”. Not sure how to ensure you’ll get each menu item highlighted as you choose different options, but I think that’s the way:)
I'm trying have this button in multiple places, but at each page when I protoype, it shows the last selection. Any idea on how to fix that?
thx u💗
Thanks so much... This tutorial is really helpful. I made multiple drop-down and framed them together but the drop down options goes on top of other drop-down. Please how can I fix it? Thanks
To get personalized help and feedback on your project, please join my free Discord server.
You can send me an Instagram DM or reach out to my email (About section of my channel) to get your invite.
I'm unable to help everyone over RUclips - thank you for your understanding!
Mavi
@4:55 Figma will not let me have 2 “while hovering” states. Trying to find a way around this with the selected hovering state. Not sure if settings changed here within the past couple of months.
Is it possible to do the options with variables so they use the same text?
The making of the frames and components is good I wish you actually spent time explaining how and why you added properties or named them that way. I think that where a lot of the general confusion is coming from
in case someone (like me) wondered, in 2:47 to create instance click alt while dragging for windows!
Thank u..
I loved this tutorial, I just want to know something: can this be used in a generic way? so that I create this component once and as I use it I can change the options accordingly? I'm building a form page with a LOT of dropdown menus needed and I was wondering if there's a more effective way of doing this, rather than creating 9 or 10 different components that do the same, just have different text written :(
I was wondering about the same thing. It would take way to long to create 100 of these :) I need a lot of them as well
ty bro
May i ask why the button is not in the active state when we already choose an option and wanted to change the option?
Can you make a tutorial on How to when clicking outside/anywhere the dropdown menu collapse
Followed all the steps but I am not able to do the last prototyping part. it's just not getting connected the way I want. also, the video is pretty fast.
I'm having the same issue :/
If I don't do this It's cover in coding?
Somehow my list of options in the default- yes drop down menu wont connect to the other drop down menu-no visible options, like you do at the 9:20 mark. I can't seem to figure out why thats happening. Any ideas?
I realized that it was because my list of options was out of the default-yes dropdown,, I know its late for a response
How do you create another 'state' at 1:22? It seems to go in the same layer and immediately under option, but if I make a copy, which is the only way I can see to do it, it doesn't happen the same way, it goes in its own layer.
Edit: I found in the comments a suggested video which answered my question - Thanks: ruclips.net/video/M_Pd4rqQjQo/видео.html
The only issue that i have is that when, while testing, i want to choose another option it always sets it to Option 1. I, for example, select option 5, it sets it to option 5, and then i want to change the option, when dropdown menu drops it's again set to Option 1, i tried to fix this but no matter how i connect everything, it either works like the way i explained or doesn't work at all.. I really followed carefully everything u did.. Im sorry, its hard to explain hahah But great tutorial, thank you!
I'm also having the same issue.
Anyone get the prototyping problem that the Selected Options list doesn't appear when an Option is selected? I've got all the right connections in prototype, and when testing I get the Yes state option showing, but the List of Options is always the default state, not the selected option.
I am having a similar issue, did you end up solving it?
@@ddfdae I had to manually format the selected options for each option list, instead of setting the 'selected' variant state
@@mogaro7525 thanks🙂
I have followed this tutorial 100% to the T and even gone back and restarted several times now and yet at 8:04 when I select absolute positioning it hides the list of options. What am i missing here or what wasn't shown in the video???
To get personalized help and feedback with your project, please join my free Discord server.
You can send me an Instagram DM or reach out to my email (About section of my channel) to get your invite.
I'm unable to help everyone over RUclips - thank you for your understanding!
Mavi
Hello! Great tutorial, but I had encountered a problem wich I cannot get through. After I paste the list of options into "select an option" and click absolute position, there is an error which states "click content disabled for Option=default, visible option=yes. If anyone has an idea what I'm doing wrong I would greatly appreciate the help. I'm trying to do this one thing for three days now, I tried different options, and I followed this guide exactly like you said and still get this error. Pls help 😅