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.
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
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 👍
Such a great one i have seen and gave the result that i needed in 2025 Thank you so much Thank you ❤️ New subscriber here Please start a course like this of figma
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.
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.
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.
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.
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 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!
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.
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? :)
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.
📌Links
Join the community here 👉 bit.ly/DX-Community
Download the freebie here 👉 designxstream.gumroad.com/l/DX-Interactive-UI-Kit
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😩
@@darianhampton25 bro there's no download. What did you do? hahah
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.
Thanks for the detailed feedback! It means a lot.... I'm glad you found it helpful. Cheers ✌🏼 :)
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
Hey Rezwana, thanks for your feedback! Glad to know you found them helpful. ✌🏼
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 👍
Thanks for the feedback! It means a lot! Glad you found it helpful... Cheeers! ✌🏼
Thank you o much for uploading this!
Such a great one i have seen and gave the result that i needed in 2025
Thank you so much
Thank you ❤️
New subscriber here
Please start a course like this of figma
Hi, Thanks for this wonderful videp which helped me a lot. I tried and found the below overlapping when tried to use it in my forms.
in auto layout there is an option called stack from top to bottom. pls use that!
Wow! Thanks a lotttt
Glad you found it helpful... Cheeers! ✌🏼
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.
Great suggestion! Noted when I do a part 2.
You're an awesome teacher, very easy to follow
Glad you think so! 😇 Cheers!
thank you, very helpful!
Glad it was helpful! ✌🏼 :)
Good one , Thanks 👍
You're welcome Mahesh 😁
thank you for this video, how we can change the color of the text when hovering in the dropdown please?
The cell has a hover trigger applied check that and change the text color in hover state.
Great video! This helped a lot in understanding how variants work! I wonder though how it would work if we add a hover state for the dropdown options?
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.
Thanks a lot! @@DesignXstream I'll try it out :)
This is great! Could you make interactive Donut Charts, Bar Charts and others related to Power BI dashboards,
Charts is an interesting topic! Will try to make a video on that. 👍🏽
Thank you
Cheers ✌🏼🤩
You also can create a variant with the status, something like: Name: "Selected" - Value "N/A" / Value: "Option 1" / Value: "Oprtion 2"...
Yes that is also a good approach! 👍🏽
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.
How do we add linear options with the dropdown menu?
What exactly do you mean by linear options? Can you elaborate?
is there a way to make the dropdown adaptive to size? like if you resize the menu the options will follow its size?
Yes, you just need to use autolayout and build the dropdown with fill content. Then it will adpat to the size you drop it in.
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.
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.
The part where you added the down frame to the upper frame where we jave dropdown label and select value... Doesn't work for me...😢
Which duration exactly? and what issue do you see?
meri drop down arrow and select value k between jo advance setting m spacing mode hai wo ni show ho rha
This changed in the new Figma update.
You will find Auto option in the spacing mode just below the flow selection ↑ →
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
Heyy this is a very detailed video that I've made based on previous requests. Which part is confusing?
There is overlapping of options when i use two dropdowns
In auto layout there is an option called stack from top to bottom. pls use that!
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!
When I am using Multiple drop down in mobile then its overflow the content. Is there any solution for it?
If you are using it in an auto layout then you need to goto auto layout setting and change the stacking to 'First on top'
@@DesignXstream this is working. Thank you
what if we have to add more than 5 box as in my case i have to give 6 option is it possible to edit your template?
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.
smart solution but doesnt work in autolayout since the layers cant be moved ontop of each other so the next content overlaps the select content
You can use 'Canvas Stacking' option and change it to make it work in auto layout mode!
I too am hit with the same roadblock. I need to do more research. Any other video that explains this issue in detail?
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? :)
Are you using the UX kit provided?
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.
Makes me no difference to impress you 😂 but still I don't mind helping you with this problem... dm me on Insta @designxstream and I can help you!
it doesn't work. I dont know why
Can you elaborate what doesn't work?