Figma Tips ⚡ - Change variants in prototypes with variables

[@stacybeen3771]

Junboy, thank you so much for the idea, it helps me with very difficult component behavior a lot! I've also found out, that it works if the "checkbox" is placed inside the "button": it can be useful for lists with checkboxes and opened panels.

[@stevenjones22]

This video is fantastic. Short and to the point. Made all the difference in my project.

[@thejunboy]

Great to hear! All the best with your project!

[@abrahamrojo7407]

Thank you so much, was difficult to find this type of content that shows exactly how it works on internet. It really helps.

[@thejunboy]

I am so glad you found it helpful to you!

[@tedmatsushita1542]

Just what I needed, a very simple example to help me understand the concept and apply it to my projects. Thank you!

[@thejunboy]

Glad it was helpful!

[@That_One_Phil]

Hey there, I am protoyping an app developers in our company need to build and this has helped me so much, thanks.

[@thejunboy]

I am so glad you found this useful!

[@Graphixer]

Super helpful! Thanks for the clear step by step!

[@thejunboy]

appreciate the feedback and I am glad it all made sense for you!

[@biag6553]

Thanks, love the shorter videos, easy to follow and fast apply it on my work xD

[@thejunboy]

Glad you like them!

[@tehSeaNx]

Thank you SO MUCH! Straight to the point and great explanation

[@thejunboy]

Thanks for the feedback!

[@skiphanson5020]

This works well with the one checkbox component driving the state var in another component. I am trying to get this to work with multiple checkboxes (list). I assume I would need to create unique component sets (cboxes and buttons) in order for that to work because if they are not unique, all of the components would change at the same time...maddening!

[@thejunboy]

Appreciate you leaving a comment. To clarify the power of variables, each component set is a master component that defines a unique interaction. If you are creating a list, technically the checkboxes share the same interaction. You can use the one checkbox component set to create multiple instance components to create the list. I have demonstrated how to make this in this video: kzbin.info/www/bejne/h36uZJqvpdqkhqc But if you have multiple checkboxes for multiple unique button interactions then unfortunately yes, you will have to make more component sets as all the instances in one component set will have the same interaction as you have described.

[@MarcSchmid-he2tg]

very good explanation and not to fast like others do...

[@thejunboy]

Glad it was helpful!

[@Lehimob]

Hey, thanks for this video! I need to do quite the same thing on my end but don't get the variable icon in the component panel, on the right side. When I right-click on the eye icon of the Layer panel to link the component to the variable, I am unable to associate it with any String variable, despite naming them the same. When making a Boolean variable, I can link them but then it hides the component when set on "false" in my conditional interaction, instead of switching to the other variant (hides the button instead of switching to its active status). I am using the last update of Figma. Any idea of what is happening? Thanks! EDIT: found my answer in another video's comments section: we cannot use this technic on components that are already nested in another component.

[@HaniyeYazdaniNezhad]

very easy and usefull. ty

[@thejunboy]

Glad it was helpful!

[@TheZuzuTunes]

The looks really promising but I cant seem to set the string variable onto the "button state"? Could this be due to Figma updates?

[@indusgod12]

i have a challenge for you now make a frame where you have 4 instances of those arrow buttons you can differentiate between them through color and the check box should change the active/default state of all the arrow button instances

[@thejunboy]

Appreciate the challenge! it does sound like the logic of a checkbox list, where a select all checkbox triggers multiple instance changes. You can watch it here: kzbin.info/www/bejne/h36uZJqvpdqkhqc

[@neeleshjain_official]

nice one bro...really helpful.

[@thejunboy]

Glad it helped!

[@yutani2225]

Very Helpful thx a lot!

[@thejunboy]

Glad it helped!

[@jameskalu]

Is there any other way to achieve this without using Local variables as it offers only 4 modes for professional account and 1 mode for free figma account? (Q=i want to swap a component variant on the page while changing another variant running on figma prototype)

[@thejunboy]

Variables was brought in recently to enable quicker prototype methods. The original method would be to design every variation of a screen and link them all together - very tedious process. I would argue that prototyping screens should only be reserved as one form of communicating designs, so focus more on the designs and concept rather than in making a perfect fully fledged clickable prototype :)

[@PaulinaLopez-bg3gz]

This only works if your components are outside of autolayouts. If they're nested Figma removes all variable bindings. Is there a workaround for this? I would really like to use this feature on more complex prototypes

[@charbhel26]

Thanks!

[@thejunboy]

Thanks for your comment! There is no issue with elements with variable properties in autolayout. The only state where variable properties are invalid are within nested components. i.e elements within a component cannot have a variable applied to it. the solution here would be to create multiple variants of that component for all the different 'visual states' rather than using variables to switch in and out elements.

[@johnnyqueiroz191]

helped me a ton! thx

[@thejunboy]

Glad it helped!

[@ruslanvalishanov8866]

@@thejunboy great solution!

[@ytRap007]

thanks very helpful

[@thejunboy]

Glad it helped! All the best mate

[@ToyoStation]

This is sooooo helpful! Thanks so much for sharing!

[@thejunboy]

You are so welcome!

[@Christian-ql4vw]

Fanatic