ADVANCED Symbols in Sketch

In this video I want to show you how to use sketch symbols to create scalable and reusable components and not only sketch symbols, but nested symbols and symbol overrides inside of parent symbols to create some pretty cool stuff. So let's dig in. Alright, first thing I'm going to do, open up sketch and I have a file that I want to open up just to give you a look at what's going on. So I'm going to open this file. First thing I like to do when I'm working in a new document and getting into design mode, go full screen command option T to hide this bar and command option 1 and 2 or 3 for both of these at the same time to kind of get rid of all the toolbars. But I just want to show this really quickly and actually I'll keep the layer panel showing so you can see this. So. So I've just made a quick, simple kind of like list of people and avatars with the title description and you know, some type of arbitrary icon and then also kind of a another standalone version with without an avatar. One thing I want to show is the difference between this list, one without a list. You can see these list items have this small divider bar. This one doesn't. This is an iPhone 7, iPhone 7 plus. And then we have an iPad portrait and now we have desktop kind of view. And you can see the rounded corners on this one and see how these are all stretched. Now this is all one symbol. Everything on this document is based off of one symbol. And to show you that I've got it, Li li, slash with image and icon. Now the naming doesn't really matter that much right now. I'm not going to worry too much about the naming. I just want to show you, I just want to show you this symbol. It's made up of this avatar which I also have another symbol. I've got a border bottom symbol in here and I've also got the name, the description and this icon which is another symbol. So let me just show you. If I wanted to make another one of these. Whoops, let me just move this up. If I wanted to make another one of these, I could bring it down and let's say I wanted to change this image. I could grab one of these pre selected images I have in here and I could say this is a demo and these are just overriding these text descriptions that are already in there. If you haven't done that before, as soon as you create a symbol with text in it, it will Give you these overrides and I'll cover that in just a second. This is some description. Alright, and so what if we want this little icon? Well, let me bring in an icon. Maybe it'll be the little blue trophy instead of the golden ribbon. And in fact maybe I want Michael to have a golden trophy as well. And maybe this one does not need to have anything and neither does Adele. Maybe only Michael and Ritu have these two symbols. So, and this is all the same symbol. So all of these are, they're different instances. So I could, I could make these the same, go in and change these back if I wanted to make them similar. But yeah, so just check out like let's say maybe we want the name and the description over here. So I've got a little 16 pixel trophy. Maybe I draw a 20 pixel not rectangle ellipse there and maybe I make this white and I'm going to bring this thing over here. Maybe this needs to be slightly larger. See, that's 24. Let's make this thing like 32 just so there's some breathing room around it. And now maybe for some reason, just for just for demonstration purposes, let's right align this text and put it way over here. See, that's 24. That's 24. Alright, so now I'm going to return to the instance and you can see that everything is now completely updated with the new style. Right? Align text. Even the scaled versions are in place and even the bordered versions are in place. Now another thing I could do is, you know, now that these are created, the ones that don't have an icon, I could go in and make this, this little background piece and this icon, I could create a group and say, you know, icon group and turn that into a symbol and I could remove the icon group on the ones that did not have it. So that's kind of a cool way. Like when you create a symbol inside of its symbol, you have the option to override it with none. So that's a neat way to change that. But I'm gonna go back, back, back, back, undo all of that work just to get back to the original kind of symbol that we had. Move my text back. I'm going to just show you how to build this, the same setup kind of from scratch very quickly. Alright, so I'm going to take a quick Little Command Control Shift 4 screenshot of this thing and I'm going to create a new document by hitting command N and I'm going to hit a for the iPhone 7 art board and I'm going to paste this screenshot. Now this is just for reference, just so I can create the same thing. I'm going to hide my layers for a second. Okay, so this thing is roughly looks like it's like 86 pixels wide. So I'm just going to draw a square here and I like to do the command shift nudge technique to get this thing to be the right size. You can also just go in and, and change it there in the properties panel and grab this color, make the background white. Alright, so now I'm going to hit O to create an avatar. Let's make this thing 60 pixels and I'm going to put this 24 pixels from the edge. Just out of curiosity, I'm going to go back to this other one and see what that is. So that's a 60 by 60 and the background is 84. Okay, so let's do an 84 pixel background on that one and just kind of line that thing up. Okay. Nice and lined up. Makes me, makes me feel good. 12 pixels there. 12 there and 24. All right, so now I'm gonna say name. Sometimes it helps to start with a regular name and you can always just change it to be more abstract after the fact. Let's make this thing like maybe. No, it's too big. Let's do 20. I think that's what I had. And I'm gonna make a copy of that. Hit return. This is some description. Maybe make that like 16 and we'll grab this color which is like 858585. Maybe this is regular instead of bold. I think that one is bold still, but sometimes you just want to change it up. All right, that's looking pretty decent. And maybe I'll keep that bold just because the other one was bold. Looks like that was about 14 instead of 1 instead of 16. All right, that's pretty good. Now what I did on these icons is I use this program that I downloaded called Nucleo. They it's a really nice little app for icons. You can just search for what you want. You can go solid or stroke if you do like a glyph or something. I use this a lot for reference. Sometimes I use the actual icons. Sometimes I just use it for reference and then redraw some. But that's what I'm going to do for this. I'm going to make that 16 pixels and the other one I had was like a ribbon. Make that 116 height. Alright. The way I'm going to do these the way you want to do these icons, you want to have like a base size to start with. So I had a base size of 16. So I'm going to create this little background shape and then kind of position this icon on the background shape. It's kind of hard to see that. Let me darken the background so you can tell that a little bit easier, just temporarily. This is going to allow us to align these symbols. This will kind of create, you know, the bounding box for this particular symbol. So I'm going to take this thing and hit Command G to group it, Command R to rename it. I'm going to call it Icon 16 Ribbon. Now if you do Icon SL16 Ribbon, there's a reason when you go to do the symbol overrides, it will look for the name. Don't worry too much about the name because you can always change it in the symbol page. All right, so there's the icon trophy. You can right click or hit Create symbol. You can also hit this little icon in the title bar. But the quick key is Command K and just much quicker. So select that group, hit Command K. Whatever you've named it there, it will automatically pop in right there. So you don't have to worry about naming it. All right, so now that these are symbols, they've been sent to the symbol page. So I can safely delete both instances if I wanted to and they would still be in the symbols page. And I'm going to keep one of them to put it in here. And I'll put this thing like 24 from the edge. Alright, so now this is starting to shape up. I'm going to change this back to the background color. Okay, so now what I want to do is I'm going to create so this entire thing. Alright, so let's turn this oval into an avatar and let's rename this layer as title and rename this layer as description or shortened it. And whatever order, whatever layer order you have here is going to show up in the symbol. So I might, I might have the avatar be first, then the title, then the description and let's call this one the background. So now let's go ahead and group that and call it line item. Again. It doesn't really matter what this is called. All right, so I've got line item, slash, two lines. There's probably a better name, but for this purpose I'm gonna, I'm gonna leave it as that. So command K is going to turn that into a symbol. All right, so now you can see that I've got Some default overrides. I've got title and description because I cleverly named the name title and description. So now usually when this is done, this is when I'll go back in and say, I might say title and I'll leave it as this is some description. You could also just say description too because you've kind of already set the design. You've already kind of set it up and then now this is more of like an abstracted symbol. So now I can go back in here and say Matt D. Smith, put a little description in there and you could change this one, you know, to whatever. And so now because I have icon trophy right here and I named it icon/16 trophy sketch is going to look for anything else named similarly. So I've got icon 16 ribbon. So I'm going to turn that one into a ribbon. And so it's still the same symbol. So if I move this one over here, you know, both of them are going to change. Alright, so now how do we get, how do we get those lines if we want to line everything up, you know, how do we get those lines in there and keep it in the symbol? Well, let's go back into this thing actually I'll make a couple of copies I just optioned. Let's make a couple of copies by option dragging and hitting command D. So now I'm going to go back into this and I'm going to grab the background and hit command D and I'm going to call this module or actually let me call it Line Item Divider. Again, don't get too caught up on the names. Just call it something, you can always change it later. And I'm going to put a small border. Whoops, not a border. I'm going to do a small shadow on the inside. Actually I need an inner shadow. And I will tell you why you want to put it on the inside. Let's we want to put it coming from the bottom so it's going to be negative and maybe we make this thing like really light gray. So now I've got this, I brought the divider over to here. So it's kind of touching that this is kind of a standard kind of list item. If you look at any, any of any of Apple's like system preferences or the way they list contacts and stuff like that, they have like the, the picture or the icon and then the line is kind of offset. So this is just kind of following that pattern. So now if I go back and I look at these, you can see that because I put the shadow on the inside. It's you can butt the component right up against another one with 00 pixel spacing and it's going to be right there. If you were to put it down the shadow down one pixel and you put it right up against it would be covered up. It would look like this. And that's no good with no shadow. All right, so now that we have those, what about kind of the background, the top and the bottom border? Well, I could go into the symbol and put like a full width top border or a full width bottom border. But then I'd have to toggle that on and off for every single symbol and I really only need to mess with that maybe for like the last symbol. So what I'm going to do is create a new symbol behind all of this. I'm going to create just a rectangle. I'm going to send it to the back holding command option, the down arrow and I'm going to temporarily nudge these over. If I select all of these, I can group it and see what the height is. So it's 252 and so that's already 252. So it's actually a good, it's a good size. So I'm going to control C select white and now I'm gonna, I'm gonna do an actual like outer shadow. So it not. So it's. So it's sticking out past the component as opposed to being covered up by the component with an inner shadow. So the inner shadow I'm gonna go y equals 1. We'll do the same color and I'm gonna, let's see, I'm gonna copy, I'm gonna right click and right in there and duplicate that and change it to negative one. Alright, so now we've got our background. I'm going to put these back over here into place and I'm going to call this module background border top bottom. Again, don't worry about the names too much. This just whatever helps you memorize it. We'll get into naming convention stuff in later videos. Alright, so now I am going to make this a symbol by hitting command K. All right, so now this is looking pretty good. But you'll notice the last symbol here still has that divider line which is super annoying and you would never want like the divider line, divider line and then the divider and the bottom line. So how can we get rid of that? Well, if we go back into this symbol, we can click this line item divider that we've Already named and make it a symbol, turn it into a symbol there I just hit Command K. So now we have the option. We have this showing up here, line item divider. Well now we can just change that to none on the last line item. So now we have the divider showing on the first two, no divider showing on the bottom one. And we have a new symbol for the background, this new symbol back here. And remember the shadows are facing up and down so it extends past those component edges. All right, what about, what about the images? Well, let's get into this thing. We haven't done the image yet. So for this avatar I'm going to go ahead and hit Command K to turn that into a symbol. So now if I double click it, it will isolate that particular symbol. Now I went ahead and got some images set up here so I'm just going to vainly grab my avatar and put it in place. And that is way too big. So I'm going to Change it to 60 by 60. Put it in place right there. Now I want this thing to be a mask. So I'm going to select the bottom shape and hit mask. So now this is an image and if I hit return to instance that's going to be there. Alright. And that's kind of, that's in the default two line symbol. So if I go back to the instance now you can see that all of these are now me and let me go back to this file to just grab a screenshot of the names here and replace that just so I can have a reference. So now that I've put that image in there and I've created that symbol with the image, now the symbol override is going to give me a Choose image option. Now that's been in place, that choose image thing has been in place for a while. It's not new with nested symbols, but it's still pretty powerful. So now I can go in here and say, all right, let me grab this image of Michael, change the copy, let's go ahead and change this while I'm here. There is, there is quicker ways to put in actual con content with plugins like Envisions Craft, but it always just kind of makes the layers a little bit jumbled and I feel like I don't have a lot of control over the way it populates, so I don't use that particular function in Craft. A lot of. Even though it is powerful, I still like to have a lot of control over the way these components are created. Alright, so now I need new Images of Ritu and an image of Adele. Alright, so now you can see this is pretty much the same thing. But now my, the only catch with kind of creating this is you need to make sure that you scale that background shape. Whoops. You need to make sure that you scale the background shape with the rest of your things. Whoops. Somehow my background shape got way out of place. Just put it there, scale it down and send it to the bottom. So there now we have this group of avatars and this list and somehow you can see that somehow Ritu's symbol doesn't have the divider. So let me just bring that back in and I would, I changed it because I had three, so now I add four. So I just bring that back in and it's kind of neat because always on the bottom one, typically the bottom line item would have like no border or no spacing or something. You know, it's going to be slightly different with the bottom one from the rest. And that's possible because we have that line. That inner border is also a symbol that we can override with none. Alright, so now we've, we've built this image, we've got the backgrounds, the dividers, the avatars. If you wanted to have a symbol that wasn't like the same, the same face, you could just go ahead and design like an icon version of like an empty avatar and export that as an image and then kind of re import it to see, you know, to have that kind of default avatar as the component. I'm not going to do that right now because I don't think it's as valuable to see that. But what happens if we want to go and, and create, let's say an iPhone 7 Plus and we want all of these same symbols to work on an iPhone7 plus layout? Let me get a background color. So typically you would just want to grab these things and scale it over. But now everything just got totally jacked up. Not what we wanted to do. Well, that's because the title and the description width is set to auto. If we set both of these to fixed and make them kind of a little bit longer so they would fit and actually I might bring them in a little bit. So now I can go back in here and I can see, I can see that, you know, now, now everything's kind of working. But it looks like my icon here to the discerning eye. You can see that this icon has stretched a little bit. And you can also tell that this Matt D. Smith is a little bit the spacing is a little bit jacked up and even these avatars are stretched. So if you contrast the way this one looks with that one, you can see this is more of like an oblong ellipse now and everything's kind of a little bit off. Well, to handle that. So Sketch has these resizing tools. So now I can. It's going to stay on stretch. It's right here in the Properties panel and it's going to stay on stretch by default. So most of the override, most of the resizing overrides that I change are going to be pinned to corner. That's just going to make that thing stay over there. It stays to the closest corner that it's currently in. So I'm going to change all of these items to pin to corner so that way it won't resize, it'll only kind of stay in place. So now if I go back, I can see that these avatars aren't getting stretched. This icon is not getting stretched, but for some reason the, the title and the description are getting. They're floating. So what I'm going to do, let's change these back to auto width and keep them in pin to corner and see if that worked. All right. Apparently auto width does work. It doesn't have to be fixed width. I have noticed some instances where fixed width was necessary, but looks like auto is possible. Alright, so there's one more thing that's not quite working out and that's the border bottom here. It's shifting over. Now if we did pin to corner, it would change and if we did stretch, we couldn't guarantee like where it was going to stay. There's another option called resize object and that will resize the object in its exact place. So now I'm going to go and go back to this thing and because now I've changed it to resize object, you can see that that line and the text is all going to stay in the same place no matter how wide I make that avatar line item. All right, so now these things are good to go. If I wanted to make iPad portrait and grab this whole thing, change the background so we can see a little bit of contrast. Whoops, that was wrong color. Now I can safely stretch these things all the way across. So there you have it. Scalable and reusable components inside of sketch with symbols and nested symbol overrides. Again, you can get in here and start changing these trophies. You can, you know, make them have none. You could do a lot of different things. You could get in here and you could, you could get in here and, you know, change the color of everything. You could change everything about this one component, one component. And it's going to change everywhere, everywhere that it's scaled, everywhere that it's, you know, being used. And this is exactly the same way that you would code this as a design component, either in an iOS app or a web app, anything like that. And one last thing. If you wanted to remember, if, if you're, if you remember looking back at my original document that I had here, you can see that I've got another version that's got this desktop view and I've got these rounded corners. Well, all I've done on that is use this exact same component for the line item, but I've created a new symbol for the background. So like in our other file, our background is called module, background, border, top and bottom. So if I took this entire group and I grabbed like a large desktop view and then I pasted this thing in, maybe I make this 320 or 375 pixels wide. Now I could grab this background and hit command option K to ungroup the symbol, kind of detach from a symbol. That's actually a shortcut that I set up. You could also right click and hit detach from symbol right there. Detach from symbol. And I can get in here and I can just select the back, take the shadows off and add a border to the outside. Remember, because we want our components to be able to cover it up safely and round the corners on this thing. So I've rounded the corners on the background and that's pretty much what I want. I, I'm going to move, I move this component out of the way so I can see and I want to go ahead and create that as a symbol. But you'll notice that now these, these components are covering up the rounded corner. And I don't want that to happen. So instead of changing all of the components again, because this is just one thing that we're using over and over, I can grab the background here and I can just change the fill from 100% white to 0% white. And also, don't forget, we have a line item divider here with the, with that border, bottom want to go into that one and change the white from 100 to 0 as well. And so now this is still here, the corner, the sharp corner is still there. But this is now kind of a background less symbol. And because we're planning on using these components with a kind of symbol, background anyway, it's not going to matter. And so now, because that background is transparent, we can see the rounded edges through it. Well, that is going to wrap it up for reusable and scalable components in Sketch. If you want to download these files, I'm going to put a link below. You can hop on my MDS VIP list and you can get access to all of these files. Download them for free and you'll get access to lots of other goodies as well. That's it. Thank you for watching and I will see you next time.