Learn how to create nested symbols and use nested overrides in Sketch.
- [Instructor] I believe the key to designing and building consistent websites, products, and design systems is organization. Fortunately, Sketch has many ways to keep organized. Symbols are among the best of these methods. Symbols are particularly powerful for system design, to maintain consistent styles and UI components. Let's talk about what nested symbols are, how they're used, and why they're important. This is what we're going to be creating. We're going to create a system with colors, reusable textiles, icons, buttons, and forms.
So one thing you'll notice, is that this is a system of buttons. On the side here, you get this purple arrow that indicates that this is a symbol. So I'm using nested symbols within Sketch to create a button system. This is the same symbol as this ButtonLarge, as this, as this, and even these purple buttons down here, the secondary. They're all using the exact same large symbol. And if you look over on the overrides menu here on the right hand side, all we're doing is using the same symbol with some different overrides, such as color, their state, and their label.
And we do the same similar kind of thing on forms. So you'll see that this, all of these form fields are using the exact same symbols, Text input/default. And we have overrides here that we use on the side to get their styling. So before we get into how to do this, we have to understand how nested symbols work. So if you want to go ahead and open up your exercise file. So how do you create a nested symbol? You can put a symbol inside of a symbol or you can select multiple symbols and create a new one.
And there's no limit to how deep you can actually nest these symbols. When you edit a symbol, it updates wherever it's being used, included nested symbols. You can override nested symbols, but you can only override nested symbols that are the same size. So on your menu for overriding, for example, you'll only see nested symbols that are the same exact size. So let's see how this works. Here I have a mobile app with a bunch of different rows in a responsive table.
It's a pretty standard for a lot of mobile apps that have some styling here with multiple rows within a table. So each of these are a symbol. So you'll notice that I can change the date, details, subtext, amount in the icon for some of these on here. So let's just go ahead as an example and change this first one from 8/1/17 to 12/12/17. And you'll notice that it updated to 12/12/17.
Let's go ahead and change just some of this subtext from Checkcard tacostop to Checkcard Trader Joes. You'll notice that it updated up here as well. And let's just change this to $54.55. And you'll see that that amount changed here. So some of these also have a subtext, some subtext here like this amount may change, amount may change, waiting on final amount.
And some of these also have some icons. So if you wanted to remove the subtext or add the subtext, for example here, the default is amount will change, but if I just put a space bar in there, I can actually remove that subtext for some of them altogether. Or if I want to actually change this, Waiting for final amount. Alright. So let's get to the icons, here. So you'll notice that some of these have icons and some of them don't.
So let's take a look at how to actually do that. So if I look at these, I have this icon deposit. I can change the actual icon and I can also change the color here. So I can make it blue and I can change it to this check icon if I wanted to or this deposit icon or something like that. So how did I actually do that? That's, it's because all of the icons are the same exact size and all of the colors that it's pulling from are the same exact size on my symbols page.
So let's go ahead and check this out. So this, I just double-clicked to get to my symbols page. So you'll notice here, this table row symbol, I have the date. That's why we were actually able to override the date. I have the transaction details here. That's why we were able to override that. I have the subtext. I have the amount. And then I have this icon that is actually nested inside of this symbol. So you see these purple arrows here will delineate that this is actually a symbol.
And if I actually go into one of the icon symbols, for example, this check, you'll notice that I have the color actually nested inside of that symbol and that is how we are able to change the color. So that is pulling from these colors here. So the reason that it's able to pull these icons is because they're all 48 by 48 pixels. So you'll notice this width and this height here is 48. This is 48 by 48. This is 48 by 48 and this is 48 by 48. And these colors here are all 96 by 96.
And that is why that symbol recognizes that in the override panel for these particular color symbols. So just in case you don't believe me, I want to show you how that works. So I'm just going to duplicate this really quick and let's just rename this to red. And then just change the swatch color to red. And here, that's orange, red. And if I actually check this box adjust content on resize, so that's going to adjust the content within the symbol as well.
And if I change this to, like say 50 or something, you'll notice that the actual title was removed here. So you'll know it won't be associated anymore. And if we go back to the example page and we look at the overrides, that red actually isn't in there because it's not the same size. So that's why it's so important that if you want your symbols to be all within that override, they have to be the exact same size. So you can see when you're building a list or a table menu or something that you're going to be repeating a lot like table rows or you get to use a symbol inside of a symbol, it's really easy and it updates in one place.
Another example of this is some of these kind of navigation menus on the bottom where you have a selected state, so, for example, this is your selected state. This is what you're actually on. If you want to change the color of this to the, to be the selected state and if you want to change this to be the deselected state, it's really that easy. So that's kind of how you can see the power of nested symbols here. One more thing I just want to point out.
If you go to your symbols page and if you wanted to even rearrange this entire symbol and move, you know, this here and, you know, have it kind of come all the way over here. And then I can grab this icon and move this amount all the way over here. And then align it. You can see that everything here has actually changed to that style.
So, everything has changed places to reflect the changes that we made on the symbols level. So you can start seeing the power of this and you can build a system of nested symbols that you can use across your documents to save so much time and reduce duplication of efforts.