Dropdown menu in Figma

Подписаться 9 тыс.

Просмотров 229 тыс.

50% 1

5 min tutorial on how to design an interactive dropdown list or menu in Figma.
In this video, we will create a dropdown component from scratch using text and polygon elements. After that, we will add interactivity in Prototype mode (show how to open the dropdown list and apply the on-hover effect on individual options).
--
Twitter: / 101babich
Instagram: / 101babich
#dropdown #dropdownmenu #dropdownlist #uidesign #ui #userinterface #userexperience #ux #productdesign #uidesigntutorial #userinterfacedesign #designinfigma

Наука

Опубликовано:

4 окт 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 65

@vivianavillabona387 11 месяцев назад

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

@michelleborja4513 Год назад

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

@ceciliaw1065 2 месяца назад

I love your tutorials, short and to the point

@Dablkwid0w2008 Год назад

The music sound like the news about to start

@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 4 месяца назад

suce doucement

@Theakam36 2 месяца назад

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

@jumpTo888 2 месяца назад

Great Tutorial, easy steps. Thank you, Nick!

@-damsidiq9072 Год назад

its so quick brotha!🔥

@morakinyobukola9586 13 дней назад

I love your tutorial...short and straight forward

@ghinaafifah2276 Год назад

It really helps me, thank you!

@rafaelbueno7567 7 месяцев назад

this video is amazing, thank you man

@minhaanjum9797 Год назад

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

@Jeff-zc6rr 4 месяца назад

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.

@masonbentley7933 Год назад

best tutorial out. thank you

@RadmilaKussi Год назад

Thank you for this amazing and easy turotial! Everithing is wotkin well, except last step. When I am playing prototype, the last step (variant) does not shows as it expected. Could please you advise what it could an issue?

@Marina-vb9by 22 дня назад

wonderful tutorial. thank you!

@user-lr3wo7te2h Год назад

Thank you .A lot of help.

@alysonnaagas3477 Год назад

This is the easiest! Thank you!

@micheliu3405 8 месяцев назад

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

@jocelynmagtubo6505 Год назад

Thank you! Finally found the easiest way to do this

@grandrizewhoez3392 Месяц назад

same now i just have to actually do it lol

@QuynhNguyen-hehehe 3 месяца назад

So helpful and easy-to-do

@aakritisr455 10 месяцев назад

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

@feelcollins4358 9 месяцев назад

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

@jahanzaibnadeem3440 4 месяца назад

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

@maislawljeroxx Год назад

Amazing !!

@brittanyrudquist9384 Месяц назад

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

@user-xb1jh8hw9n 5 месяцев назад

Thank you. God bless you

@azmisalabi5612 Год назад

love it

@paulacro 5 месяцев назад

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

@vouners1660 Год назад

Tysm!

@allhailthecore3136 12 дней назад

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

@jahanzaibnadeem3440 4 месяца назад

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

@PaigeKeefer 9 месяцев назад

How do you make this scrollable/clickable?

@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...

@user-de2qp1hc1e 5 месяцев назад

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 4 месяца назад

How you create different page

@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 8 месяцев назад

Yes I have the same questiion @@sarah.wright

@MrGooof 11 месяцев назад

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

@Kingzzz__ Год назад

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

@charliesangels6363 8 месяцев назад

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

@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.

@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 Год назад

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-nVBIb509JMM.html&ab_channel=ProductSensei You can have an idea from this video

@5500figmaclasses 5 месяцев назад

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

@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

@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 11 месяцев назад

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

@sarah.wright 11 месяцев назад

What will be the two separate interactions? @@abhinabgupta2361

@artbylaura3257 Год назад

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

@Misterjacobs 5 месяцев назад

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.