STOP doing DROPDOWNS like this - Figma variables 2023

Hey friends, in this video I share with you 3 simple steps to create dropdown menus faster for your prototypes using variables. You don’t need anymore to create multiple variants to create a dropdown menu if you set right the variables in the beginning. You will gain a lot of time doing this.

You may need to have Figma Pro license to have access to the new figma variables feature.

You may follow the link to access the file in this video:

Let me know in the comments what other topics you need to be covered!

#figma #dropdown #figmatutorial

Thanks for watching this video. If this video add value to you please make sure you subscribe the channel, like and comment the video so that I can keep up with content like this to help you become a better designer. 🙌

Connect with me on social media

[RicardoCostaDesign]

Thanks for watching. I've mentioned in the description that you need Figma Pro to be able to use this feature. Sorry for missing that in the audio at the beginning. If you have an education account, you may use this.

[raulaguilar]

You can set the text layer to “fill” so the icon doesn’t change its position. Or select gap “auto” instead a fixed pixel size.

[juliadelicato]

Thank you so much for this video, I have been trying forever to understand how to apply the variables in the project that I'm current working on and didn't find any tutorial that could help me so far. I understand now that I have to create a nest of components to transfer the color variables in order to have the hover effect in every item of my lists. Your content was exactly what I needed! Thanks thanks thanks <3

[benlow]

This is cool for really specific edge cases of a drop-down component for really in depth usability testing but starts to chew a lot of time when offering a global drop down component that has lots of variations of options to select. How do you manage doing this vs communicating the intent or selecting 1 option when designing for a product?

[danb]

I've been looking for this solution using variables for a while now. Thanks!

[heartnsoul]

It worked! Wow! The only thing that did not work was in Step 3. Selecting Interaction and selecting Variable gave me a message that I would need to pay a pro to do this for me. Therefore, I will not be able to change the top button to say the name of the selected button. This is OK, bc I can link the selection to the proper frame, so its fine. So glad to get this far with this task! thank you!!

[hasibgns]

You shouldv'e mentioned that i need to subscribe for Figma Professional. Because professionals will know it without watching this tutoring, infact they'll teach others like you are doing. But newbies like me will search for this tutorial and then boom they need to purchase 😂 i followed all the step then stopped and now I'm crying in the corner thinking how broke i am

[vivianecarvalho]

It was an amazing tutorial! I learned a lot, I just could not continue when I tried to copy and paste inside the list it didn't do it like you did so at the end it didn't work for me. I must be doing something wrong just not sure what. I am just starting in UI Design so I have a lot to learn. Thank you so much for the tutorial!

[aleksandrazubarava]

Its an awesome tutorial, amazingly straightforward with no mess! I just wish I had pro version:)

[MoabeVettore]

The problem with dropdowns inside a autolayout container is that move all elements down, or if I put that at a fixed position it show the options below other elements

[AmyFranzThomas]

This is amazing! I spent so much time looking for a video like this, so exciting.

[pavantodupunuri]

So simple yet so elegant. Pretty straight forward with absolutely no mess like crating a million frames. I am glad I stumbled upon your video. Thank you so much!! 
Oh, I subscribed too! :)

[tobiaslundgren]

I have a pc so I don´t have cmd and I can´t get the list to auto align itself as you do with cmd+C at 9:55. I´ve tried ctrl+C, Alt+C and all different varriations but I can´t get it to work

[marcoc]

This is a great way to circumvent the problem of not being able to use variants inside nested instances. Very smart! I wonder if it would be possible to create a fully responsive component where you can (on instances) replace the strings for whatever the user types. This is great if you want to create a specific prototype, but not very useful on a design system.

[a.ha.pixels]

Excellent job man, very helpful, and thanks for sharing the file as well!

[santossilva]

Thanks for the video Ricardo! Is there a way to give an affordance of what is selected when an option is selected?
So if apple is selected, can we have a tick or something one that in the apple button on the drop down?

[innocentnweke]

This is a very good watch. Thank you so much for putting this out here. You are really a life saver. I have question though: How is it that the component you created i.e the button with the hover variant affects the drop down menu. Like, it looks as if they are not connected yet they affect each other. At first, I thought it was because it used the color from the 'color' variable, but its not so because I changed the fill of the hover variant to a random color and it reflected in the prototype. I am a bit confused there

[stacybeen]

Ricardo, thank you very much!
Great idea with variables, I've made a component that can be multiplied by designers for their specific needs while advanced prototyping. Amazing possibilities!

[coure]

Thanks so much for this! A couple questions. Why do you have to apply the "change variable" + "change state to" to the text element? I realized this was the only way to do it when I tried to apply these interactions to the nested "list item" component and I couldn't figure out why on earth it would allow me to change the variable, but wouldn't let me select the collapsed state of the dropdown. So, as in your video, I had to go a step further and apply to the text element within the list item component in order to make this work. There must be some logic to it since it simply would not work when I tried to do it the other way, but it felt like a bug to me.

Also, is there currently a way to do something like "change the text string in the dropdown to whatever the text string is that I'm clicking on" instead of having to define each and every variable? Thank you again!

[bandungmee]

thanks... it looks simple function

but quite tough for a beginner. but the steps you show are detailed and easy to follow