Create a DROPDOWN MENU in Figma (Tutorial)

  Рет қаралды 564,304

Mavi Design

Mavi Design

Күн бұрын

Пікірлер: 459
@billnapper5737
@billnapper5737 Жыл бұрын
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.
@samuelakinde842
@samuelakinde842 Жыл бұрын
I still don't understand how he did that at 2:44 minutes, did he duplicate the option 1?
@aasthadoshi145
@aasthadoshi145 Жыл бұрын
I pressed enter, did exactly what he told but still cant find that option
@ramgnz9980
@ramgnz9980 Жыл бұрын
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
@akshaybillore
@akshaybillore Жыл бұрын
​@@samuelakinde842hold Alt key and drag from mouse
@ahmadmujahid-zk5rd
@ahmadmujahid-zk5rd 7 күн бұрын
@@aasthadoshi145 same
@tdobre
@tdobre Ай бұрын
You’ve done this probably a million times, but that was away fast… I’m glad that there’s option for the speed
@Trigger0x10c
@Trigger0x10c Жыл бұрын
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
@deyvisoncruz4352
@deyvisoncruz4352 Жыл бұрын
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".
@Fabiuscha
@Fabiuscha Жыл бұрын
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.
@tudormircea2334
@tudormircea2334 Жыл бұрын
Thanks a lot ! been trying to figure this out all day long...too bad reading the comments is always the last thing I do :))))
@mohadesehnabizadeh5491
@mohadesehnabizadeh5491 Жыл бұрын
thank u so much for this tip:)
@AyeshaKhan-nr2xi
@AyeshaKhan-nr2xi Жыл бұрын
​@@Fabiuschasame problem here
@emendodesigns
@emendodesigns Жыл бұрын
Thank you so much. I wasted about 2 hours fretting over this.
@uimass
@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.
@mavidesign
@mavidesign Жыл бұрын
thank you!
@raevictor9228
@raevictor9228 9 ай бұрын
Stop lying
@drizzy6302
@drizzy6302 7 ай бұрын
no way this is easier
@AlexCarnallUX
@AlexCarnallUX 29 күн бұрын
For anyone struggling at minute 9 connecting the list items to the option 1, 2, 3 etc: -Click on the original dropdown list you created -If it's got a blue border around it, it means it's NOT in the same layer as the dropdown field -So click on the list & find it in the layers panel on the left -Then click on the dropdown field & find it in the layers panel on the left -Next from the layers panel you need to drag the list layer into the dropdown field layer -You'll see the border on the list turns from blue > purple - Now here, if you try and drag it, it can turn back into a separate layer, so I found using the X & Y axis in the right hand panel worked best to keep it in the same layer -Use those X & Y axis options to drag it to where you want it to be -Then voila, it should work for you The issue is that the drop down list IS NOT in the same layer Hope this helps you all because it took me an hour to figure out 🙂
@rubygonzalez516
@rubygonzalez516 11 ай бұрын
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!
@e.m.2042
@e.m.2042 Жыл бұрын
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!
@matijasevictomislav
@matijasevictomislav Жыл бұрын
Thank you, this is the first tutorial I could follow as a beginner and get the result.
@jackh_irl
@jackh_irl Жыл бұрын
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
@Soumya_uiuxproductdesign
@Soumya_uiuxproductdesign 11 ай бұрын
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.
@joelleisaac6054
@joelleisaac6054 11 ай бұрын
​@@Soumya_uiuxproductdesignthank you random stranger
@davidalonso007
@davidalonso007 11 ай бұрын
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.
@elizabethvailo9241
@elizabethvailo9241 11 ай бұрын
It worked! Thank you! @@Soumya_uiuxproductdesign
@kishoreexperience
@kishoreexperience 11 ай бұрын
Awsm Bruhhh
@heartnsoul3357
@heartnsoul3357 11 ай бұрын
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!!
@mohammadw2000
@mohammadw2000 4 ай бұрын
This is the commet yall looking for! Thank you!
@Knee_High
@Knee_High Жыл бұрын
I didnt manage to get the thick stroke working when selecting an option but everything else works perfect. Great tutorial ! Thank you
@kishoreexperience
@kishoreexperience 11 ай бұрын
Same for me.. did u sloved that problem now?
@laurocastro2864
@laurocastro2864 10 ай бұрын
@@kishoreexperience x3....
@laurocastro2864
@laurocastro2864 10 ай бұрын
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...
@oksanakhomenko3922
@oksanakhomenko3922 10 ай бұрын
@@laurocastro2864 thank you a lot for this tip! it works)
@ChosenStars
@ChosenStars 8 ай бұрын
@@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.
@antoinestephensonphotograp6191
@antoinestephensonphotograp6191 7 ай бұрын
There are times i feel like im out of my depth. this is one of those times. but you def explained it well.
@yosht6110
@yosht6110 Жыл бұрын
Always like me a no-nonsense, clear, and concise guide instead of a corny, cringe, over-hyped for no reason guide. Thank you!
@gaxkiller
@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
@MouradLahlali
@MouradLahlali Ай бұрын
I figured it out!...when you desactivate auto layout for the list of option , make sure the layer is inside "default,visible options=yes" layer..............working 100%
@JazminPotts
@JazminPotts 5 ай бұрын
Good tutorial! Had to slow it down and spent almost 6 hours on it (I’m a beginner), but it worked!
@searchofmysteryofficial
@searchofmysteryofficial 9 ай бұрын
Thank you and good job! I purchased the source file as a thank you.
@SamehNoukary-rc8ob
@SamehNoukary-rc8ob Жыл бұрын
You are doing this awfully fast for beginners!
@mavidesign
@mavidesign Жыл бұрын
Thanks for the feedback! I'll remember to slow down next time.
@riiiven
@riiiven Жыл бұрын
Agreed, I slowed down the video too 1,75 speed, helped me follow better, great tutorial either way, very powerful tool.
@Uyai_Inyang
@Uyai_Inyang Ай бұрын
Thank you for this At first it was hard but I had to just follow the steps and understand the concept behind it and it makes sense.
@rhayragatti8067
@rhayragatti8067 Ай бұрын
Thank you SO MUCH for this excellent tutorial. It hellped me a lot. I paused a lot the video to do step by step but it was not very hard. Thank you.
@yukigaruart1111
@yukigaruart1111 Жыл бұрын
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!
@israelafolarinde42
@israelafolarinde42 Жыл бұрын
This works, I was having issues previewing the attached 'list of options' the first time, but after trying what you suggested, it works fine.
@verdasas8446
@verdasas8446 Жыл бұрын
YOU HAVE SAVED MY LIFE!!!!!
@supreethkumar4954
@supreethkumar4954 Жыл бұрын
Bro i have also same problem can you expIain once
@ArtiomNeganov
@ArtiomNeganov Жыл бұрын
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?
@fds29bath
@fds29bath 4 ай бұрын
I had the same issue at 8:05. Instead of using the mouse, you can move the list of options with the x and y axis, you keep it under the parent component
@ashmeebhatt3203
@ashmeebhatt3203 Жыл бұрын
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?
@catalinaperez5993
@catalinaperez5993 7 ай бұрын
I realized that it was because my list of options was out of the default-yes dropdown,, I know its late for a response
@margortega
@margortega Жыл бұрын
Hi! I'm having a problem with the prototyping part. I cannot connect the menu options as you show at minute 11:39. What could be the problem? I followed all the steps. Thank you!
@karol-milainejurgenson3676
@karol-milainejurgenson3676 Жыл бұрын
compare your layers to his! Make sure that list of options is under dropdown menu
@darkkartist
@darkkartist Жыл бұрын
same with me
@alicia.discovers
@alicia.discovers Жыл бұрын
@@karol-milainejurgenson3676 I figured out how to get the list variant in the dropdown menu layer and I still can't get the times to connect. I feel like the error is with those property and options rules, but I don't know yet how to fix that.
@alexlee3456
@alexlee3456 4 ай бұрын
Thank you! You speak a bit fast, but I followed along and succeeded. Awesome!
@dmnkkrs
@dmnkkrs Жыл бұрын
for all those having problems connection the options to the dropdownmenu, check your layers! the optionlist has to be under the open-dropdown component!
@PaigeKeefer
@PaigeKeefer 9 ай бұрын
I am having this problem but what do you mean by check your layers?
@PaigeKeefer
@PaigeKeefer 9 ай бұрын
my option list is directly under the open dropdown
@RebeccaCross-n7u
@RebeccaCross-n7u 11 күн бұрын
So grateful for this! Thank you so much!!
@AditIrwan
@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!
@danielboniveboscan794
@danielboniveboscan794 7 ай бұрын
Thank you. Nice tutorial. Practical and straight-to-the-point 👌
@bahartahani2032
@bahartahani2032 Жыл бұрын
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
@Moominlover940
@Moominlover940 5 ай бұрын
Hi! I'm not able to connect them like at 9:33. Does anyone know why that may be the case?
@Carliexess
@Carliexess 3 күн бұрын
Hey there Mavi! Thank you so much. Just a quick Question: If I use the dropdown component as an asset I am not able relabeling the options of the "list of options" as I put it into my high fidelity wireframe. Do you maybe have an idea or another tutorial so I can figure out what I'm doing wrong?
@mustafaalawad2667
@mustafaalawad2667 Жыл бұрын
iT'S REALY great work; there is one point that I did not understand at the time 08:03 min, once you make a cut for the options component and place it to the select option component and set it to absolute position then it disappears, once move it with the mouse will be out of this component! if I use the vale X/Y it stays in the disappear status. any helpful information pls.
@johnkreis9899
@johnkreis9899 Жыл бұрын
I was encountering this problem and figured out a workaround. After selecting Absolute Position, select each option individually using shift and drag them all down. That should preserve them underneath the correct variant.
@mustafaalawad2667
@mustafaalawad2667 Жыл бұрын
@@johnkreis9899 thank you 😊 learn new thing. I figured out in the same moments that i write my comment by change the X and Y values.
@SheruNCS
@SheruNCS Жыл бұрын
@@mustafaalawad2667 this is not working for me . if i do this then my option component will be out of this dropdown_menu component.
@brandongallaway9476
@brandongallaway9476 Жыл бұрын
@@SheruNCS sorry if this is late but i was having the same problem and i resolved it by selecting the frame you paste the list into and turn off "Clip Content"
@ersimn
@ersimn Жыл бұрын
Thank you for this! Figma is pretty cool but it can be very complex sometimes
@decca7114
@decca7114 8 ай бұрын
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
@blondelina4370
@blondelina4370 Жыл бұрын
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!
@sofiyaaliyu1330
@sofiyaaliyu1330 Жыл бұрын
I'm also having the same issue.
@mosheyagami
@mosheyagami 26 күн бұрын
My brain just melted 😭😭😭😭😭😭 I guess i'll have to watch this video again but on slow motion
@MozhdeZandi-uh9xz
@MozhdeZandi-uh9xz Жыл бұрын
Mavi, please make a tutorial on prototyping. You are the best teacher❤
@manugarg3620
@manugarg3620 Жыл бұрын
That's why to create components and its states I always use XD. Easy and simple........
@geddhedd
@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.
@talaabuhejleh8592
@talaabuhejleh8592 Жыл бұрын
Thank you!!! Looks easy but definitely takes time for a bignneer 😅
@majki88888
@majki88888 Жыл бұрын
For begginer I'd recommend to do a hover button first, and learn what is auto layout and how to use this ^^
@kianna97
@kianna97 Жыл бұрын
Really appreciate this breakdown! I know many designers will find this to be extremely useful!
@user-tu3ny9bb7y
@user-tu3ny9bb7y 11 ай бұрын
it was perfect but it did not work for me i did everything that you did, but it did not work can you give me some solutions?
@xeniszen
@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?
@CreativeSatyal1
@CreativeSatyal1 10 ай бұрын
@mavidesign All were going good but when i make the dropdown menu into absolute position, it cannot be shown when clicking default state
@TerraTechTales
@TerraTechTales 4 ай бұрын
I DIIIIIID IT!!!!!!!!!
@pratheeshsa784
@pratheeshsa784 Жыл бұрын
Hi @mavidesign After completing the whole process, while prototyping everything works perfectly except the selected option is not showing as selected in the list of options. Can you please help me on this?
@190km5
@190km5 Жыл бұрын
i have same problem :(
@samoli02
@samoli02 10 ай бұрын
Same, that part was skipped
@pruthvihammigi9346
@pruthvihammigi9346 Жыл бұрын
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.
@alicia.discovers
@alicia.discovers Жыл бұрын
I'm having the same issue :/
@samuelakinde842
@samuelakinde842 Жыл бұрын
I am lost at the 2:45 minutes, how did you bring out the option1 from the components, before you duplicated it into 5?
@mavidesign
@mavidesign Жыл бұрын
option (mac) or alt (windows) + drag. Alt+Drag - duplicating an object which in this case automatically creates an instance of the component
@samuelakinde842
@samuelakinde842 Жыл бұрын
@@mavidesign thanks
@minq32
@minq32 Жыл бұрын
Thank you so much for the tutorial. However I face an issue of the Selected option state not showing up on prototype just like you show at the end of the video and it seems few people also facing this issue. It would be very helpful if you can make an updated version of this tutorial or share a solution for this :D
@DariaZepedaBello
@DariaZepedaBello Жыл бұрын
Hey! Faced this problem too 😅 Found out that in each interaction of drop-down menus, where there is a selected “Option”, you need to check box “Reset component state” at the bottom of an interaction menu👍🏻
@maine1819
@maine1819 Жыл бұрын
@@DariaZepedaBello hi! can I ask where specifically can I find this? I am also facing this issue. Thank you so much!
@samoli02
@samoli02 10 ай бұрын
​@@DariaZepedaBellothank you for helping me, I stuck in that point and repeat the video for several time but no solution 😁
@Fabiuscha
@Fabiuscha Жыл бұрын
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?
@mujacraft1501
@mujacraft1501 9 ай бұрын
Can you make a tutorial on How to when clicking outside/anywhere the dropdown menu collapse
@beatrizbitencourt3182
@beatrizbitencourt3182 Жыл бұрын
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 :(
@ingebjorggregersen
@ingebjorggregersen Жыл бұрын
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
@belsnickel5538
@belsnickel5538 4 ай бұрын
Great tutorial. Do you have a tutorial on how to navigate to a specific screen once an option is selected in the dropdown? I suspect I need to assign variables but I cannot get it to work.
@mogaro7525
@mogaro7525 Жыл бұрын
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.
@ddfdae
@ddfdae Жыл бұрын
I am having a similar issue, did you end up solving it?
@mogaro7525
@mogaro7525 Жыл бұрын
@@ddfdae I had to manually format the selected options for each option list, instead of setting the 'selected' variant state
@krystynaserotyuk3942
@krystynaserotyuk3942 Жыл бұрын
@@mogaro7525 thanks🙂
@samuelakinde842
@samuelakinde842 Жыл бұрын
Thanks for the content I'm having issue with the prototype part as am unable to connect each options to the no variants at 9:32 minutes
@limrek
@limrek Жыл бұрын
same here
@mavidesign
@mavidesign Жыл бұрын
Make sure the "list of options" is nested inside of the "yes" variant. Sometimes Figma can paste object above the component and not actually inside of the component. Your problem sounds like you're trying to connect something outside of the component to something inside of the component.
@Remy.
@Remy. Жыл бұрын
I moved my list of options down by dragging the entire frame which caused it to move outside of the component. Instead of pulling down the edge of the frame so it stays in.
@amandaquadrospulz9152
@amandaquadrospulz9152 5 ай бұрын
Amazing tutorial! Thank you!
@honeylavender1122
@honeylavender1122 Жыл бұрын
But let’s say you have this component nested in a Settings page with other form fields and that page is all autolayout-ed - when you want to show the flow of it all - when you toggle the drop down on, it pushes down all the other components on the page - anyway to tell figma to overlay the drop down?
@ChantelleHorisberger
@ChantelleHorisberger Жыл бұрын
That's what I was hoping to find here :(
@peterantheunis9462
@peterantheunis9462 7 ай бұрын
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!
@lindsaycitraro848
@lindsaycitraro848 Жыл бұрын
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?
@leslycracchiolo4881
@leslycracchiolo4881 2 ай бұрын
Thanks for the video! I'm unsure how you were able to change the frame size for the list of options without moving the text as well. Every time I try the text stays centered and doesn't align left.
@jeanclutario-pereira4783
@jeanclutario-pereira4783 8 ай бұрын
Hiii thank you so much for this tutorial! I did it. You're very helpful!
@emilyemslee
@emilyemslee Жыл бұрын
This is so smart! Please make more videos about animations🔥🔥🔥
@Cloe-l6d
@Cloe-l6d 3 ай бұрын
Thank you and it's really helpful. I have one question. If I want to apply different style for each options (like color), sholud I apply it instance or is it better to apply on option main component?
@lonleyangel95
@lonleyangel95 9 ай бұрын
in case someone (like me) wondered, in 2:47 to create instance click alt while dragging for windows!
@richiechan929
@richiechan929 Жыл бұрын
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
@vanessapervaiz1053
@vanessapervaiz1053 25 күн бұрын
How would you be able to make multiple different drop downs using this? Would you be able to copy it or need to create it from scratch each time?
@its_lilcent9916
@its_lilcent9916 2 ай бұрын
Great video, i really appreciate your time and efforts. Please if there are other designs beneath the drop-down how do we make it responsive when we click on the drop-down to show. Cause right now mine is just on top of the other designs .
@vamshisri3431
@vamshisri3431 Жыл бұрын
You have explained clearly.....thanks for the video
@Sara-k-r-216
@Sara-k-r-216 4 ай бұрын
Hi! This was very helpful, it did move a little fast but if I put it in a slower speed I was able to follow better. I do have one problem... now that I am using this menu for an actual navigation, I can't have more than one click instance for the options. For example, Option 1 is set to go to the view on click, but I also need it to navigate to a page. Is there a way to bypass this?
@VUATV
@VUATV 5 ай бұрын
I have followed every step and even made it 3 times but somehow I could never connect the Option 1 in the drop menu to the Option 1 selected at 9:29. Can anyone please help me? I learning figma in 2024 version.
@irisackerman2825
@irisackerman2825 3 ай бұрын
Can someone help me I cannot connect the list of option prototype with the variant
@sep6cars
@sep6cars Жыл бұрын
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.
@charlescollins-davies7308
@charlescollins-davies7308 10 ай бұрын
Please i did this exact thing. My options are selecting properly, but the shaded part for the selected option isnt showing after selecting an option on the drop down menu. Please why?
@ajinkyawankhade5550
@ajinkyawankhade5550 Жыл бұрын
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
@MuhammadAqeel37
@MuhammadAqeel37 3 ай бұрын
Please, make a lecture on figma components and these properties.
@jannickpedersen4620
@jannickpedersen4620 Жыл бұрын
waaaaay toooo complicated lol, these 14 min took me an hour and i am lost after 8 minutes lol
@mavidesign
@mavidesign Жыл бұрын
Sorry to hear that! Fortunately you can always download the source file if you're in a rush and don't want to spend time learning how to build this. Unfortunately there's sometimes no easy way to get around things, especially with more complicated and/or interactive designs
@jannickpedersen4620
@jannickpedersen4620 Жыл бұрын
@@mavidesign I was like to my boss - i can code this in like 10 minutes xD Sooo can i skip dropdown in Figma and he said says xD I am in internship and UX / UI is not my primary skillset, i am fullstack in php, javascript and ReactJS ect. So the whole Figma part in the beginning was like, WTH. I made everyrthing components in the begging and didnt understood why nothing came when i played the prototype. Then i learned the frame, group, grid / colums and that auto layout. I do find Figma better for web prototyping that Photoshop now
@karabomasilela5465
@karabomasilela5465 Жыл бұрын
spent over 2 hours on this and still didn’t get it right lol
@graciajuniora5608
@graciajuniora5608 10 ай бұрын
The prototype of the options its complicated
@jannickpedersen4620
@jannickpedersen4620 10 ай бұрын
@@graciajuniora5608 luckily I'm very good at CSS, so I just made hardcoded example's instead. 💯
@shanus5162
@shanus5162 9 ай бұрын
Thank you so much for the precious knowledge @mavi design But as we created the dropdown options as absolute positions the drop down is overlapping on other fields wile using it in app design Please make a video about how to use this component in mobile app design and website design
@Terror.Senpai
@Terror.Senpai 9 ай бұрын
You need to change your canvas stacking to "First on top" which is located in the auto layout settings
@ghaithtabaa
@ghaithtabaa Жыл бұрын
This guy is the Usain Bolt of Figma... He's just flexing at us at this point.
@michellesudhakar9961
@michellesudhakar9961 Жыл бұрын
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!
@mahalafemovich8963
@mahalafemovich8963 2 ай бұрын
Thanks! Question, how do I go about renaming the options when I use an asset from my library? If I change them, for some reason when I go into view my prototype, it always says "option" instead of what I renamed it to.
@MarcusSousaZerum
@MarcusSousaZerum 2 ай бұрын
My big problem is I can try to create 3 dropdowns when I reuse them in all Design Systems, but the content (Option 1,2,3,4,5) is impossible to reuse. When I change and reuse, all values reset the original component. And I need to copy the same component, change the value to work.
@CRiStiCole
@CRiStiCole Жыл бұрын
Question, how do I make it so that I am able to click one option in the drop-down and it takes me to another page.Since the component is closed, i tried by placing the component on a frame, right click->change variant->visible options on yes (so I see the drop down)->dragged the prototype from the drop down to another page->then set visible options on no, but unfortunately it doesn't work that way, please a little help? Thank you!
@mavidesign
@mavidesign Жыл бұрын
in the list of options, try connecting one of the options in prototype (for example "Option 1") to the page you need. This connection is then replicated wherever you place this component. I will be making a video about this mechanism soon, actually
@daleMoW
@daleMoW 7 ай бұрын
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
@우앙-g9y
@우앙-g9y Жыл бұрын
Thank you for this tutorial ❣
@М.Харченко-х8с
@М.Харченко-х8с Жыл бұрын
This is grate video! Thanks so much. The best explanation.
@BlessedTechie
@BlessedTechie Жыл бұрын
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
@mavidesign
@mavidesign 11 ай бұрын
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 KZbin - thank you for your understanding! Mavi
@kellyp509
@kellyp509 10 ай бұрын
Thank you for this. I don't get what I'm doing wrong but when testing the prototype, the drop down won't show the selected state of whatever option I'm on.
@psyrealism6536
@psyrealism6536 8 ай бұрын
I am facing the same issue. Whenever I click on the drop-down it opens as expected and selecting an option changes to the closed state. But when opening the menu again, the current option is not selected. I've gone over this tutorial 3 times from scratch and I still cannot figure out. If anyone here knows how to fix this I would really appreciate it!
@youngloenoe
@youngloenoe 8 ай бұрын
@@psyrealism6536 For me only the first option is selected. The others will not appear Selected. Were you able to figure it out?
@m.darhouba8948
@m.darhouba8948 Жыл бұрын
First of all, thank you for this amazing tutorial but I have one question I tried to follow this video but when I noticed in the final result when clicking on the option 1 for example it is not selected in the dropdown menu even though I set its state to selected any fix for this issue
@Fabiuscha
@Fabiuscha Жыл бұрын
I am experiencing the same problem. I did the tutorial some months ago and it did work but lately something changed and the process doesn't work anymore.
@espen990
@espen990 10 ай бұрын
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?
@christeUXUI
@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?
@carloslafa8092
@carloslafa8092 11 ай бұрын
Thank you so much for that great 🤩tutorial im just having an issue with the selected option when I preview it
@mavidesign
@mavidesign 11 ай бұрын
To get specific 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 KZbin - thank you for your understanding! Mavi
@osipreciosa
@osipreciosa Жыл бұрын
Best channel ever!! Keep it up 😍
@XLVIMedia
@XLVIMedia 3 ай бұрын
Is there a way to fix these so that if you have multiple dropdowns in the same frame each dropdown options box displays on top? Currently the dropdown options box displays below the other dropdowns and makes it very difficult to use. - Thank you!
@brandongallaway9476
@brandongallaway9476 Жыл бұрын
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???
@mavidesign
@mavidesign 11 ай бұрын
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 KZbin - thank you for your understanding! Mavi
@philipl7647
@philipl7647 2 ай бұрын
Same... Annoying asf
@rev1223
@rev1223 Жыл бұрын
This was super helpful..thank you so very much!
@uicodegraph
@uicodegraph Жыл бұрын
thank u man good tutorial! a bit complicated but i can do it!
@anjali_art955
@anjali_art955 11 ай бұрын
May i ask why the button is not in the active state when we already choose an option and wanted to change the option?
@ogblvck
@ogblvck Жыл бұрын
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??
Micro animations in Figma
8:05
Figma
Рет қаралды 151 М.
MY HEIGHT vs MrBEAST CREW 🙈📏
00:22
Celine Dept
Рет қаралды 85 МЛН
How I Turned a Lolipop Into A New One 🤯🍭
00:19
Wian
Рет қаралды 12 МЛН
Animated Dropdown Menu in Figma With Variables | Figma Tutorial
24:41
DesignWithArash
Рет қаралды 17 М.
Dropdown menu in Figma
5:07
Nick Babich
Рет қаралды 280 М.
Reduce Prototypes by 50% (Simple trick) | Figma Tutorial
5:41
How to create an interactive dropdown component in Figma | New Figma UI 2024 |
5:34
Create a Functional HAMBURGER MENU NAVIGATION in Figma (Tutorial)
15:28
The CORRECT (and lazy) way to prototype | Figma Tutorial
5:00
Create an Interactive App Navigation Menu in Figma
14:55
Mavi Design
Рет қаралды 113 М.