How to Make Button Component Variants in Figma - Figma Component Variants [2020 update]

hi there this is alex from essential web apps and in this figma tutorial we will learn how to make buttons by using components and variants function in the recent figma update you can actually make a button one time as your asset with variable property like small or large clicked or hovered with or without icon etc and you can change these properties from a simple drop-down box but before we get into it we make videos regularly if you want to see videos like this please hit the subscribe button and click the bell icon for notification so let's go to the figma first let's take a frame with a 105 weight and 42 height change the color of it to sky blue then put a text in it name it button let me just fix the size and color of it now here is the important part rename the frames properly otherwise you will not see the properties properly so in here this is a button so let's type the button then slash i can say it's a large button it is the primary state of the button and icon status is false let's add that also now make a copy of it let's change the color for the hover state and rename the frame from primary to hover again this is important if you don't do this properly your property menu will not show up make another copy of this rename it from hover depressed in here i'm going to add a solid black border maybe 2 pixel thick i will use this tool here to merge these two rectangles give it a darker shade of the body color and make the layer blur as you see it gives a downward shadow as it is pressed down just change the opacity here now let's make another copy rename it from press to clicked let me just delete the shadow here and change the color also okay it looks good now now next let me convert these into component by clicking here you can also use this shortcut done now if you see the asset panel you will see that these components are sorted here automatically now select these all and you will see this combine is variants click here and you will see the asset will convert into a drag and drop single component and as you see because of our proper naming all the properties appeared properly here we can rename it as we want okay nice now let's test it with a simple prototyping let's take a frame first and from the asset panel just drag and drop the button into the frame make four copies of this frame now it is the primary so for the second one i will change the state of the button as you see properties appeared here as we created earlier select hover now change it to pressed finally clicked nice now let's make a prototype first this button directs it to the second frame and set the interaction to while hovering then for this one set it to while pressing and for this one just set it to on click as it is the default done let's see it in action this is the primary state as we hover on it it will change color if we press on it you will see the shadow on the edge and after we click it will change the color so just like this you can make a button asset just one time in figma and use it over and over again so there you go what's else you want to know about figma let me know in the comment section and if you like the video please give us a thumbs up and share it with your friends and i will see you in the next video you

Channel: Essential Web Apps

Views: 9,122

Keywords: component variants in figma, figma component variants, figma variants prototype, how to make button variants in figma, how to make component variants in figma, how to create variants in figma, figma variants feature, review component variants in figma, figma variant tutorial, figma components, figma component, figma variant, learn figma, figma variants tutorial, figma variants, how to use variants in figma, how to use figma auto layout, variants in figma

Id: TmH2C-1yrPc

Length: 5min 30sec (330 seconds)

Published: Thu Dec 10 2020