Figma Basics: Create and Use COMPONENTS With VARIANTS (Tutorial)

after watching this video you'll understand how to set up and use sigma components with variants we're going to start by preparing a screen so i'm going to go select the frame tool and create a frame with the dimensions 1000 by 600 and this is going to be our screen so we're going to name this screen and let's say that you want to create a button component that you then like to use on this screen so how do you do that so i'm going to go to the text tool and right button gonna be all caps i'm gonna press shift a to create an auto layout if you want to learn more about auto layout the link to the video is here and in the description below let's get back to our example so i've created a button and it's gonna have a background let's say it's gonna be a red button for example with white text and we're gonna also adjust spacing and make the bread a little bit softer so that it's not that contrasting okay here is our button if we select the button and go here or press option command k this will turn into a component so i'm gonna press option command k and you can see that it turned into a purple element this means that it's the component right now if you want to use it on this screen you have to go to assets if you look through this list right here you'll find this component that you just created so i'm gonna click and drag it onto the screen this is how you set up and use components whenever you see this symbol this means this is the main element so whatever changes i make here this will affect all the instances so this is a component and this is an instance so if i change the color right here you can see that this instance reacts to any changes we make okay so now we have we have a component we have an instance but we would like to create variants how do we do that we select the component and then go here to add a variant let's say that on your in your project you'd like to use red and blue buttons so you're gonna have two variants red and blue so uh the second variant we're gonna change that color background of the background to to blue like this and also when you select the component here you have properties so the property one that does not really say what's being changed here right so if we name this for example color i think that's a better way to describe this component you then have a component that has a property called color and the values of this property are default and variant two so that's better although default and variance two does not again doesn't really describe what's going on here so if we select this first variant and instead of default we're going to say red and in the second one we're going to say blue i think that's more understandable right so now if we go back to this instance you can see that we have a property called color and you can then choose from red and blue right so we created another variant through the property called color and the property has values red and blue you could make any changes to whichever variant you want you could name your variant blue and then make the background green right so it's going to say color blue all even though it's uh it's green the reason is that we we chose a naming convention and then we on purpose change the color so that it doesn't correspond you have to pay attention to that for example if you're creating a new variants watch out for the naming and the actual changes so we're going to revert that back to blue perhaps you'd like your button to be a little bit more like to have more options let's say that you you'd also not only would like to choose from red and blue but you also like to select whether the corners are around it right that's definitely possible you can select these two variants within the component and then press option and then drag to create two new variants be careful not to drag this outside the boundaries of the component because then it becomes an instance instead we want this to be a variant within the component so now that we have four variants we have to specify the second property which is going to be corners so we're going to select this and then go to properties create a new property and i'm going to say rounded corners and value is going to be no for these two the value is going to be no and for these two the value is going to be yes yes and we also have to specify that the corners are actually rounded like so and now if we go back to the component instance you can see that you have two properties to choose from it's the color and rounded corners also we have to specify the color for this one which is going to be red and blue so right now we can choose any color we want and we can toggle rounded corners so this has been a very basic overview of how to create and use components with variants in figma if you have any questions or if there's anything unclear let me know in the comments below if you're interested in tutorials on figma and ui and ux design i do plenty of those on my channel thank you for joining me and i will see you in the next one

Channel: Mavi Design

Views: 24,530

Keywords: figma components variants, components and variants figma, figma variants components, figma variants and interactive components, figma components, components in figma, figma variants, figma, figma tutorial, figma components tutorial, figma components var

Id: M_Pd4rqQjQo

Length: 5min 28sec (328 seconds)

Published: Wed Jun 15 2022