Skip to main content

How to Make a Multi Dimensional Variant in Figma

Lesson 80 from: Figma UI UX Design Essentials

Daniel Walter Scott

How to Make a Multi Dimensional Variant in Figma

Lesson 80 from: Figma UI UX Design Essentials

Daniel Walter Scott

new-class art & design

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

Lesson Info

80. How to Make a Multi Dimensional Variant in Figma

<b>In this lesson we discuss multi dimensional variants. We can create buttons that have multiple versions in Figma.</b>

Lessons

Class Trailer
1

Introduction to Figma Essentials

02:53
2

Getting Started with Figma Training

03:06
3

What Is Figma For & Does It Do The Coding?

03:46
4

What's The Difference Between UI And UX In Figma

05:22
5

What We Are Making In This Figma Course

09:18
6

Class Project 01 - Create Your Own Brief

04:01
7

What is Lo Fi Wireframe vs High Fidelity in Figma?

02:34
8

Creating Our Design File & Introducing Frames In Figma

08:29
9

The Basics Of Type & Fonts In Figma

10:51
10

Rectangles, Circles, Buttons And Rounded Corners In Figma

06:50
11

How To Use Color In Figma

05:45
12

Strokes Plus Updating Color Defaults In Figma

09:28
13

Object Editing And How To Escape In Figma

01:47
14

Scale vs Selection Tool in Figma

02:39
15

Frames vs Groups in Figma

09:24
16

Class Project 02 - Wireframe

03:00
17

Where To Get Free Icons For Figma

09:10
18

Matching The Stroke Of Our Icons

05:16
19

How To Use Plugins In Figma For Icons

04:31
20

Class Project 03 - Icons

03:48
21

How to Use Pages in Figma

08:31
22

How to Prototype in Figma

10:46
23

Prototype Animation and Easing In Figma

10:53
24

Testing On Your Phone with Figma Mirror

05:40
25

Class Project 04 - Testing On Your Phone

03:51
26

What is Smart Animation & Delays in Figma?

08:44
27

Class Project 05 - My First Animation

02:01
28

Sharing & Commenting on a Figma File with Stakeholders

07:10
29

Sharing & Editing With Other Ux Designers In Figma

06:58
30

How I Get Inspiration For Ux Projects

06:39
31

How To Create A Mood Board In Figma

05:33
32

Class Project 06 - Moodboard

01:26
33

How to Work with Columns & Grids in Figma

13:54
34

Tips, Tricks, Preferences, and Weirdness in Figma

07:21
35

Color Inspiration & The Eyedropper In Figma

06:34
36

How To Create A Color Palette In Figma

09:02
37

How to Make Gradients in Figma

07:09
38

How to Create & Use Color Styles in Figma

08:01
39

Class Project 07 - Colors & Columns

04:00
40

Fonts on Desktop vs in Browser in Figma

01:30
41

What Fonts Can I Use? Plus Font Pairing In Figma

06:01
42

What Common Font Sizes Should I Choose In Web Design?

11:30
43

How to Make Character Styles in Figma

06:36
44

Lorem Ipsum & Placeholder Text In Figma

04:28
45

Useful Things To Know About Text In Figma

09:35
46

How To Fix Missing Fonts In Figma

02:42
47

Class Project 08 - Text

05:19
48

Drawing Tips And Tricks In Figma

09:38
49

Squircle Buttons with ios Rounded Courses In Figma

02:48
50

Boolean, Union, Subtract, Intersect and Exclude with Pathfinder in Figma

07:25
51

What Is The Difference? Union vs Flatten In Figma

03:36
52

Class Project 09 - Making Stuff

03:29
53

Smart Selection & Tidy Up in Figma

08:40
54

Do I Need To Know Illustrator With Figma?

04:15
55

Tips & Tricks For Using Images In Figma

06:11
56

Masking & Cropping Images In Figma

09:12
57

Free Images & Plugins For Figma

02:31
58

Do You Need Photoshop For Ux Design In Figma?

10:40
59

Class Project 10 - Images

01:17
60

What Is Autolayout & Expanding Buttons In Figma?

10:27
61

Class Project 11 - Buttons

01:15
62

Auto Layout For Spacing

05:47
63

How To Use Constraints In Figma

08:22
64

Combining Nested Frames Auto Layout & Constraints in Figma

11:54
65

Adding Text Box Autoheight to Autolayout in Figma

08:27
66

Class Project 12 - Responsive Design

02:19
67

Nice Drop Shadow & Inner Drop Shadow Effects In Figma

05:56
68

Blur Layer, Background Blur & Image Blur in Figma

05:57
69

How to Make Neumorphic UI buttons in Figma

07:37
70

Class Project 13 - Effects

01:53
71

How To Save Locally & Save History In Figma

05:42
72

What are Components in Figma?

06:19
73

Updating, Changing & Resetting Your Components

07:47
74

You Can’t Kill Main Components In Figma

07:22
75

Where Should You Keep Your Main Components In Figma

05:02
76

Intro To The Forward Slash / Naming Convention In Figma

08:55
77

Class Project 14 - Components

00:44
78

How To Make Component Variants In Figma

06:41
79

Another Way To Make Variables In Figma

06:14
80

How to Make a Multi Dimensional Variant in Figma

11:13
81

Class Project 15 - Variants

01:41
82

How To Make A Form Using Variants In Figma

12:52
83

Class Project 16 - Form

01:27
84

Putting It All Together In A Desktop Example

19:44
85

How To Add A Popup Overlay Modal In Figma

03:03
86

How To Make & Prototype A Tool Tip In Figma

07:26
87

What are Flows in Figma?

05:39
88

Slide In Mobile Nav Menu Overlay In Figma

03:55
89

Class Project 17 - Prototyping

01:10
90

How To Pin Navigation To The Top In Figma

10:17
91

How To Make A Horizontal Scrolling Swipe In Figma

06:36
92

Automatic Scroll Down The Page To Anchor Point In Figma

04:50
93

What are Teams vs Projects vs Files in Figma?

05:18
94

How Do You Use Team Libraries In Figma

11:03
95

The Difference Between Animation & Micro Interactions

02:55
96

Animation With Custom Easing In Figma

25:36
97

Class Project 18 - My Second Animation

01:54
98

How To Make Animated Transitions In Figma

12:34
99

Class Project 19 - Page Transition

01:31
100

Micro Interactions Using Interactive Components In Figma

05:54
101

Micro Interaction Toggle Switch In Figma

04:23
102

Micro Interaction Burger Menu Turned Into A Cross In Figma

04:23
103

Class Project 20 - Micro Interaction

01:35
104

How To Change The Thumbnail For Figma Files

04:10
105

How To Export Images Out Of Figma

07:40
106

How To Share Your Document With Clients & Stakeholders

07:09
107

Talking To Your Developer Early In The Figma Design Process

03:55
108

Sharing Figma With Developers & Engineers Handoff

06:07
109

What Are The Next Level Handoffs Aka Design Systems

03:18
110

Class Project 21 - Finish your design

04:57
111

What Next?

06:08

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.

Class Materials

Bonus Materials

BYOL_Figma_Cheatsheet.pdf
Exercise_Files_-_Figma_Essentials.zip

RELATED ARTICLES

RELATED ARTICLES