FIGMA COMPONENTS & VARIANTS

hey guys it's kaler in today's video we're diving into figma components and variants here's how you can master those to use them in your own figma designs let's get started all right so real quick check this out i've got one local component it's a button and i've got two instances of it here and i can use this to create new buttons very quickly so let's say i want a search button i can change my icon to a search icon i can change what color i want it so let's go with red i don't want to have text so just the icon only let's give it a nice border radius so now i've got a nice search button got a built-in hover interaction and this is all thanks to figma components and creating custom properties and variants of those components to get started let's create a button so t on the keyboard and i'll just give this a text of button and i'm going to surround this with an auto layout so shift a and that creates a frame with auto layout turned on i'm going to adjust my alignment and my different values i'm setting my space in between and my horizontal and vertical padding to 12. let's give this a new fill of white and then we'll change our text to black so we can see it and then let's give this new frame a name we'll call it button to stay better organized so now that we've created our basic button i want to add an icon to this so i'm just going to go to assets and i'm using an icon pack that i found on the figma community tab so i'll just grab a basic icon let's throw in a home icon we'll just drag and drop that in and since we're using auto layout our button adjusts automatically and of course if you want to learn more about auto layout i have a video on that that i'll link on the screen now so you can learn and master auto layout in figma so this is everything i want for my button so i'm ready to create my component so i'm going to select my button frame and go up to the top and click this button right here to create a component firstly you'll notice our selection has changed from blue to purple letting us know that this is a component and then you'll see this icon in the top left letting us know that this is a master component so if we head over to the assets and we drag out a new instance of this button you'll see that icon is not there and same thing in the layers panel it's a hollow diamond instead of the filled in diamond so the master is what we want to create and if we update the master let's say our client wants the buttons to be read we can update that and all of the instances are automatically updated through your figma file so you want to keep your master somewhere maybe in its own page or off to the side it doesn't really matter but you don't want to actually use your master in your design you want to use an instance of that button instead so you just want to drag one out and drop it into your design and let's say you want to change the text you can do so we're using auto layout so our button is automatically adjusting and our master is just chilling up here at the top so let's delete these two instances and we'll dive into variants and properties so when you select a component you'll see you have these properties here if we hit the plus icon we can create a new variant maybe you want to have a hovered variant or a different size for a different size device you can create that and then you also have boolean instant swap and text it can be a little overwhelming at first but i promise it's actually super easy to set these up so first let's create a new boolean so boolean is a true or false statement and we want to give this a descriptive name so let's say has left icon and i want to set that to true and create the property so when we have our button selected you'll see under properties we now have has left icon and then we have this explanation point letting us know that this is not used so we haven't actually linked this to anything so it's not actually working so what we want to do is we want to grab this left icon by double clicking and with that selected you'll see here under layer we have this icon right here to the right of that and we can apply a boolean property and we can select the one we just created or we can create a new one if we want but for now i'm going to select has left icon and so you'll notice if i drag out an instance of this button now let's say this instance we don't want an icon well we now have this toggle switch just toggle it off and we now have just a button with some text super easy that's how you can use a boolean let's say we want to have an icon on the right so i can go up here i can double click on this command c or ctrl c to copy it command v or control v to paste that i'm going to use my right arrow key just to push that over here on the right and since we copied this left icon you'll see that it has a left icon property attached to that i'm just going to unlink that and then we can create a new property so create new property i'll call this has right icon and we'll give that a true value and so now when we go to our instance we now have has left so we can toggle on or off and has right which we can toggle on or off and of course you could set up a boolean that says as text and turn off the text in the button as well if you just want like an icon only button so next let's go over the text property so with my button selected i'll go over here and hit the plus and then i'll grab the text so this is just going to give me an input box where i can change the button text so i'm just going to call it text input and then by default i want it to say button so when i create a new button i just wanted to have that set to button and we'll grab our button here and this time we'll go to content you'll see this little field and we want to attach our text input to that and so now we have that linked when i go here to my button and see we have this new property called text input and we can change this to get started and that value automatically changes of course you can also delete properties just by right clicking and hitting delete if you find them unnecessary or want to remove them from your component so finally let's add an instant swap so i'll just hit the plus here and you can see instant swap so instant swap and then we'll just call this icon and then i'm going to select my icon set and by default i'm using my house icon i'm just going to grab that and we'll set that once again we have the notification that this is not being used so we need to link it so i'll grab my icon here and then you'll see here that i'm using a component so i can easily just switch this here if i want but i want to link this so i'm just going to apply instant swap property and then we set up a property called icon so we'll grab that and then i'm also going to set this one up as well so now with our button let's turn on our left icon for example we can hit this drop down and we can change our icon to whatever we want right here in our button properties making it super simple to use last thing we want to set up is variants so variants can be super useful when you're prototyping so let me drag or button that we're using over here off to the side so i'm gonna select my button and then i'm gonna go up here and hit the plus icon to add a new variant so you'll notice that our button now changes to this dashed outline so if we go to our layers you can see our button is this new frame that's around these different variants and you can actually size this and change the scale on this if you would like i'm just going to leave it to about that size and you can also move your variants around in here as well just make sure you don't drag them outside of that frame so you can position these how you like and what i want to do is you can see we have this new property created i'm going to call this state so i want my default state to have a white background but then when it's hovered i want it to change so we have variant 2 and default so let's rename variant 2 to hover and then we'll update this to a different fill color a slightly gray fill and now when we select an instance of our button we now have a new property called state or we can change this to hover if we'd like but for now i'm going to leave it on default and let's set up our prototype so swapping to the prototype tab inside of our button component set i'm just going to grab our white button here and then drag out a new interaction and then we'll set that to while hovering and then we want to change to the different state of hover and so if we just preview that when i hover over the button you'll see it changes to our hover state and when i hover off it goes back to default so you can prototype with components super easy as well and add different variants you can have different sizes or colors and that's pretty much everything you need to know to start using components in figma adding variations and setting up some custom properties if you guys enjoyed this video make sure you give it a like subscribe for more figma and design related content in the meantime check out these related videos and as always have a great day and i'll see you guys in the next one

Channel: Caler Edwards

Views: 95,223

Keywords: FIGMA COMPONENTS & VARIANTS, Figma Component Tutorial, Figma Tutorial, Learn Figma, Using Components & Variants in Figma, Set Custom Component Properties in Figma, How to Create a component in Figma, Using components in Figma, Figma Design System, Figma 2022, New Figma Components, New Figma Component Properties, Figma UI/UX Tutorial, Figma UI Tutorial, Master Figma, Caler, Caler Edwards, CalerEdwards, UX/UI Design, UI Design, UX Design

Id: BbTiMmnsjqE

Length: 9min 20sec (560 seconds)

Published: Sat Jul 16 2022