Did you know that you can create all of these buttons from only one component in Figma? If this seems a bit overwhelming or you're not sure where to start, join me in this step-by-step Figma tutorial. I will show you exactly how to build this complex button component with multiple variants. My name is Sergey, grab a copy of work file from the link in description below and join me along in this Figma tutorial. And now let's get started.
All right, so let's start with making our first button. And to do that, we need to select a type tool. I press T, and I click here, and I just write some text.
I'll just write a button. I'm using Poppins font right now, and the text size is 16. The font size, I mean, is 16 pixels. Also, please make sure that you're having a vertical trim set in order to have nice paddings inside of our layout.
So... you know exactly the size on top and bottom from the text layer. Now let's create an out layout to make a button. We select the text layer and we press shift a. Now it's an out layout.
Actually you can watch other videos on my channel. The link will be somewhere on top about out layouts and how to make buttons. And now we need to make a fill.
So I select fill and I add some colors. I have colors prepared here already so I select blue one. And now let's add some paddings inside. So on top and bottom I want to have 16 and on left and right I want to have 24. And the only important thing is that we need to select a fixed height for the height of this outer layout because if we're going to be having an icon inside like this, you see when I add an icon, the icon is a little bit larger and the outer layout makes the button larger as well on the height. But I want to have it the same size with and without a button.
So that's why we need to have it fixed. So we fix the height. We go to this drop down and we use fixed height.
Oh, actually, I removed the button accidentally. Okay, so let's select a fixed height here. Yeah, like this. And now we can add a button inside. But before that, we need to have these icons that are already prepared here.
We need to make them a component. For each icon, we need to have a separate component. So I select all of these icons, and I go to the right menu, use this dropdown, and here I select create multiple components.
So basically, each icon is a component. And now I will add instance to this button. How I did that? There are two ways. You can actually hold option and drag the icon somewhere or the component and you'll make an instance from this component or you can go to assets panel and just drop your component from the assets panel.
So both of these are instance. So basically they're a child of the parent component which is over here. You can see the icon here that this is the parent component and now let's do it again. I'll add a button here. Oh, and I can to the button and now I'm having this button with an icon What I need to do next I need to create a component of the different states of the button, right?
But before that I need to explain you in a few words how we make And rename all our components and how we can be having different states and properties Usually I prepare all the properties before I combine different states into a component. You can create a component and then add variants inside of the component, but I don't really like that way because I think it's really easy to mess it up and to get lost inside of different states and properties, especially if you have a lot of variants of one component. So I believe it's easier to make everything prepared with different variants to make the variants and then combine them to one component.
And that's what we're going to be doing right now. But before that, let me explain how we're going to be working. We're going to be creating different copies and changing some things inside.
And then we're going to be changing the names of the component. And in a few seconds, I'll show you in a few minutes, I'll show you how to do that. So this is going to be our first primary button.
And now I want to make a copy of it and put it somewhere over here. and I'll change the color of it, right? And it's going to be my green button. So we're having one component with two colors inside. Now what I want to do, I want to have another copy.
So I create a copy like this and now I change the position of the icon. So I move it to the right. So we're having now two buttons, right? Two variants.
One with a left icon and another one with right icon and same here for the green one. And now let's make a copy again and move it over here to the right and here I want to have a hover effect and for the hover effect it means that when we have a cursor and the cursor enters the the component the button and the prototype it changes somehow has some interaction so what I'm going to do I want just to change the color a little bit for example, or I can add a stroke. Let's add a stroke to make it more interesting.
So I'll add an inside stroke and make it two pixels. And I want to have it not the same blue, but a little bit lighter blue like this. Yep.
Okay. This is nice. And now I do the same thing for the green one, add a stroke, two pixels, and let's make it a little bit lighter like this. So now we're having kind of like a state, the second state of the button. So we have green, we have green and we have blue.
These are our types or our colors. And then we're having second state, hover or default state. Now we need to add another state.
Let's add it. Again, copy to the right, both of these. And these are going to be our Actually, what we can do, we can copy the first one. It'll be easier because I don't want to have the stroke. Okay, now I select the first ones and I add a darker blue to the background of the button.
That means that this is going to be our active state or we'll see this button when we click on it. So this is the hover when we just hover the cursor and this one is when we click on it. And same here, I want to change it to a darker blue like this. Okay. And now let's create another copy.
Yep, like this. And change colors to this gray. That means that... we'll be having another state and this is going to be our disabled state. So that means that the button can't be touched for example, right?
Or some forms are not filled out and user can't go and can't touch or can't click on the button. So this is a disabled state. And to make it even more interesting, this button, so basically we're having only differences in color, let's add another copy.
for all of these buttons that's why we needed some extra space and now I made a copy and now I want to change the corner radius to 12 everywhere right so now we're having green one and the blue button with straight corners and rounded corners so now you see how many variants we're having right now already so and this is Pretty much it for now, so I think this is fine. We can also add different things over here, you know, like making different states or adding maybe some effects or something like that, but now we'll leave it like this for now, for this tutorial. So next, we need to rename them and to prepare them to make a component with variants.
To do that, let me explain how it works. So basically, the first word in our names for each of these frames. It's going to be the name of our component. It's going to be a button.
Then we'll be adding a slash and we'll be adding a color. So we will separate the variance to color. So basically you need to understand that this is like a main folder. and this is the subfolder. So the subfolder is the color of the main folder button.
So this is the structure of the button. And then we'll separate them by corner radius. So we'll use corners and this is going to be our subfolder inside the color folder, right? And everything else, both of these folders are inside of the button. Next we're going to be having a type.
It's going to be, or the state, for example, it doesn't really matter how you call it. It means that we're going to be having the default, hover, active, or disabled, right? And then another thing important is the icon, position of the icon.
So we'll call it just an icon position. So it's going to be on the left or on the right. It doesn't matter. Actually... The structure here is really important to be for the first, I guess, three words.
The button, the color, and the corners. And the state, the default, or the icon position doesn't really matter because they all belong to each other and they all belong to the corner version. So how do we do it and how do we make it fast? Let me show you a life hack and a trick to do this.
First, we need to change the name of all of these variants. So we select all of them and we press Command R on our keyboard. Now we see this little window popped up and here we can change multiple frames. We can change the names of all of them. And you can see we have match name is optional and rename to.
We're going to be using only rename to and now we'll remain it. rename it to a button. Click enter and you see that all of these buttons are now renamed. This is really good.
What we need to do next, we need to put the color for all of them. Actually, for the disabled one, we'll use the same color as the parent, but we'll change only the state of it, so it's going to be disabled. So first we select the top buttons and top variants and again we press command R. We'll use a button current name, so we'll leave the button, then we'll add a slash, and we'll add a color, it's called blue, and press rename.
So now you see that they're all button slash blue. Here we'll do the same thing. Command R, current name, slash green.
We use rename. Alright, so now we have this set up. So the next thing, what we need to do, we need to go to the corners.
Right? And now we select the top ones over here and we select the green ones over here with the straight corners, right? And now we push command R again to change names and we use current name, slash, and here we'll use straight corner. Straight. You see now we have button blue straight over here.
Now we need to select the blue buttons with rounded corners and the green ones with rounded corners. And again change it to press command R and we see it was set current name slash rounded. Rename.
Alright this is looking good. and next we need to use the state. So we select now the first state like this, all of the in the blue and the green ones and this is going to be our first column. Again we press command R, we use current name slash and we use default. Rename, then we use this one.
Command R, current name, slash, hover. This is going to be our active state, or pressed. Select this column, Command R, current name, slash, pressed.
We add the pressed name. And the last one is going to be disabled. Current name, slash, disabled.
Alright and now we need to select the variants with the icon on the left like this both green and blue version and rename them current name slash icon left Or we can just use left or right, it doesn't matter. Let's leave it like this for now. And here I need to select the right one, like this and like that.
Again, change all, command R, current name, slash and let's just write right. So we are ready to make a component from all of these variants. This is the important thing. Before you do that, please check all the names.
That should be fine. And now let's select all of them. Go to the right panel and here use Create Component Set. Now we have a component set.
We see that we have a name of the component. This is our component. And on the right we see different properties with the states already set. So this was pretty easy, right?
So the first one we can change, we can call it a color. Second one we can call it corners. Next we'll call it state. And here for fourth property we'll call it icon position.
and here we can even change the name that we did before so we'll leave it only values left and right all right okay so next thing we need to add the toggle for the button for the icon we need to select one icon over here you see on the first variant And then on the right panel, you'll see this little icon that shows that you can do the multiple edit variants. We can click on it, and it will select all the instances inside of this component. And now what we need to do, we need to click this little icon over here in the appearance.
section it's called create boolean property we click on it and here the name we can set to show icon and the value will be true and now we're going to be having a toggle that will show and that will hide the button or the icon And now let's see how it works. So we go to our assets, we drop our button to our playground and we can see all the states and all the properties of this component. So now what we can do, we can make a copy, different copies and now what we can do we can change the color, we can make it rounded corners, we can remove the icon, we can change the position of the icon so we can play around with this button and one more thing let's show you that since we're having this icon as a component when i click on it over here i can go to the right panel and i see that there is a search icon right it's the name of the of the layer right okay but when i click on it i click on this arrow i have a drop down and i can change the icon inside of my inside of my um of my variant of the button like this. So I don't need to have extra buttons with extra icons.
And now I can play around with this icon. I can move it to the right. I can change the corner radius of the button and I can change the color.
And I'm having this icon there as well. And again, we're only having one component with different variants. We do need to create different. different buttons for different states.
And the most important thing is that since this is a component, and for example we have different buttons in our designs, if we change something in our main component, for example, we understand that we want to change the color of the primary button, so we want to change the color of the blue. and for example to make it lighter like this, you can see that when I change the color in the component, in the main component, it changes everywhere. So this is really cool and this saves tons and tons of time.
Thank you so much for watching! I hope now you understand how to make complex components, how to make buttons with different states and different variants. I hope this was interesting for you and you liked the video so don't forget to hit that like button below. and subscribe to my channel if you haven't done already not to miss other interesting tutorials about Figma and Framer.
And I'll see you in the next one. Bye-bye.