Using Figma Variables to Swap Variants Between Modes

Learn how to swap variants between modes using Figma variables

[whennn]

What i wish to see is, how do u make it that if u resize the main frame to a mobile size, then the component will change its variable to mobile, like when smaller than 376 then change to mobile varialbe and if bigger than change to PC size and such.

[emorolh]

Mate, this video is gold! Thanks a lot 🤟

[captivatingcurios]

I'm working with a changing button, so this is perfect. Thanks!!

[erikfadiman]

This is so helpful, Thank you so much!

[tanoyist]

This is so helpful. thanks for sharing

[SH-nyby]

Why can’t we apply it to the main component? Only an instance of the component?

[stamatiostentsos]

So you can't apply the variable to the main component. You have to apply it to the instance. That took me a solid couple of hours to figure out...

[iamavro]

I have been enjoying your videos recently and the process you follow to create components. Thank you!

Request: Can you please deep dive into input fields? Everyone has this one liner input fields. They don't cover where the field can have multiple lines, or just the text box will stop expanding after 3 lines. It's such a complex component to make and I'm struggling.

[maninoroozi]

If for example you want to resize a button component between desktop and mobile the variable for some reason resets the button attributes to default.

[rb]

Great video, but downvote for unskippable long ads

[naznaz]

Is it possible to implement switching from a light theme to a dark theme and vice versa through the variable mode using a component variant?

Let me write an example. There is a toggle on the frame that switches the frame mode from light to dark, but it changes the mode of the current frame, not the transition to another frame. Is this possible?

[szxmlue]

How do you add a mode to a frame ? the option doesn't seem to appear on my side, on the frame, there is no ''variable'' button next to the layer section

[jonrivera]

when selecting the desktop frame, I dont see the local variable icon. is this a paid feature in figma?

[norbertimar]

It seems you can't apply the string directly into the component's property, linking every future instance to the modes. Your method only affects the instances you create and individually link to the string, is this correct?

[ytRap]

Can you make avideo that applies changing the state of a button to selected state when clicking?

[baguetteDuGame]

This is something i am currently working on but i would like to know if there any way that this is automatic. I mean, is there a way that UX designers do not need to assign the variable on the instance property of every component they add.

I say that because i am building a design system for a huge team of designers and i know for a fact they will not have the patience to do that and i understand why: assigning the variable to the property or simply swaping the variant manually requires as much effort.

[genatroce]

I wanted to replicate this for myself, and unfortunately I noticed a small problem (on the Firgma side) – I can't create a string variable in the component library and then use it that way in other files. It only works on local components and variables.

[tara]

why your videos is not in the high quality

[arturpavlenko]

Cool! But I've faced one issue - I cannot apply this to nested components. Is there any solution?

[humbertoventura]

Thi does not work if you component set has several interactions, Jesus!!