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!
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: th-cam.com/video/QMK3gypuqPE/w-d-xo.html 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.
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.
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
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.
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)
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 :)
![[TH] 2024 PMSL SEA W1D5 | Fall | เก็บแต้มของจริง คือวันนี้](http://i.ytimg.com/vi/EciIAlCXg5k/mqdefault.jpg)
This video is fantastic. Short and to the point. Made all the difference in my project.
Great to hear! All the best with your project!
Just what I needed, a very simple example to help me understand the concept and apply it to my projects. Thank you!
Glad it was helpful!
Thank you so much, was difficult to find this type of content that shows exactly how it works on internet. It really helps.
I am so glad you found it helpful to you!
Thank you SO MUCH! Straight to the point and great explanation
Thanks for the feedback!
Hey there, I am protoyping an app developers in our company need to build and this has helped me so much, thanks.
I am so glad you found this useful!
Super helpful! Thanks for the clear step by step!
appreciate the feedback and I am glad it all made sense for you!
Thanks, love the shorter videos, easy to follow and fast apply it on my work xD
Glad you like them!
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!
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: th-cam.com/video/QMK3gypuqPE/w-d-xo.html
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.
very good explanation and not to fast like others do...
Glad it was helpful!
Very Helpful thx a lot!
Glad it helped!
nice one bro...really helpful.
Glad it helped!
helped me a ton! thx
Glad it helped!
@@thejunboy great solution!
thanks very helpful
Glad it helped! All the best mate
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.
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
Thanks!
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.
Fanatic
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)
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 :)