MASTER Figma Components in 10 Minutes (Everything You Need To Know)

figma components is usually the thing that people struggle with the most when getting into figma they have their entire setup done maybe even learn Auto layout but they then struggle to build with components so in this video we're going to go over components explain why you need to use them how you can use them efficiently and do something like this so this is an example of what a component will look like in figma it has a purple border around it and it allows you to change multiple instances of that component with a single move so in this case I'm going to change the size of this circle here maybe change the size of this color to be red so you can see that it's all going to be updated inside of the instances while the master is being changed now this is one use for components we have these type of cards but what I'm going to talk about in this video is going to be how to create a button variant system like this now you are going to need to know a little bit about Auto layout to get into this first so I recommend that you watch that up there but let's go ahead and take a look at what we have here so this is our instance and you can take a look at this entire system here as the master component So within this master component we have a few different variants the actual instance here allows us to change a couple of different states so we have the focus State the hover State and also the default State we can then show text we can remove the text we can show the icon remove the icon so all these things are easily interchangeable and this is really the beauty of figma components and when it shines so to do something like this we need to start out with a text block so I'm just going to go ahead and type something in here and we can go ahead with button here I'm going to do shift a to convert this into an auto layout frame I'm going to give it a color here maybe something like white or just for the sake of the example let's do darker and then the button can be actually white wrap this around some radius maybe eight something like this rename it and now we have our button here so the first thing that we need to do is click on this create component now the shortcut for this which you should learn is option command K on the Mac and this is going to be super super helpful to just build way faster instead of clicking this button here but let's go ahead and click that for now and then you'll see that it changed into a variant button now what this allows to do is build out these individual different components for that same button so we have different instances so for example we have the hover we have the icons everything like that let's go ahead and click that and you'll see that we get a second identical version of that we can then rename this to be anything we want but this is where we can start to really build out our button in this case so I'm going to go ahead and build out a hover State here and I want the hover state to just be darker so when someone hovers over this button I want it to be a little bit darker now you'll see that we have property one default and then property one hover so we can change the meaning of this text just by double clicking on it and we can call this a state here if I can spell that correctly State and then this can just be the default State now we can go ahead and click on this plus button here to build a third state and this can be our Focus State and then we can go ahead and give it a stroke so in this case I'm just going to do something like this just so that we can kind of get an idea of what we're doing here now it wouldn't make sense that would be the same color as the hover state so let's go ahead back to primary state so now we have three different instances here we have the default the hover and then the focus state I'm going to make this a little bit larger just so we can start adding more variants here and more instances but the first thing that we want to do to really start to add all these different variants and these different capabilities to the component here is we're going to want to click on the button layer now I'm using command and shift to just go into the layers click on the exact element that I want and that allows me to have a little bit more control of my components here so we'll see that if we scroll down on the content there is this icon here this little button and that says create text property now when we go ahead and click that we get a modal now in this modal it's similar to what we had before where we had property one and default well in this case we have text and button so we have the name of the entire category now in this case we can call it text and I think that makes sense for this case and then the value can be the button itself we'll see that if we go ahead and drag in a new button into our canvas here from the asset panel we'll get into that in a second here but if we see that if we drag that in we now have a few different options here so we have the state of the component now in this case we can start to play around if it's hovered if it's focused if it's whatever and then we can also change what it says on the actual text so in this case we can do something like a CTA so learn more and we'll see that thanks to Auto layout the button size automatically changes depending on the content that is inside those margins so now that we have the buttons here with all the states what I'm going to start to do is I'm going to start to add these icons now right next to the layer panel we have the assets panel and in the assets panel this is where you can find all of your components now we see that we have a card component here that we talked about earlier the buttons here that I created to show you guys the full image first and then we have an icon here now this is just a very simple instance of a circle and a square so let's go ahead and just drag this directly onto our canvas now when we have this into our canvas because this is its own variant of a component we can start to change it either a circle or a square so the really cool thing that we can do in this case is we can drag this directly into our examples here just like this I'm just going to duplicate it into all three and now we see that this automatically changed so there's a couple things happening here the instance that we have here is always going to update depending on what the master is telling it so in this case we have the color if you wanted to change you know the hover color of this it would then change it on the actual instance so this is where variables components all comes to play because if you want to change one thing it'll change it for all the instances you have on your site now in this case I do want the icons themselves to be white so it can give us a little bit more contrast so we can see that we see the icon here it's white it's exactly how we want it to look but we can't actually change which one it is unless we double click onto that icon itself and then we can change if it's a circle or a square well one thing that we can do in this case is we can then either leave it like this and we can just have the instance be changeable within double clicking it and making sure that we're selecting the right one or we can go ahead and create a master component of each icon reference it directly from the component panel just like this so we go ahead and just select this here we can do another instance and we can just call this icon and then we can have a couple of different options here now I'm just going to create this icon first I'm going to remove this from this one here and we'll see that we now have two individual components here so we have the icon Dash Circle and then icon then Dash Square just like that so now that these two are individual components by themselves when we go into the instance here we can start to see the other icons that we want to play around with so in this case this is a little bit more complicated than just double clicking and selecting the icon that you want but if you want to be able to see the actual icons that you want to play around with so in this case we want to select the circle that is the way to do it so you need to create individual components and then place it directly and reference it so it's a little bit more complicated but it's worth the extra steps just so that you can see what icon you're clicking on so now we have three things that we can change about this button we have the state we we have the text whatever we want to call it we also have the icon that we want to give it but we also want to be able to see if we can even showcase the icon or not and we can do that here just with the layer panel go ahead and say visibility icon and by default if you want to be true then we can select that but in this case we'll just leave it for true so now that we go into the instance here we can start to either say we want it to be visible or not and we can do that as well with the text if we wanted to just like this so we create a new property AMC visibility text and for some reason if you wanted to flip on and off the visibility for the text well then we could go ahead and do that now now the last thing that we're going to cover here is going to be how to create these different sizes for the icons so I'm going to select these three and create a duplicate of them so just for the example here I'm going to go and select K on my keyboard and just shrink these down just so that we can have some smaller buttons this isn't exact but you know for the example it makes sense so let's go ahead and just see what we have here so we have three more states that we've added and we want to go ahead and just connect these back to what we wanted so this is the default one this is going to be the let's go ahead and just click on the hover and then this can be our focused state but now we have an issue which it tells us here that it's a conflicting state so we can go ahead and do something about that let's go in to the main component here click on a new property and create a new variant now this can be our size so if we want it to be large and small and medium for different breakpoints this is where you go ahead and do that so let's go ahead and call this large just like this create a property and now we can select these and for size we can add a new one called small and now we see that we no longer get that error so back into our instance here we now have the state so we can be focused hover or default and then we also have size so if we want it to be large or small we also have the text that we wanted to say so we can say anything we want we can change the icon in this case to be square to be whatever we want it to be so again as we're doing this we can change the type of size that we want we can change the visibility of the icons for example let's go ahead and change that size bring it back to large we can change the visibility of the text the visibility of the icon the size so everything in this button or in this instance is interchangeable so if we go back to our main card example in this case we can see that there are a couple things wrong with what we did before so we can see that if we do change the text it also updates onto the examples or onto the instances so to go ahead and change that I'm going to give the answer to the crowd what are we going to do here so in that case it's going to be to click and create a new text property now when we do that we can go into the instance select the one that you want and then here you can change whatever text you want and it'll change individually depending on the instance so this is a really powerful tool to understand in figma not only to build massive component libraries and UI libraries and all these things but just to build faster when you're creating a new site so I recommend that you try this out for yourself let me know how it goes down below in the comments let me know if you have any questions about anything that I did here because I'm always answering every comment thank you guys so much for watching and I'll see you guys on the next one

Channel: Arnau Ros

Views: 24,833

Keywords: figma components, figma components tutorial, figma component properties, figma component variants, figma component properties 2022, figma components 2023, figma variants 2023, figma component text property, figma component boolean, figma component instance swap, figma component sets, figma variants, figma variants prototype, figma variant properties, figma variant boolean, figma variant components, figma variant instance swap

Id: KnmxD8LvHmA

Length: 9min 28sec (568 seconds)

Published: Mon Apr 24 2023