📌Links Join the community here 👉 bit.ly/DX-Community Download the freebie here 👉 designxstream.gumroad.com/l/DX-Interactive-UI-Kit

@darianhampton25

Ай бұрын

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.

@DesignXstream

7 ай бұрын

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

@DesignXstream

5 ай бұрын

Hey Rezwana, thanks for your feedback! Glad to know you found them helpful. ✌🏼

You're an awesome teacher, very easy to follow

@DesignXstream

10 ай бұрын

Glad you think so! 😇 Cheers!

thank you, very helpful!

@DesignXstream

11 ай бұрын

Glad it was helpful! ✌🏼 :)

Good one , Thanks 👍

@DesignXstream

Жыл бұрын

You're welcome Mahesh 😁

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?

@DesignXstream

9 ай бұрын

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.

@22chi

9 ай бұрын

Thanks a lot! @@DesignXstream I'll try it out :)

You also can create a variant with the status, something like: Name: "Selected" - Value "N/A" / Value: "Option 1" / Value: "Oprtion 2"...

@DesignXstream

11 ай бұрын

Yes that is also a good approach! 👍🏽

is there a way to make the dropdown adaptive to size? like if you resize the menu the options will follow its size?

@DesignXstream

2 ай бұрын

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.

Thank you

@DesignXstream

11 ай бұрын

Cheers ✌🏼🤩

This is great! Could you make interactive Donut Charts, Bar Charts and others related to Power BI dashboards,

@DesignXstream

2 ай бұрын

Charts is an interesting topic! Will try to make a video on that. 👍🏽

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

@DesignXstream

7 ай бұрын

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.

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?

@DesignXstream

11 ай бұрын

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.

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)

@DesignXstream

5 ай бұрын

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.

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?

@DesignXstream

6 ай бұрын

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.

Is it possible to add hover and selected to the options list?

@DesignXstream

9 ай бұрын

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!

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? :)

@DesignXstream

10 ай бұрын

Are you using the UX kit provided?

meri drop down arrow and select value k between jo advance setting m spacing mode hai wo ni show ho rha

@DesignXstream

7 ай бұрын

This changed in the new Figma update. You will find Auto option in the spacing mode just below the flow selection ↑ →

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?

@DesignXstream

9 ай бұрын

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!

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

@DesignXstream

4 ай бұрын

Heyy this is a very detailed video that I've made based on previous requests. Which part is confusing?

When I am using Multiple drop down in mobile then its overflow the content. Is there any solution for it?

@DesignXstream

9 ай бұрын

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'

@palliasridhar

7 ай бұрын

@@DesignXstream this is working. Thank you

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

@DesignXstream

11 ай бұрын

You can use 'Canvas Stacking' option and change it to make it work in auto layout mode!

@palliasridhar

7 ай бұрын

I too am hit with the same roadblock. I need to do more research. Any other video that explains this issue in detail?

it doesn't work. I dont know why

@DesignXstream

8 ай бұрын

Can you elaborate what doesn't work?

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.

@DesignXstream

4 ай бұрын

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!