Pretty sure your free interactive UI kit just gave my computer a virus… I just needed help with my project now I can’t even do it because of the pop ups😩
I wanted to create a drop-down and was going through several videos. However, this video stood out for the fact that each action was explained. That made a huge difference in understanding a component and variant behaviour. I am not a trained designer. Just learning and doing it myself for my startup and this video explains it in a simple way. Thanks a ton and I will follow this channel for other knowledge. Thank you.
Bro, you are literally the best, other videos are requiring me to subscribe, but this video is absolutely free and pro. thank you very much!!! continue 👍
For adding hover state I would recommend creating the options as a separate component add the hover interaction and then nest it into this component. So it will be like a component inside another component that way it will be easy to manage.
This video has helped me a lot, indeed all of your videos are having good explanations and each step is shown visually so that it's straightforward to recreate whatever you explain. Thanks for making such videos and keep making more to make the work of designers easy
Thanks for the great tutorials and UI Kit. I have the UI kit in figma and the dropdown component will not transfer into the library I am getting "Some variants have the same property values applied. Change the values of these to resolve this."
I suppose you can ignore those errors. They are just warnings which is an outcome of some hacks we used to createthe components to work the way we want it to.
This tutorial rocks!! 🤟🤟 could you also do the part 2 of this by adding hovering effect when selecting the option? I've tried it myself but I can't link the drop options into text props due to my hover and my main component are not in the same area.
I copied this dropdown to different frames, and specified different number of 'options'. However, when I run the prototype it applies the same number of options on each frame?
While you do the navigation to the next frame make sure to enable 'Reset component state' checkbox else the next frame will take the state of the previously interacted dropdown. Let me know if this works!
I created the same way. It works as expected. But I can't resize it. I need to add dropdowns at multiple places in single form, but when a resize it, it looks weird, text goes out of box(stroke) etc. Is it suppose to work like this or is there any way? (It's just my 3rd day using Figma)
Resize should work smoothly if you have set proper constraints. If not then things get scattered here and there. Look at the other videos as well on this playlist and you should learn how to use constraints.
Hi, Could please recreate this video again, and you are too fast and without any mistakes..... If it any other way to make dropdown selection prototype. i feel it bit complex. pls suggest
I'm working on a prototype that involves multiple dropdown menus. In this prototype, I want to achieve a functionality where opening one dropdown menu automatically closes any other that is open. How can I implement this in Figma?
For this scenario, you will have to bring in Variables as well which is part of advanced prototyping. I've a a few videos on advance prototyping it doesn't show the scenario you mentioned but it help you get started on how to use it.
Hi - I'm trying to add to the dropdown list, I want to add 2 more options but they function the same as the other 3 in your original droplist, please could someone help me out? :)
Yes you can add as many options as you want... just duplicate the option and make sure to give it the appropriate actions. The UI kit is totally editable.
For that you need to create the Options as a separate component add hover effect to it and then nest it inside the main one. There is another video on dropdown I made in that way!
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.
