Lessons

Lesson Info

How to Make a Multi Dimensional Variant in Figma

Hi, everyone in this video we are going to discuss multidimensional variants. They sound fancy. Really. What they are is we've made a no dimensional or at least one dimensional variant already. This one here is just on or off. One dimension. Can't do anything else. This one look, it's got a small version and a large version past two different colors. So this is what we're gonna make, we're gonna make a button that says, oh I want it to be actually the large version that is the secondary color. It's got multi dimensions, same with this person. OK? He's got the positive or negative but also got a color. He's got an extra dimension multidimensional. So I am, I'm probably gonna always say multidimensional in that weird voice. You need to too part of the F rules multidimensional. Alright. I'll try and I'll try and turn it down. Let's get into the video. All right. To make a multidimensional variant, you need to start with something OK? It doesn't matter what it is. I've I'm starting with a ...

button. OK? It needs to be a component like before. OK. We're gonna do the version of creating variant where we just start with one and make a new one using this little plus. Hey, everyone, quick pause here. Just to remind you about the interface change. OK. In the video here, go to uh variance and hit plus. There is no variance anymore. You got to go to properties, go to plus and go to variant, but you knew that already just a reminder. Um And also you need to go up to the top here and add a new variant or select it and hit command or control D up to you. And the naming is quite similar. OK? I've got this first one here that I can name. OK. The second uh variant here that I can go and name and if I want to change the overall kind of property, I double click it there. So very similar small changes, you got that all right on with the video. And what I'll do is with this variant here is going to be, we're not going to use light and dark mode. I should probably be calling these um primary and secondary colors, dairy colors. So this one here is secondary, this one here is not dark mode. It is primary. OK? So I'll change the color of this one to my secondary color. OK? So that's the variance as we know it, right. OK. Let's even give that variant. I'm clicking the component frame to say actually this component is called color. But now like you saw at the beginning we want another bigger size and that's all the multidimensional um variant is, is that we've got one OK. Property. That's it to color everyone. Just one more update for this video. They've changed it. It's kind of similar to what we've already done, but I want to really highlight it because it was getting people a little lost. OK. So under in the video it says variance click on this dots and go to add new property. Now what we do, OK? And a similar sort of place is we go to property so we got it selected. OK? We go to properties, we go to create new property variant. OK? Similar similar. OK? And we're gonna call our one size in a second and create property. You end up with two properties OK? Multidimensional. So you go small change kind of confusing I can see. So here's the update carry on let's make another new property that is gonna be called size, it creates one called default. And what you'll notice over here is that in my layers here, let's undo that. So I only had one, OK? Just had secondary and primary if I add another um another property and call it color size again. Watch what happens over all the way over here which one had enter comma slash this other multi dimension, you've got two dimensions, it can be secondary and it can be different sizes. So what I'm gonna do is actually say that this fella here is the size of small. He's the primary color and he's small. This guy is the secondary color and he's also small. So I need two more. I need add another guy there. You can just out of for giggles. OK? We can click on the set. You can actually add another variant this way as well. There's lots of ways of adding variants. You can click on it and uh command D control D you can click on it, copy and paste it. I know if that doesn't work. Commandi OK? So I've got this other one. This fella is going to be, I want to duplicate this one just because I want to start with the right color. So he is primary and he is going to be large. He's not large yet. So I'm just going to add some padding to him. So got the component selected. Where is it there? It is there. So I'm going to say you are what I'm gonna do 24 top and bottom and I'll do either side. So it's a bigger button. You can see it's been cut off. You just click on this and you can drag this actually any way we're gonna do quite simple multidimensional variants. OK? But you might end up with like hundreds of different variants. OK? You can do all of these OK? Different sizes, different colors and then do all that kind of hover, active and active as well. So they can get quite complicated. So you can make this as big as you like. I'm going to make another one next. So you can just duplicate that one. OK? And I don't know where those sounds come from. Um Let's, this is our secondary color. So this guy is going to be uh where is my variable? This can get quite long now. OK? Because we've got variables. So he's primary color. No, he's secondary color and he's large. Look at that. So the way it works is let's go to our assets panel, let's find our little button. OK? And now he has two variables. OK? He has two kind of properties to his variables. Color and size that makes a multidimensional. So I can say actually I need the, I need the primary. No, I need the secondary one but I need the large version. Cool. Huh? That is multidimensional. Let's do one more. OK? Because doing the naming over here is not hard, right? Uh It can be easier. Remember our naming conventions. Um the forward slashes that can get quite nice. So let's do that. So I'm gonna speed through this, I'll see you in a sec. OK? So I made these little buttons, OK? These little circular buttons. Um again, nothing to them. I'm gonna, first of all make them individual components. Now at the moment, I think they're all separate. If I make all of these separate components because these are not grouped or framed in any way. Uh watch this, you're gonna end up with four separate components. So I'm just gonna select this and I can either convert it to a frame group it or I can actually just convert it into a component itself. It's kind of another way of grouping it, making it a component. Alright, so I got two of them now naming conventions. So this one is gonna be my round button slash positive, positive slash accent color. So basically we're adding properties these multi dimensions with these slashes here. I'm gonna do the same down here, but this one is going to be negative, negative. OK? And if I create variants now multidimensional, OK? So you can kind of cut to the chase if you are willing to use the forward slash. OK? And over here, I can say this is my no idea what to call this if you are, if you're unsure, just call it value, OK? And this is going to be my color, OK? I can make two more of these. Actually, I'm gonna select both of them, make two more of them. And all I'm gonna do is change that to I don't know secondary color. Same with this one. And now with it selected, I can say you are positive but you're not uh accent color, you are going to be a new, you are going to be my secondary color. Secondary you I don't need to type it in because it's already in there. Now, if I go to assets, I got you and I've got you all multidimensional, I need the negative in the secondary color. If you're thinking, could I just keep naming them instead of like duplicating them, you totally can. So uh let's do that last example, I'm going undo and before it was a variable, OK, I could do it now. OK? So there's no reason why I can't break these apart, attach instances. OK? And this one here is going to be or is it round button positive? But I'm going to change that to my secondary color. You are going to be my secondary color and it's got to change the names. So this is now secondary. So you can do all of this before we did it kind of afterwards there. You can do it all before if you like secondary. OK? Have to be components, still component, component, not component poop whoop. That didn't work. Here we go. OK? So as long as the naming conventions are there, if I zoom in, you'll be able to see the naming. OK? And you could do 1/4 we're not gonna do 1/4 here. This is still the essentials course, but there's no reason why you can't make a large and small version of all of these as well, but because I've named them all right, combined variants were away. Look at that, OK. Remember thing. I'm not sure what to call. I'm sure there's a good name. You can probably think of a good name. I can't. Here it is there. OK? And same sort of thing. Secondary negative. All right. How are you feeling? How are you feeling about variables? And how are you feeling about multidimensional? I was really scared about variables. Scared. Yeah. Scared. I didn't want to get involved when they came out because I kind of knew for it. And I'm like, man, that seemed complicated. Um But once you get your head around them, actually, you can start to see the tidiness in here and then you start doing multidimensional. I avoided that as well because that seemed all those slashes and oh it's getting confusing if you are finding that maybe multidimensional confusing, just stick to normal old variants and just have a couple of versions in here for a while. It is relatively advanced stuff we're doing here. And one last thing you might do is if you got this on the like, let's say that maybe we did our naming conventions and we did, you know uh what was this one? Um I can't remember what we did. Let's have a look, we did like round button positive secondary if you get that wrong. Don't worry if you're like which order does it go? You can adjust it later on once it's actually uh a multidimensional component. You can say actually, I want that to be first. See this, you actually click on the set. Remember the component set? You see that little teeny line there, you can actually say it's more appropriate to pick the size first of them. So let's drag out this guy was that guy. I don't know what you're from. Um So which did I do? Let's have a look at that guy. So I drag him now. He's gonna go size first. OK. And then primary. It doesn't really matter. Does it? All right. My friends that is multidimensional variance in fig A, I'll see you in the next video.