Dropdown menu in Figma

Ғылым және технология

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

Пікірлер: 62

  • @vivianavillabona387
    @vivianavillabona38710 ай бұрын

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

  • @michelleborja4513
    @michelleborja4513 Жыл бұрын

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

  • @ceciliaw1065
    @ceciliaw10652 ай бұрын

    I love your tutorials, short and to the point

  • @callumjd6699
    @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

    @gwarriorng

    4 ай бұрын

    suce doucement

  • @Theakam36
    @Theakam362 ай бұрын

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

  • @Dablkwid0w2008
    @Dablkwid0w2008 Жыл бұрын

    The music sound like the news about to start

  • @jumpTo888
    @jumpTo888Ай бұрын

    Great Tutorial, easy steps. Thank you, Nick!

  • @-damsidiq9072
    @-damsidiq9072 Жыл бұрын

    its so quick brotha!🔥

  • @minhaanjum9797
    @minhaanjum9797 Жыл бұрын

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

  • @ghinaafifah2276
    @ghinaafifah2276 Жыл бұрын

    It really helps me, thank you!

  • @rafaelbueno7567
    @rafaelbueno75677 ай бұрын

    this video is amazing, thank you man

  • @masonbentley7933
    @masonbentley7933 Жыл бұрын

    best tutorial out. thank you

  • @jocelynmagtubo6505
    @jocelynmagtubo6505 Жыл бұрын

    Thank you! Finally found the easiest way to do this

  • @grandrizewhoez3392

    @grandrizewhoez3392

    Ай бұрын

    same now i just have to actually do it lol

  • @Marina-vb9by
    @Marina-vb9by8 күн бұрын

    wonderful tutorial. thank you!

  • @alysonnaagas3477
    @alysonnaagas3477 Жыл бұрын

    This is the easiest! Thank you!

  • @Jeff-zc6rr
    @Jeff-zc6rr3 ай бұрын

    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.

  • @micheliu3405
    @micheliu34058 ай бұрын

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

  • @user-lr3wo7te2h
    @user-lr3wo7te2h Жыл бұрын

    Thank you .A lot of help.

  • @aakritisr455
    @aakritisr4559 ай бұрын

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

  • @feelcollins4358

    @feelcollins4358

    8 ай бұрын

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

  • @QuynhNguyen-hehehe
    @QuynhNguyen-hehehe2 ай бұрын

    So helpful and easy-to-do

  • @maislawljeroxx
    @maislawljeroxx Жыл бұрын

    Amazing !!

  • @user-xb1jh8hw9n
    @user-xb1jh8hw9n5 ай бұрын

    Thank you. God bless you

  • @azmisalabi5612
    @azmisalabi5612 Жыл бұрын

    love it

  • @RadmilaKussi
    @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?

  • @brittanyrudquist9384
    @brittanyrudquist938424 күн бұрын

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

  • @paulacro
    @paulacro5 ай бұрын

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

  • @jahanzaibnadeem3440
    @jahanzaibnadeem34404 ай бұрын

    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

  • @vouners1660
    @vouners1660 Жыл бұрын

    Tysm!

  • @alexisndinda9937
    @alexisndinda9937 Жыл бұрын

    such a nice and easy way to teach! thanks

  • @sarah.wright

    @sarah.wright

    11 ай бұрын

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

  • @noraatef1579

    @noraatef1579

    7 ай бұрын

    Yes I have the same questiion @@sarah.wright

  • @jahanzaibnadeem3440
    @jahanzaibnadeem34404 ай бұрын

    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
    @PaigeKeefer9 ай бұрын

    How do you make this scrollable/clickable?

  • @jiddanfaqihhaikal549
    @jiddanfaqihhaikal549 Жыл бұрын

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

  • @renataeger

    @renataeger

    Жыл бұрын

    I was wondering the same

  • @sarah.wright

    @sarah.wright

    11 ай бұрын

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

  • @MrGooof
    @MrGooof10 ай бұрын

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

  • @user-de2qp1hc1e
    @user-de2qp1hc1e5 ай бұрын

    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

    @jerronickog9933

    3 ай бұрын

    How you create different page

  • @charliesangels6363
    @charliesangels63638 ай бұрын

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

  • @5500figmaclasses
    @5500figmaclasses5 ай бұрын

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

  • @Kingzzz__
    @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

    @manishamurkhey3129

    Жыл бұрын

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

  • @CareyWinder
    @CareyWinder Жыл бұрын

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

  • @noname-zd6wu

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

    @ashikahmed462

    Жыл бұрын

    kzread.info/dash/bejne/oIp2q8RuYJywfbA.html&ab_channel=ProductSensei You can have an idea from this video

  • @sarah.wright
    @sarah.wright11 ай бұрын

    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

    @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

    @sarah.wright

    10 ай бұрын

    What will be the two separate interactions? @@abhinabgupta2361

  • @trustokafor
    @trustokafor Жыл бұрын

    I can't finish this video I got confused

  • @jaminizam9450
    @jaminizam9450 Жыл бұрын

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

  • @babichnick

    @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

    @jaminizam9450

    Жыл бұрын

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

  • @jaminizam9450

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

  • @Misterjacobs
    @Misterjacobs4 ай бұрын

    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.

  • @artbylaura3257
    @artbylaura3257 Жыл бұрын

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

  • @soldier4082
    @soldier40829 ай бұрын

    subscribed

Келесі