Dropdown menu in Figma

[@callumjd6699]

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

[@gwarriorng]

suce doucement

[@Dablkwid0w2008]

The music sound like the news about to start

[@vivianavillabona387]

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

[@ignaciodiaz2501]

Same hermana, same

[@aakritisr455]

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

[@feelcollins4358]

That would affect the animation, it would do a flip animation instead of a rotation

[@michelleborja4513]

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

[@ceciliaw1065]

I love your tutorials, short and to the point

[@morakinyobukola9586]

I love your tutorial...short and straight forward

[@jahanzaibnadeem3440]

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

[@Theakam36]

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

[@Jeff-zc6rr]

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.

[@AaradhyaShukla]

If you don’t wanna put bit of effort in uiux then maybe field not for you most good ux guys have graphic design background

[@Comander311]

​@@AaradhyaShukla the idea is to save time, not to obbligate to create from scratch. Mucho "bits of efforts" are s waste of time, when you have multiple workloads from different clients.

[@brittanyrudquist9384]

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

[@charliesangels6363]

But aren't we supposed to design for it to be selected too?

[@jumpTo888]

Great Tutorial, easy steps. Thank you, Nick!

[@alanmully589]

Very helpful but how do you make it possible to select one of these options?

[@-damsidiq9072]

its so quick brotha!🔥

[@PaigeKeefer]

How do you make this scrollable/clickable?

[@randomshiz.7495]

Whenever I click on the blank space The menu option i.e. Select blinks in blue, please help with the solution

[@micheliu3405]

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

[@jahanzaibnadeem3440]

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

[@yash.32978]

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

[@jocelynmagtubo6505]

Thank you! Finally found the easiest way to do this

[@grandrizewhoez3392]

same now i just have to actually do it lol

[@AaradhyaShukla]

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

[@QuynhNguyen-hehehe]

So helpful and easy-to-do

[@rafaelbueno7567]

this video is amazing, thank you man

[@minhaanjum9797]

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

[@jiddanfaqihhaikal549]

Amazing video! thank you!. but how do we make the top bar "Select" be the one we chose?

[@renataeger]

I was wondering the same

[@sarah.wright]

@@renataeger Same here, all the work for nothing it seems...

[@allhailthecore3136]

You, sir, are a life saver. Thank you!

[@yashsoni8043]

But we can't export this code in html css I am not going to get a drawdown like this !? Please help

[@Marina-vb9by]

wonderful tutorial. thank you!

[@ddraccoo]

When I hover over the first selection, like in the video it'd be Apple, it does nothing, it just hovers over Banana. It's not until my mouse isn't on any dropdowns until the Apple selection gets Hovered over, only for a split second though. Banana and Orange works fine though. Help?

[@manishamurkhey3129]

true i wasted one hour to figure it out that what went wrong

[@CareyWinder]

struggling what happens around 2:08 as to how you make the boxes go away - please can you or someone clarify?

[@noname-zd6wu]

remove the stroke.. on the control panel on the right, under 'strokes', he clicks the 'negative' symbol to remove them. Then he adds stroke back so that it applies to the whole section as one single box or container.

[@ujjwal3151]

By pressing the eye icon in the layer panel you can make any component visible/invisible

[@MrGooof]

Anyone know why only the first hover effect works but the following do not?

[@CamillaLanyon]

Thanks, great tutorial. I have created these on a few different pages and they work fine when each page is launched individually but when clicked from one to the other via the dropdown it seems to disable all the functions of the page its linking to. Any ideas?

[@jerronickog9933]

How you create different page

[@asmaarooj6490]

Very helpful! Thanks!!!

[@lucasliberato3921]

Genius. Thanks bro.

[@5500figmaclasses]

Am trying to this tutorial but not it's working.

[@ghinaafifah2276]

It really helps me, thank you!

[@masonbentley7933]

best tutorial out. thank you

[@alexisndinda9937]

such a nice and easy way to teach! thanks

[@sarah.wright]

It is indeed, but it seems that one step is missing: "How to select an option?"

[@noraatef1579]

Yes I have the same questiion @@sarah.wright

[@yanastoyanovskaya]

If there are too many options for the drop menu, how can you make it with scrolling so it is not that long of a list?

[@ashikahmed462]

kzbin.info/www/bejne/pIelepVrZZ59g68&ab_channel=ProductSensei You can have an idea from this video

[@NANyopo]

i tried this but it doesnt show in prototype ahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh tasukete!!!

[@alysonnaagas3477]

This is the easiest! Thank you!

[@sarah.wright]

Cool and easy way for a dropdown, but I have one issue: How can I select an option, that's the whole point of a dropdown. Thanks!

[@abhinabgupta2361]

For that you need to set up two separate interaction commands and only the paid version of figma can make that happen

[@sarah.wright]

What will be the two separate interactions? @@abhinabgupta2361

[@philipho9050]

God bless you sir

[@IvonaZdravevska-e1b]

Thank you .A lot of help.

[@jaminizam9450]

Wow great. How to create keyboard in figma for typing in search bar?

[@babichnick]

If you mean prototyping a functional input field that allows you to type actual characters, it's possible to do that, but it won't be easy. I find it much easier to code an actual input field than prototype it in Figma.

[@jaminizam9450]

@@babichnick how to make it? Can you tell me?

[@jaminizam9450]

@@babichnick is keyboard much need for doing project in figma? Because when we click the search engine the keyboard will appear as in open overlay. Thats why I am asking.

[@trustokafor]

I can't finish this video I got confused

[@nayimrodriguez5879]

Nice video

[@bowie2621]

easiest tutorial!!!!!!!!! thanks

[@maislawljeroxx]

Amazing !!

[@FrancoBeluni]

Thank you. God bless you

[@paulacro]

THANK YOU THANK YOU!!!!!!!!!!!!!!

[@nonfictioncraft]

Thank you

[@azmisalabi5612]

love it

[@artbylaura3257]

The music on this video is not great. Makes it very hard to focus.

[@Pranjaldarkcoc]

How this fuc*ing "select" came from ? 4:44

[@vouners1660]

Tysm!

[@DoubleTrIpLe-p2q]

Thx

[@Misterjacobs]

Everybody knows how to do this shit. IF you want to impress me, make a stack of three of these where the dropdown menu overlays the item underneath and does not push each other down when you open it.

[@dankither2586]

Thank you, appreciate the tutorial, but... the music... make it stop! lol

[@yvoneconcepcion2707]

u r wasting my time with that editing arrow for dropdown menu lol, worst tutorial

[@soldier4082]

subscribed

[@0xtchftg]

easy and straight to the point tutorial. Thank you!