Using Figma Variables to Swap Variants Between Modes 

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.

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

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

Mate, this video is gold! Thanks a lot 🤟

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

This is so helpful, Thank you so much!

This is so helpful. thanks for sharing

best lesson about figma variable modes

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.

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.

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?

Thanks.

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

It is very usefull, thank you

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

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

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?

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.

Great video, but downvote for unskippable long ads

great

Can you do create a more realistic example with component of 3+ properties? ;)

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

waist of time all that vars