Figma components and variants for beginners

as you use figma more and more you'll soon find yourself duplicating things again and again and then you'll see how you keep changing things in those duplications this is incredibly annoying and just a complete waste of time luckily though in figma we have something called components and in this video I'll teach you what they are and how to use them so that you can stop wasting time while designing now if you want to learn more about figma make sure you check out the next video here number one what are components I usually think of components as templates templates for different elements that you want to reuse on your website your app or whatever you're creating in figma so it could be a button it could be an icon it could be whatever if you go to the assets panel in the top up left of your figma UI you will get this you will get a search field and you'll get this little drop down here with your local components and if you use external components from other libraries you will see those here as well but let's focus on these for now these are the components we've created in our document here so what you see is this button component right here and these two icon components I can grab one of these drag them out onto my canvas just like this and there we have our component with all the settings in the right side panel here that we've set to it and we will get into these settings in just a bit but that's what a component is now the Second Step here is we want to look at variance what are variants and how do they relate to components so when we create a component we can create a button once again let's take the Button as an example so we create our button and we have the original state if we want this button to have a different look when we hover it what we do is we create a variant of this button where it's hovered so that's what we see here and maybe we also want different types of buttons so maybe this is the primary button with the fill color but we also might want a secondary button like this with just a stroke this would also be a variant and the Hummer state of this button this secondary button would also be a variant and the way we create variants is also very simple once we create a component in the same spot in the top we just click add variant now you'll see exactly how we do this in two steps here but before that let's look a bit closer at component properties because component properties allow allow us to minimize the amount of variants that we create you could imagine how big a canvas of component variants could become if we would create variants for everything well that's where component properties help us so what are component properties if I Target or select this button here you'll see in the right sidebar here in my fig my UI that I have a bunch of settings we have something that says type here I can change from primary to secondary I can choose to show this icon or not show it I could change the icon that we show like this we could choose to show the text or not we could even change the actual content in the text like this and this is the power of component properties because if we would have to create component variance for each of these instances the amount of components we would have would be much much larger so that's component properties now in the fourth step here we're gonna recreate this together so the first thing I want to do here is I want to add a text layer and I'll call it button or I'll write button I'll then give it an auto layout and if you want to learn more about all layouts we do have a video on that in the top right corner right now I'll give it some padding on the sides some padding vertically increase the rounding call it button and there we have a button now with this button we can create a component so I go here to the top I click create component and there we have our first button component from this we can also add some more variants so I would go to the same place click add variant now we have two variants of one single button they look the same currently but we want them to be different this is going to be the default state so I'll go to the menu here change this from property to say State then I'll go to the second one that currently is named variant two and I'll call this hovered and for the hovered State let's keep it simple and just use opacity so 50 opacity and that's our first button and now we can find it here in the assets panel I can drag it onto my canvas just like this and I can go here to the right sidebar and change the state from default to hovered from hovered to default that's the first step now we want to add some component properties to this the first thing we can add is a dynamic way for us to change the content and in this case the text content in this button and the way I do that is I Target the text in all of our variants and I go here to the right side panel where it says content from here I can find this icon and this is the way for us to create component properties and here we create the text property so I hit this and I get this menu where I can change the name so what is this going to be called I think text makes sense in this case the value what is going to be the default value button works we can change this if we want to but I think button is okay for now I'll hit create property and there we have it now if we go back to the component we dragged out and we'll look at the right sidebar here again you can see that text is now here and we have this field here where we can change the content and it changes dynamically so that's the first component property you could add many different component properties anything from this one that says layer where you can actually hide and show stuff so if we create this Boolean property here this will allow us to show or hide the text so I changed the name to show text and we have a default value so it's going to be true we want to show the text as a default now if I create this property here we go back to our button now we have this toggle switch here if I hit it the text disappears and reappears when I click it again we could go to our assets panel here we could drag in one of the other components we created so this icon component I could copy this go into my button here place it inside of the button sorry in this button first I could expand this so that we see what happens and reposition it a bit so now we have an icon in the first button we want this same icon in the hovered state I'll reposition again change the spacing a bit and there we go now we have the icon here in this same button you can see how it just dynamically updated but we don't have any settings for the icon just yet and that's what we want to add now so I'll Target the icon and I'll go here again to our right sidebar the first thing I'll add is this once again for the layer so I'll apply a Boolean property and this time we won't use show text we will create a new one that is specific to the icon so I hit create property and now this says show layers but I think it should say show icon and maybe by default this should be false so we don't show the icon by default I'll create the property you can see how it disappears by default now if I click this button here again you can see we have this new toggle switch if I hit it we show the icon if I hit it again we hide it pretty cool huh now the last thing I want to show you is a way for us to actually switch which type of Icon we use in here and once again we're going to use the same icon or the same symbol here is what we're looking for to create this effect so we click here on create instance swap property hit that and we get this menu now this can be called maybe icon so what type of Icon are we going to use the default value should it be the Chevron should it be maximized it doesn't really matter in this case but you could choose whatever you want the last thing we can use here is the preferred values so in case you have a component that has a couple of preferred values so let's say four icons that that particular component is going to be using you can add those for values here and those would be shown here in the right sidebar so if you have hundreds of icons this is very helpful because then you reduce the amount of icons you have to go through when you want to pick the right one so I create this property boom there we have that property created if I go back to this button again and I hit show icon then this menu turns up in here I can change what icon we choose or what icon we show if I want to mess around a bit with the layout and the settings here you go to the component so you click it and then from here you can change the position of your values just like this usually I like to have show as the first value and then if it's toggled then you'll see the editable setting below it just like this so that is how you create components with variants and component properties until the next one have a great life we'll talk soon ciao [Music]

Channel: Flux Academy

Views: 31,601

Keywords: become a web designer 2022, freelance web designer, graphic designer job, web design, web design freelance, web design business 2022, web design freelancer, web design business, web design 2022, web designer career, web design school, ran segall, Flux academy

Id: aGvWDDPsjUM

Length: 12min 6sec (726 seconds)

Published: Wed Jan 04 2023