Learn how to use nested symbols to create a button system with different states.
- [Instructor] Now that we have the colors, textiles, and icons set up, I'm going to show you how to use nested symbols to create a button system. A good design system should cover all components and all of their states. So for example, the Default, the Pressed, the Hover, and the Disabled. Not only should you design each of these states so that they could be built and documented, but having a symbol for each state of a component is also very useful for easy application when documenting a product flow or interaction. So let's check out your sketch document.
You'll notice that I have Primary Action buttons with the primary color in a large, medium, and small here. I also have created different sizes and the Default, Hover, Pressed, and Disabled states. And they are all using the exact same symbol. All of the large buttons here, Button Large, Button Large, Button Large, Button Large, and also here on the Secondary Action, we're also still using Button Large on all of these.
Now the medium and the small will also use their own symbol. Button medium, medium, medium, medium, and also the medium down here since the symbols are dependent on the size. So now let's look closer into each of these buttons. Going to go ahead and Double-click to inspect and go to my Symbols page. So you have the label which is inheriting a textile for Button Large, as you can see over here to the right.
You have the State which I will talk about in a second. And then we have the color. And the color is just being pulled from the symbol here, so I can switch the colors exactly like we did on the icons. So let's talk about these states. So I have one symbol here underneath, that is State/Hover. So a symbol, all this is is a white shape, just a white fill, that is just 15% opacity.
So when I put this over the color symbol in my layers, I will have 15% white over my button color, which makes the primary color 15% lighter. So you will have one primary color that is being effected by all of these different states. So the other state is the Pressed state. And this is just a black fill at 25%. So 25% black will be placed over the primary color, creating a darker Pressed state. Then I have the Disabled state which is 50% white over the primary color so that it is very light, creating the Disabled look.
Notice that all of the symbols are used as a mask onto the bottom layer. And that's also so that I can create a radius and get the rounded shape for the button on the bottom layer which is just a rectangle here. And you'll notice that the radius is four. So again, you'll notice that all of these are the exact same symbol, so let's go ahead and just preview one. Let's go to your examples page and just go ahead and insert a symbol, a button, and just a large button.
And let's just put it right here in the middle. You'll notice here on the side that it has a Hover state by default. And if you want to just create it and make it the default color instead of the Hover state, all you have to do is take it off. And just, it'll be none. That'll be your default State. Now if I want to change the color to the Secondary color here, I can do that. And if I want to change the text here, for example, to Submit, I can do that as well.
Now let's say I want to change the state to actually be the Pressed state. You see how it got 15% black went over that color so that now it's Pressed. If I want to change it to Disabled, the 50% white is over the entire button. So now it's at the Disabled state. You can do this to all of the sizes so if you insert a small button, you can do that as well. You'll notice you also get all of the same overrides. So all of these Primary and Secondary buttons are the same symbol, just different colors and different states.
Now let's go back to our Foundations and Components and check out this Icon and Label button for a second. So let's go ahead and inspect that. I'm going to Double-click. You'll notice that we have the same nested symbols. We just have an icon in there as well. So if we go back to our example page and just insert an icon button you'll notice we have two more overrides here. So I can change the icon here to, for example, a check.
And I can also change the color of that icon. Just like we learned in the last video. So how do we actually create this? So let's go ahead and start from scratch. So what we're going to do, we already have our colors created and we already have our textiles created, so let's go ahead and create this button. So I'm going to insert a color symbol. Here we go Insert + Symbols + Color. And I'm just going to put it right here.
And I'm going to resize this to our button style size which is 160 x 48. Alright. I'm going to go Insert again Same Styled Text, and I'm going to grab our button sized text which is here, and I'm just going to put Default right in here, for our Default button. And then I'm just going to center it so that it is in the center of this container. And I'm also going to drag the text to the width of the button.
And I'm doing that, center it as well, and I'm doing that so that if the button text is longer it's not going to get cut off there. Inside of Default, if it's something like Continue, it won't actually get cut off there if you have the box width on the length of the actual button. Since the color is a symbol already and I want to add a corner radius, I'll need to add a mask below the symbols. So let's go ahead and add a rectangle as a mask. So I'm just going to add a rectangle here and going to go ahead and make the corner radius four.
Drag it to the bottom. And I actually need to make this this one 160 x 48, that one 70. And let's go ahead take these symbols and I'm going to create a mask with this bottom rectangle. Alright. Now let's create the symbol so I'm going to go up to the top, now that I have this created.
I'm going to hit Create Symbol. And I'm going to just call it button/default1. And I'm going to send it to the Symbols page. So let's go ahead and go inspect it. And here we have our button/default1. So we have the text, the color, and this color is on the mask where I have the quarter radius here. Now we're going to create the states. The Hover, the Pressed, and Disabled States. So what you're going to want to do is create a new symbol and it can be a rectangle of any size or any shape.
So I'm just going to insert a rectangle here and it's just going to become an arbitrary size, and I'm going to hit Create Symbol. And it's going to be state/hover1. Okay. So now we can just delete that symbol right there. We're just going to drag it under here for organization sake. And what I'm going to do here is I'm going to take this rectangle. So this is going to be the Hover state, so it's actually going to be 15% white.
So I'm just going to make this white. And then I'm going to make an opacity of 15%. 15% white. And I don't want a border on it so I'm going to take off that border. So to create the Pressed state, all we need to do is duplicate this, so I'm going to Right-click + Duplicate. And I'm just going to rename this over here to state/pressed1. So state/pressed1.
And this one is going to be 25% black so black, oop that is not black. And 25, there we go. And now let's do the same thing with the Disabled state. So just click Duplicate and rename this to state/disabled1. And this disabled state is going to be white at 50%.
So let's go ahead and make this white. Do this white. White at 50%. So now that we have our states and they're all symbols, what we're going to do is insert an instance of the state into the button symbol. So let's click on the button symbol. And let's go to Insert + Symbol + State. And I'm just going to insert the state right in there.
So this defaulted to the Disabled state which is fine, it doesn't really matter which state our defaults do. And let's go ahead and make this 160 x 48. And we will put that in here like that. And then what I want to do is drag this underneath so that it is over the color. Now I have a 50% white over the Primary State. I also like to change the overrides and add some icons like I did on the other one. So let's go ahead and add some of those icons here.
So if I want to grab some of these, for example, I like to put the label here on this one. So if we go back, I like to make this Label instead of Default so on your override it says Label with a little icon. I also like to put in the color with a little arrow here. So let's go ahead and do that. And then for the state, you can put an icon if you want, but I'm just going to leave it here for now as just State.
So let's check it out and go back to our example page and see the overrides. Let's go right back here. Let's look. You'll notice that we have state/disabled1. I can change it to the Hover. I can change it to None, which is the default. Or I can change it to the Pressed which is a darker, that's the 15% black over the Primary. Now let's go back to our symbols page and take a look at the button with icon here. So you'll see over here, we have our buttons and we also have this button with icon over here.
So it's pretty easy to make. All you're going to do is come back up to the one that we created and I'm just going to duplicate this. Duplicate. And I'm just going to rename it button with icon. Button/label_w_icon1. And all we're going to do here is insert the icon symbol. And we can choose any icon. So let's go up here to Insert + Symbols + Icon.
So whatever icon really you want to use here, you just kind of insert it in there. Make sure that it is above here. There you go. And I'm just going to kind of resize this to 36 x 36 so it's a little bit easier. And I'm going to change the color here to no white. Let's do that. Try to move it around a little bit here. Kind of move this around a little bit as well, so that we have an icon in here.
And let's actually take it down to 24. That's a little better. There we go. Okay. So it's really that easy. Now what we can do, if we go back to our example and we go Insert + Symbol + Button + Label with Icon, the one that we just made, label_w_icon1. I can take the state off if I want. I can change the icon to something else, whatever I want here.
If I want to change it to let's say a a rock or a nail here, I can change the icon color here to whatever I want here. And I can change the state to Pressed. I can change the actual color of the actual button here to error red. The possibilities really are endless, so all of these overrides that Sketch has given us has made it so easy to create a button system with consistent styles that can be reused for high-fidelity comps over and over again.
So using what you've learned, you can create different sizes and instances with clean and heat symbols.