Variable Modes for Responsive Designs

[00:00:00]
>> At this point, at this moment, you are probably good enough a figment to be dangerous. Now we get into a victory lap of things that are useful. We also get into the part of the portion that is somewhat paywalls, right, and so, follow along gets a little bit harder at this point, but that is okay.

[00:00:28]
I will take you on a tour because theoretically if you use this for side projects, yeah, maybe you stick to the free stuff. Design team is the one that is footing the bill for and Figma, so I have a paid Figma account, and most of these things are brand new.

[00:00:48]
So years and years of designs made in Figma before any of these, you do not need a paid Figma account except for some of these features. So the other thing that variables support are these things called modes, right? So, a free account you get no modes or you get one mode technically which is no modes, right?.

[00:01:15]
Modes are only helpful if you have more than one. But on a paid account, you can have modes, you can have up to four, it's interesting, the starter I'm gonna pay for myself account, you get four modes, the professional account, you get four modes. If you go to enterprise, which I don't even have, you get 40, right?

[00:01:35]
It's not like you got four and this one eight this one, it's like 0, 4, 4, 40, I don't ever wanna work at a company where I need 40 modes. Especially when you see a mode, you're gonna cry the idea of having 40. As a developer, you're going to cry cuz you know what that would mean for you in your code base.

[00:01:53]
Cool, so let's take a look, so I have some setup here. So we go into variables, and for the component colors you can see I have two modes. And this is kinda what we were talking about a little bit before, so if I look at my primary button color, right, before we had this one column, I have two modes setup and see what that means.

[00:02:19]
I have two columns, one of them I have called Light and the other one I have called Dark. You can take a lucky guess what I'm doing here. So now I can go ahead and I can take this button, and, cool, here it is, and again, you didn't even notice that there.

[00:02:43]
I was talking about this button here, nobody saw this little icon. That's two hexagons, two hexagons. Let's double the code. So this one I can switch it on component colors, I can switch it to dark mode, which is a lighter button, as somebody who just spent six weeks implementing dark mode, I don't recommend it.

[00:03:08]
I mean, do it cuz everyone wanted it, but everything's lighter cuz everything's darker, it's counterintuitive. So you can switch it from light to dark and like those variables then change to their other properties, right? And what's kinda cool about this is that like CSS or like JavaScript, there's some amount of cascading inheritance.

[00:03:30]
I just took two words that mean different things and put ' together and you all nodded, so it's cool. So here I can take a frame, and, let's say that it's Phil is I have not in these primitives, and I would never publish the primitives, but in this file, I have to deal with them.

[00:03:50]
I have one called Background, right? And Background is white in light mode, and it's slate 950 cuz one time I read something you should never actually use black, whatever. And so it's slate 950 in dark mode, and so what I can do, there it is in dark mode, there it is in light mode, there it is in dark mode, there it is in light mode.

[00:04:18]
So I can drag this button in. And you know what, let's, let's get two more buttons. Let's toss in a primary button. Let's toss in a secondary button too, let's put lots of buttons in here. It's great, then let's take this frame, If we switch to dark mode, all of the subsequent lesser values also switch into dark mode.

[00:04:47]
So, and you can't do this with styles and this is where the difference between variable and styles kind of exists. If you have two modes, then it like if I look at this button right now, it is set to, It's set to auto now, it wasn't before, the other two were though, so it's fine.

[00:05:10]
It's set to auto, which means it will inherit, right? And so they don't care if there is a parent above them in the frame hierarchy that has a mode set, it will then inherit that mode. If you all your code is the variables, and you have these two sets of modes, right, you can throw together your dark mode prototype, just by dragging the same components and re-arranging them in dark mode.

[00:05:30]
And that I would argue is the most common case for modes.