How to Make a Multi Dimensional Variant in Figma
Daniel Walter Scott
Lesson Info
80. How to Make a Multi Dimensional Variant in Figma
Lessons
Introduction to Figma Essentials
02:53 2Getting Started with Figma Training
03:06 3What Is Figma For & Does It Do The Coding?
03:46 4What's The Difference Between UI And UX In Figma
05:22 5What We Are Making In This Figma Course
09:18 6Class Project 01 - Create Your Own Brief
04:01 7What is Lo Fi Wireframe vs High Fidelity in Figma?
02:34 8Creating Our Design File & Introducing Frames In Figma
08:29The Basics Of Type & Fonts In Figma
10:51 10Rectangles, Circles, Buttons And Rounded Corners In Figma
06:50 11How To Use Color In Figma
05:45 12Strokes Plus Updating Color Defaults In Figma
09:28 13Object Editing And How To Escape In Figma
01:47 14Scale vs Selection Tool in Figma
02:39 15Frames vs Groups in Figma
09:24 16Class Project 02 - Wireframe
03:00 17Where To Get Free Icons For Figma
09:10 18Matching The Stroke Of Our Icons
05:16 19How To Use Plugins In Figma For Icons
04:31 20Class Project 03 - Icons
03:48 21How to Use Pages in Figma
08:31 22How to Prototype in Figma
10:46 23Prototype Animation and Easing In Figma
10:53 24Testing On Your Phone with Figma Mirror
05:40 25Class Project 04 - Testing On Your Phone
03:51 26What is Smart Animation & Delays in Figma?
08:44 27Class Project 05 - My First Animation
02:01 28Sharing & Commenting on a Figma File with Stakeholders
07:10 29Sharing & Editing With Other Ux Designers In Figma
06:58 30How I Get Inspiration For Ux Projects
06:39 31How To Create A Mood Board In Figma
05:33 32Class Project 06 - Moodboard
01:26 33How to Work with Columns & Grids in Figma
13:54 34Tips, Tricks, Preferences, and Weirdness in Figma
07:21 35Color Inspiration & The Eyedropper In Figma
06:34 36How To Create A Color Palette In Figma
09:02 37How to Make Gradients in Figma
07:09 38How to Create & Use Color Styles in Figma
08:01 39Class Project 07 - Colors & Columns
04:00 40Fonts on Desktop vs in Browser in Figma
01:30 41What Fonts Can I Use? Plus Font Pairing In Figma
06:01 42What Common Font Sizes Should I Choose In Web Design?
11:30 43How to Make Character Styles in Figma
06:36 44Lorem Ipsum & Placeholder Text In Figma
04:28 45Useful Things To Know About Text In Figma
09:35 46How To Fix Missing Fonts In Figma
02:42 47Class Project 08 - Text
05:19 48Drawing Tips And Tricks In Figma
09:38 49Squircle Buttons with ios Rounded Courses In Figma
02:48 50Boolean, Union, Subtract, Intersect and Exclude with Pathfinder in Figma
07:25 51What Is The Difference? Union vs Flatten In Figma
03:36 52Class Project 09 - Making Stuff
03:29 53Smart Selection & Tidy Up in Figma
08:40 54Do I Need To Know Illustrator With Figma?
04:15 55Tips & Tricks For Using Images In Figma
06:11 56Masking & Cropping Images In Figma
09:12 57Free Images & Plugins For Figma
02:31 58Do You Need Photoshop For Ux Design In Figma?
10:40 59Class Project 10 - Images
01:17 60What Is Autolayout & Expanding Buttons In Figma?
10:27 61Class Project 11 - Buttons
01:15 62Auto Layout For Spacing
05:47 63How To Use Constraints In Figma
08:22 64Combining Nested Frames Auto Layout & Constraints in Figma
11:54 65Adding Text Box Autoheight to Autolayout in Figma
08:27 66Class Project 12 - Responsive Design
02:19 67Nice Drop Shadow & Inner Drop Shadow Effects In Figma
05:56 68Blur Layer, Background Blur & Image Blur in Figma
05:57 69How to Make Neumorphic UI buttons in Figma
07:37 70Class Project 13 - Effects
01:53 71How To Save Locally & Save History In Figma
05:42 72What are Components in Figma?
06:19 73Updating, Changing & Resetting Your Components
07:47 74You Can’t Kill Main Components In Figma
07:22 75Where Should You Keep Your Main Components In Figma
05:02 76Intro To The Forward Slash / Naming Convention In Figma
08:55 77Class Project 14 - Components
00:44 78How To Make Component Variants In Figma
06:41 79Another Way To Make Variables In Figma
06:14 80How to Make a Multi Dimensional Variant in Figma
11:13 81Class Project 15 - Variants
01:41 82How To Make A Form Using Variants In Figma
12:52 83Class Project 16 - Form
01:27 84Putting It All Together In A Desktop Example
19:44 85How To Add A Popup Overlay Modal In Figma
03:03 86How To Make & Prototype A Tool Tip In Figma
07:26 87What are Flows in Figma?
05:39 88Slide In Mobile Nav Menu Overlay In Figma
03:55 89Class Project 17 - Prototyping
01:10 90How To Pin Navigation To The Top In Figma
10:17 91How To Make A Horizontal Scrolling Swipe In Figma
06:36 92Automatic Scroll Down The Page To Anchor Point In Figma
04:50 93What are Teams vs Projects vs Files in Figma?
05:18 94How Do You Use Team Libraries In Figma
11:03 95The Difference Between Animation & Micro Interactions
02:55 96Animation With Custom Easing In Figma
25:36 97Class Project 18 - My Second Animation
01:54 98How To Make Animated Transitions In Figma
12:34 99Class Project 19 - Page Transition
01:31 100Micro Interactions Using Interactive Components In Figma
05:54 101Micro Interaction Toggle Switch In Figma
04:23 102Micro Interaction Burger Menu Turned Into A Cross In Figma
04:23 103Class Project 20 - Micro Interaction
01:35 104How To Change The Thumbnail For Figma Files
04:10 105How To Export Images Out Of Figma
07:40 106How To Share Your Document With Clients & Stakeholders
07:09 107Talking To Your Developer Early In The Figma Design Process
03:55 108Sharing Figma With Developers & Engineers Handoff
06:07 109What Are The Next Level Handoffs Aka Design Systems
03:18 110Class Project 21 - Finish your design
04:57 111What Next?
06:08Lesson 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
Ratings and Reviews
Mahyar Hassid
Great class, Daniel drops so much knowledge in every video and in all the in between unexpected moments that helps speed up your process!