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:
paypal.me/thejunboy
#ui #userinterface #figma

Пікірлер: 33

  • @stevenjones22
    @stevenjones2215 күн бұрын

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

  • @thejunboy

    @thejunboy

    14 күн бұрын

    Great to hear! All the best with your project!

  • @tedmatsushita1542
    @tedmatsushita15422 ай бұрын

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

  • @thejunboy

    @thejunboy

    2 ай бұрын

    Glad it was helpful!

  • @abrahamrojo7407
    @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

    @thejunboy

    Ай бұрын

    I am so glad you found it helpful to you!

  • @Graphixer
    @Graphixer5 ай бұрын

    Super helpful! Thanks for the clear step by step!

  • @thejunboy

    @thejunboy

    5 ай бұрын

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

  • @tehSeaNx
    @tehSeaNx2 ай бұрын

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

  • @thejunboy

    @thejunboy

    2 ай бұрын

    Thanks for the feedback!

  • @That.1.Phillip
    @That.1.Phillip3 ай бұрын

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

  • @thejunboy

    @thejunboy

    3 ай бұрын

    I am so glad you found this useful!

  • @biagalves6553
    @biagalves65536 ай бұрын

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

  • @thejunboy

    @thejunboy

    6 ай бұрын

    Glad you like them!

  • @skiphanson5020
    @skiphanson50205 ай бұрын

    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

    @thejunboy

    5 ай бұрын

    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: kzread.info/dash/bejne/g4F_lcmyoNjXgKg.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.

  • @yutani2225
    @yutani2225Ай бұрын

    Very Helpful thx a lot!

  • @thejunboy

    @thejunboy

    Ай бұрын

    Glad it helped!

  • @Lehimob
    @Lehimob8 ай бұрын

    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.

  • @ytrpaz
    @ytrpaz7 ай бұрын

    thanks very helpful

  • @thejunboy

    @thejunboy

    7 ай бұрын

    Glad it helped! All the best mate

  • @neeleshjain_official
    @neeleshjain_official4 ай бұрын

    nice one bro...really helpful.

  • @thejunboy

    @thejunboy

    4 ай бұрын

    Glad it helped!

  • @johnnyqueiroz191
    @johnnyqueiroz1913 ай бұрын

    helped me a ton! thx

  • @thejunboy

    @thejunboy

    3 ай бұрын

    Glad it helped!

  • @ruslanvalishanov8866

    @ruslanvalishanov8866

    3 ай бұрын

    @@thejunboy great solution!

  • @MarcSchmid-he2tg
    @MarcSchmid-he2tg2 ай бұрын

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

  • @thejunboy

    @thejunboy

    2 ай бұрын

    Glad it was helpful!

  • @jameskalu
    @jameskalu8 күн бұрын

    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

    @thejunboy

    4 күн бұрын

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

    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

    @charbhel26

    7 ай бұрын

    Thanks!

  • @thejunboy

    @thejunboy

    7 ай бұрын

    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.