0:00:00
What’s up everybody welcome back we are diving back into figma today I’m going to teach you how to create variable custom components inside of figma a lot of people have been asking me How do we take like the power of automatic that CSS and replicate that inside of figma and maybe vice versa? Right if you’re taking UI from figma How do we make sure when we’re doing UI in UX that we’re doing things automatic that CSS like and This tutorial is going to break all that down for you really cool stuff very valuable It’s a lot of fun as well. It’s going to blow some of your minds most likely Let’s go ahead and get in to it. All right. I’m a screen share and we are in figma. I’m going to hit new design file to get us a blank slate Perfect and we are going to just to get started here because I touched on pages a little bit in the first figment tutorial We are going to use pages for this you don’t have to but it’s a great way to organize this because you’re going to see it kind of gets a little Routing and pages is perfect for this so under pages I’m going to go ahead and double click my first page which is our default page And I’m going to call this components this is going to be our components page Then I’m immediately going to add another page called UI and that’s where you would work on your UI or your UX doesn’t really matter All right, so on the UI page I’m going to hit the F tool for frame going to draw to frame real quick. I’m going to change the width to 1920 So there’s your standard desktop frame. You could call this your home page. I just named that frame home Okay, we haven’t done anything really critical or important yet What I’m going to do now is work on the components page Specifically creating a button component and this is a variable custom component That’s why it’s not that’s not the official name, but it is it’s a variable component and it’s a custom component So that’s what I call it a variable custom component So I’m going to start out by just hitting the T tool or the T button on my keyboard that’s going to give me the text tool And I’m going to start some text here and I’m going to write out the word Get a quote just like a button would be right here’s get a quote and I’m going to zoom in So that we can see it and I’m just going to choose some settings over here So IBM Plexands as my font 20 base size and I’m going to uppercase it just like that and I’m going to drop it Minus 2% on the letter spacing there maybe minus Yeah, let’s do minus 2.5% let’s just do a bunch of random nonsense It’s 20 pixels for the font. I’m gonna change this to like 22 because I don’t want a lot of line height on button text and And That’s pretty much it. So now what I’m going to do is create I got to frame this text and make it an auto frame If you remember back to the first tutorial is frame everything auto frames are really cool too But when you’re creating buttons always use an auto frame for a button So shift a on my keyboard auto frames that text it sets it as a frame and it sets the auto layout all right So I’ve got my first frame. We’re going to call this button All right cool. So now what I’m going to do I’m basically creating my primary button first my primary button first keep that in mind So a couple things need to happen one I need to fill this with like a primary color So what I’m going to do is hop over to coolers here and I’ve got this little I just picked up one of their custom color palettes Right just grabbed one. I’m gonna cut copy this hex code. I’m gonna make this my primary color right here And I’m gonna go to fill and I’m gonna pop that in so now I have my primary color But what I want to do is save that color as a primary color So I’m gonna hit the four dots for style. I’m gonna hit plus to add a new style And I’m just gonna call that primary so that is my primary color Now one thing I didn’t cover in the first tutorial when you’re selecting a frame It actually shows you the colors of all the things inside that frame So if I want to change the button text I don’t actually have to click on the text and then change it by clicking on the frame I can access that text color and I can change it to something else So I’m gonna grab this one and we’re gonna call this accent all right So I’m gonna just pop that in and then what I’m gonna do is hit the plus The I keep trying to call it a plus sign. It’s like four dots hit the little four dots Now I hit the plus sign and we’ll call this accent and so now I have my accent text there All right next what I’m gonna do is just style this button up a little bit more because it’s not done yet as a button One thing I want to do is do five to round the corners and I’ve a rounded corners button I also want to change the padding and the alignment of the text inside the frame I want to center that and then I want to do 16 32 16 32 you can do this however you want in your own you know design whatever And now I’m pretty much have my button the way that I want it I can’t really think of anything else I want to do before I move forward with what we’re gonna do next Which is creating the actual component and making it variable All right, so what I’m gonna do here is you can do this two different ways You can right click and you can come down here to create component or you can see that we have a shortcut And the shortcut is that’s my phone one second let me pause Okay, I believe we’re back. Let me double check. Yes. We are still recording. Okay, perfect. So Um, where was I creating the component option command K creates the component automatically for you Now we’re pretty much set to start creating our first variant and if you look over here when you create a component Number one, you’re gonna get the purple It’s gonna change the little icon to show you that it’s a component It’s also gonna have this little section over here called variance now Figma is very powerful in most ways. It is super intuitive This isn’t as intuitive as it should be in my opinion, but it’s still really easy fairly easy I’ll say instead are really easy. I’ll correct that fairly easy But there is a hidden feature here that they do not make obvious that I’m gonna show you that’s gonna be an absolute game changer So first things first let’s just add a variance and see what that does it duplicates my button It creates this little border area like a frame basically But it’s a frame that doesn’t really have any of this typical frame stuff like if you want to make it bigger You just got to drag it around and make it bigger Which we’re gonna have to do because we’re gonna have a lot of different stuff in here Um, but that’s basically my component with variance now and I have this variant and this variant Which obviously they’re the exact same and it defaults to saying I’m just kind of poking around here and showing you what’s going on It just kind of names this thing property one and then it just names this variant variant two Which is not super helpful at all and you cannot edit the name property one from here But if you click on the main group you suddenly can edit property one That’s what I mean when it’s like I wish it was a little bit more intuitive And I’m sure that they’ll continue to improve on this and fix it up and all that good stuff But what I’m gonna do here is we’re gonna call this Remember I’m not editing even though I selected the frame I’m not editing the entire thing. I’m just editing this property And the first property I want to want to maybe play around with is Whether this is going to be an outline button or a solid button in automatic.css You know we have both we have outline buttons and solid buttons So it’d be nice to map that functionality into figma So I’m gonna call this outline The next thing it doesn’t make obvious is that you can edit these little labels here Um, and This is the part where this is like not advertised in this UI at all But you can change this instead like what most people do is they say like outline and like they do like solid like this Okay, and again I’m not even selecting a button which is weird because it’s like this is mapped to this frame It’s not mapped to the actual thing that I was working on because in reality These properties are mapped to all the things within this frame So when I create all these new variants I can work with all different properties. It’s gonna make total sense in just a minute. Okay So I’ve got my frame selected instead of outline and solid which I don’t want because I’ve already called this an outline property I want to do this. I want to change it to no And yes, and what’s super crazy about this is If I had this as normal text like outline and solid Those options would be in a drop-down and I would be able to choose outline Um, or solid from a drop-down Which you’ll see in a minute. I know it’s it’s like we’re having to think into the future here But it’s okay. It’s all gonna make sense in just a minute. This stuff is hard to explain that you think But when I do know And I do yes Smart enough to say you know what why don’t we just make that a toggle switch?
0:08:57
It just makes it a toggle switch as you’ll see in just a second So now I’m gonna select this button. This is the solid button So I’m going to make sure that this has outline no and then on this one I’m going to make sure it says outline. Yes It does and now what I have to do is actually style it as an outline button So I’m going to immediately come down and remove the color I’m going to add a stroke right here and I’m going to make sure that the stroke is The color that I’ve been using my primary color I’m gonna make it a two-pixel stroke I’m gonna make sure the stroke is on the inside because I don’t want to have to add a stroke to this button up here as well And then I’m going to come down here and unlink the accent color and I’m gonna make sure that I choose the primary color for the text On that button and voila. I have an outline button and if you look here. This says no This says yes. Now let’s just pause for a minute and go see what I’m talking about and how powerful this is So I’m gonna go to my UI page. Here’s my home page frame that I’m working on And when you want to add a component You can now go to your assets tab and that component will be right there and it says button So I’m gonna drag this button in and there’s my button in my frame. So I’m gonna zoom in here Now if I look on the right look at this crazy nonsense here I have a toggle switch for whether it’s gonna be an outline button or not an outline button I’m gonna go ahead and flip that and it switches it immediately to an outline button How powerful is that now we we’re just scratching the surface here, okay?
0:10:32
Let’s go back into our components So what I’m gonna do now is we’re going to Create another variant and this is gonna be called Icon do we want an icon in our button or no icon in our button? So I’m gonna grab the button group here and I’m gonna hit the three dots next to variance now Right the plus sign is gone. It’s now changed into three dots and I’m gonna hit add new property and I’m gonna call this Icon, okay? And so now I have a new property called icon and there’s a default state I’m gonna grab both of these buttons and I’m going to command D to duplicate them And I’m going to say that this is yes And then I’m gonna grab these and I’m gonna say that this is no So now I have these are no icon these are yes icon All right, so what I’m gonna do now is hit text on my keyboard. I’m gonna choose font awesome pro 5 pro 5 6 pro 6 there we go 6 pro and then I’m gonna do uh arrow Is it long arrow?
0:11:38
All right something like that. Yeah, there we go. Okay, and it transforms it into an arrow All right, I’m just gonna drag them because these are auto layouts because I did them right from the beginning It’s naturally gonna put these arrows in the correct spot And all I have to do is change their color So on this one, I’m gonna change to the primary color on this one. I’m gonna change it to the accent color And I now have look this is set to outline no icon. Yes, this is set to outline. Yes icon. Yes I go back to my uh UI page and Right there and then you have to add a new button. It just knows it has a new property available So I can say yep, it has an icon. Nope, that didn’t have an icon and I can do combinations It can have an icon and it can be an outline both of those things work now So what I’m gonna do is go back to our components page Now we’re gonna continue going with this So what is another thing that we might want to do? How about button size? So I’m gonna grab my whole wrapper here and I’m gonna go to add a new property and this is gonna be called size Now here’s where we’re not doing a Boolean. It’s not yes. No It’s gonna have a lot of different options So first thing I’m gonna do is select all of these and for button size, I’m gonna call this We can do this just like you do an automatic.css. This is gonna be a button in for medium or the default size, right?
0:13:01
I’m gonna hit command D on my keyboard. It’s gonna make me a whole new group and I’m gonna change these to button S And now all I have to do for button S is grab the text In every button I’m holding shift down on my keyboard and double clicking the text on all of them That selects just the text now I come over here and I say that these are gonna be 16 pixels. That’s gonna be my small button now. I’m going to remember I’ve already named those button S So I don’t really have to do anything else. I can hit command D and I’m going to get another set and these are gonna be called button L and now again, I’m just gonna select the text for each button holding shift double-clicking And I’m gonna change these to 24. There’s my large buttons, okay? And if I look here, they’re already called button large They already also have all of the other properties, okay? So this is getting really really cool now what I don’t have yeah, I do I do have large with and without okay So now I’m gonna go over to my UI page and Look now I have a drop down So let’s start at the beginning. I’m gonna delete not well not start at the beginning. I’m just gonna delete that button I’m gonna go to my assets. I’m gonna drag in a button and right off the bat I can make it a small button. I can make it a large button. I can make it have an icon I can make it an outline. It has all of these different features now, okay?
0:14:24
Now watch this all right. We’re gonna go back to our UI no our components page I’m gonna select all of them And well actually first before we do that. I am going to go to variance I’m gonna add a new property and this property is gonna be called family This is like for for colors, okay? All right, I don’t know is there a better word for it color color family? How about color? Why don’t we just do color? That might be better. Let’s just do color. All right, and I’m going to make these all in the primary Color family, okay? So I’m gonna select all of them and under color. I’m gonna say Primary and you could even do button primary like that, okay? Now what I’m gonna do is command D duplicate and you can even at this point maybe drag these up here And it’ll auto align them and I want this to be button secondary Perfect, okay, so button secondary what I’m gonna do because they’re all selected as button secondary I’m going to just grab each solid one because it’s easier to edit this way I’m gonna unhook the primary color And I’m gonna choose a different color maybe This green here. Yeah, let’s do the green, okay?
0:15:46
And I’ll come in and I will paste that and I’m gonna hit the dots plus sign Called the secondary color to save it. I’m gonna grab now the outline buttons And I am going to make sure their stroke is the new secondary color and I’m gonna make sure their text is Also the secondary color and I’m gonna make sure their arrows are Also the secondary color bam, okay? And now check this out. I go to my UI I drag in my button. I can select Make it a secondary make it large has an icon and it’s outline and I have everything organized on my components paid This is my button component with all of these different custom variations, okay? So I hope this was super helpful for you. I hope let me go back to uh camera here Okay, perfect Hope this was super helpful for you. I want you to play around with it again Now that you kind of know that this exists You can do it with a lot of different things. You don’t just have to do it with buttons Obviously you can do it with links. You can do it with headers You can do it with footers You can do it with like whatever you want to get as creative as possible What I would just suggest is don’t make things too complicated right because the more complicated you go with the UI The more complicated your dev life is gonna be So yeah make websites that look great, but don’t break your back at the same time doing uh, you know Just because you can just because figma gives you the ability to do this stuff and just because automatic that CSS gives you the ability to do this stuff Don’t don’t over complicate things all right drop any comments if you have any questions if you don’t understand something If you have any tips on how to do anything better that I’m showing because again, I’m not a figma expert by any means Um, serviceable, but if you see a way to do things better definitely drop a comment and let us know all right cheers
