Figma Tips ⚡ - Change variants in prototypes with variables

No video

Figma Tips ⚡ - Change variants in prototypes with variables

Рет қаралды 8,860

thejunboy

Күн бұрын

Пікірлер: 36

@stevenjones22 2 ай бұрын

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

@thejunboy 2 ай бұрын

Great to hear! All the best with your project!

@ToyoStation Күн бұрын

This is sooooo helpful! Thanks so much for sharing!

@abrahamrojo7407 3 ай бұрын

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

@thejunboy 3 ай бұрын

I am so glad you found it helpful to you!

@tedmatsushita1542 3 ай бұрын

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

@thejunboy 3 ай бұрын

Glad it was helpful!

@tehSeaNx 4 ай бұрын

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

@thejunboy 4 ай бұрын

Thanks for the feedback!

@biagalves6553 8 ай бұрын

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

@thejunboy 7 ай бұрын

Glad you like them!

@Graphixer 7 ай бұрын

Super helpful! Thanks for the clear step by step!

@thejunboy 7 ай бұрын

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

@That_One_Phil 5 ай бұрын

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

@thejunboy 4 ай бұрын

I am so glad you found this useful!

@yutani2225 3 ай бұрын

Very Helpful thx a lot!

@thejunboy 3 ай бұрын

Glad it helped!

@skiphanson5020 7 ай бұрын

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 7 ай бұрын

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: kzfaq.info/get/bejne/h7N7Zsqq1dvVgHk.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.

@MarcSchmid-he2tg 4 ай бұрын

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

@thejunboy 4 ай бұрын

Glad it was helpful!

@neeleshjain_official 6 ай бұрын

nice one bro...really helpful.

@thejunboy 6 ай бұрын

Glad it helped!

@johnnyqueiroz191 5 ай бұрын

helped me a ton! thx

@thejunboy 5 ай бұрын

Glad it helped!

@ruslanvalishanov8866 5 ай бұрын

@@thejunboy great solution!

@TheZuzuTunes 5 күн бұрын

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

@ytRap007 9 ай бұрын

thanks very helpful

@thejunboy 9 ай бұрын

Glad it helped! All the best mate

@Lehimob 9 ай бұрын

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.

@PaulinaLopez-bg3gz 9 ай бұрын

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 9 ай бұрын

Thanks!

@thejunboy 9 ай бұрын

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.

@jameskalu 2 ай бұрын

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