Figma Tips ⚡ - Change variants in prototypes with variables

In 8 minutes, learn how to create an interaction that changes variants in your Figma prototypes.
By using string variables with values that match your component set variant names.

Time Stamps ⏱️
00:00 Introduction
00:08 Artboard walkthrough
01:29 Set up component sets
03:38 Set up string variable
04:52 Set up interactions
07:15 Prototype review
07:44 Like, comment, subscribe fam

Got a question about frames, figma, or the UX/UI industry?
Any suggestions for topics you would like me to cover?
Leave a comment below.

Support my work at:

#ui #userinterface #figma

[stevenjones]

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

[tedmatsushita]

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

[Graphixer]

Super helpful! Thanks for the clear step by step!

[abrahamrojo]

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

[tehSeaNx]

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

[biagalves]

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

[That..Phillip]

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

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

[MarcSchmid-hetg]

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

[skiphanson]

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!

[PaulinaLopez-bggz]

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

[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)