Creating Complex Symbols in Sketch: Tips & Tricks

1. Introduction: Hi, I'm Karen, and I'm a product designer at Panorama Education. I've been a professional designer for well over 10 years now, and I've designed a variety of digital experiences, including mobile APS, websites and Web applications. I've also taught other skill share classes on you ex in the past, using Photoshopped as my tool of choice. But since then, I fully converted over to using sketch, and I've loved learning how to use symbols to really optimize my design process. In this class, I'm gonna show you how you can create really powerful symbols to design mawr efficiently and consistently. I'm gonna walk you through building different components. Using complex symbols will make a variety of buttons, a navigation bar and a versatile motile component. I'll also share lots of tips and tricks that I've learned along the way for your class project. I'd like you to create a set of complex symbols. You can either follow along with me and recreate those examples or try your own. Let's get started 2. Getting Started with Button Symbols: In this first lesson, I'm gonna walk you through how to create a simple button symbol and then will also create a couple other variations for more complex buttons using nested symbols. Let's jump right in by starting with a with creating our very first button symbol. So first thing I'm gonna do is go up to insert sheep and I'm gonna use a rounded rectangle for my button so I can go ahead and draw out any size that I want. I'm just gonna do you 1 30 by 36 tall, and then you can style it in any way that you want as well religious simply by getting rid of the border and choosing Phil, uh, then I want to. You add a text layer for the button label was called that label. Stick it in the middle. Now all I need to do is select the layers of that. I want to create the symbol with, and I can do that by dragging. Or it can just select them over here in the layers panel and then click create symbol. Let's call this one button like so that's super easy to just create. Ah, very simple symbol. And what I can do now is I am able to change this label to say whatever I want. So if this is maybe sign up whatever we want the button to be, um then I can duplicate the button and have it say anything else. So maybe I want this, Um I don't just say create count. I also have the ability to drag that, but in to be is large or small is I want it. Let's say I want a similar putting do something like that. So, uh, this is really beneficial as we talked about earlier, because in your app or website, a lot of times you have standardized buttons that you want to be able to use. And this is so easy to just go and grab, and you don't have to recreate this symbol Are that that button over and over and worry about Oh, do I have the right thought size? Do I have the right but in color or shape or size er, corner radius. But after, so, uh, to take this up to the next level, What we're also able to do is make this button work a little bit harder for us. So let's say we have this standard but style with its the same shape in the same textile. But we want to change the color of the background because we have maybe two or three colors of buttons that we're using in our design system. So what we're able to do is actually use symbols to change the background color of this button. So let's jump in how we can get started with that. All right, So if I double click on my button, I'm going to jump. This goes to the symbols page, and this is the pure button symbol itself. So if I go back so this has returned two instance, these air just instances of that symbol itself and all right, so I'm gonna go in here. So what I want to do now is I'm gonna create little color swatches of a couple colors that I want to use for buttons, and then we're gonna create those into symbols so we could do this really easily. We just go up to shape rectangle, and I'm gonna draw it. Doesn't really matter how large the square is. It could be a small It can literally be one or two pixels if you want it to be, but for our purposes will make it a little bit bigger. Um, and I'm gonna use the background color. I just did, and I'm gonna duplicate that and pick a couple other colors for us. All right, So let's say we have these three colors in our system. Now, what I want to do is create these into symbols. So even though I drew this on the symbols page, these aren't actually symbols. They're just a shape layer, and you can see the difference this. But in has this little icon right here that is pink. That means this is a simple little stuff that label on these air. Just the rectangle shapes themselves. So just like we did with a button, I'm going Teoh, click on one of the color squares and click create symbol. So now one thing that, um that's really helpful when you're creating symbols that are related or they're the same size or you're gonna be using them in the same way. What we can do for the naming convention is actually created prefix. So here, let's just call this color and then if we use the backslash and this is blue. Um, adding this backslash in is actually going to It's going to group these symbols together that are all named like this so that they're really easy for you to find and to once we get to simple overrides, it's gonna be really easy for you to swap. So I'll say, OK, you Now, this is my instance of my This is my actual symbol over here. This is just the instance of it. I'm gonna do the same thing with the other two colors, So color backslash teal and fuller slash Ajanta. Alright, so I've got my three colors just so you can see things a little bit better. We'll just line them up All right again. These are the instances. So let's pretend those aren't there. Zoom in a bit. All right, so now what we want to dio is in this within this button symbol, we want to add an instance of one of these colors. So I'm gonna go. You can either go to insert and pick symbols used to do you have, But they recently added this into the interface for sketch. So now you can see, I have this color section right here, because that's what we use is our little prefix. And I've got my three Cymbals together. If we didn't do this and we just need them Blue, Magenta, teal, they would show up in this first this first list, which once you have a lot of symbols that starts getting really messy. So I really like to do this right from the start. All right, So I'm gonna pick, Let's pick Teal, and I'm gonna place that symbol instance right inside of this symbol, and then I'm gonna drag it so that it fills and I just want to rearrange the layers so that my label obviously so we can see it. All right, so now if you remember, we use a rounded rectangle shape on here so you can see that over here. Hopefully, um And by placing this, we lose that. So what we want to dio is actually create a mask. So we've got our symbol and got our button background. What I'm gonna do is select those right click and choose mask, and so that's just gonna preserve that nice rounded corner that we have in our button All right, So now, for some reason, when you do a mask, it groups it into a little folder. So you can you can take this out if you want to, or you can just leave it. Um, leave it in here and I might just say puller background just to keep my layers panel nice and meet. Um, all right, so now we have this year, let's go back to the instance of our button. You can also see because we change the simple itself that it changed that teal color. But now what happens when we click on an instance? We've got this new option in our overrides panel that shows color. And if I click here, we also see that I have the three colors that we just created, a symbols to choose from. And so easy is that we're able to swap that out. Dio any color that I want and against he is it's on Lee, including what this does is it includes symbols of the same size or dimensions because those are likely what you're going to be swapping out. So keep that in mind and we'll cover that again a little bit later. in this class. All right, so one thing to know about our, um our overrides panel here is that this is called colors. Last deal. So is this. But this one, we're actually using blue. So what we want to do is make this over its panel a little bit easier to read. So if I go back into the symbol, all it's doing is pulling the name of the symbol over here so you can name this anything that you want. So I'm going to just call this color for now and then if I go back here now, it's just going to say color firing, so that just makes things a little bit easier. But that's it. And then you can now use this button again. You can just in certain, but in you can say what I want to call this. It is a sign out. You can resize it in any way, and I'll say this one's magenta uh, so really, really easy and in a great way to reuse buttons really simply with a color mask 3. Button Nested Symbols & Overrides: All right. So the next thing that we want to cover is we want actually up the complexity of our buttons symbol a little bit again by adding an icon, and this is gonna create what's called a nested symbol. So the first thing you want to do is pull in my graphics that I want to use for my icon symbols. And I'm gonna go insert image and then just select my three icons on my desktop. And then here we go, Spread mouth. You can also just drag any image PNG, Ajay Pagan spg right into your sketch, our board if you want to do that as well. So then, just like we did with our color symbols with the whole swatches, we want to just go ahead and create each one of these icons into a symbol. Gonna go up here and then also just like we did with our colors, were going to create a prefix and then use the back slash to be able to group these different icons together. So call that one. Download Paul, this one delete and we'll call this one favorites. All right. And then if I go here, I can see all of my icons nicely group together. So now we want to do is double click into one of our symbols and going to jump us to the simplest page. And then I'm just gonna drag these a little bit closer together so that it's just easier for us to see everything. You can rearrange this page in any way that you like. It really does not matter. Sketches kind of arbitrarily plops things into the symbols page. All right, so now we have our three icons, Um, and we actually want to use them in white instead of black. So the first thing I want to do is just just change the fill color to be white. So just go ahead and do that, and you'll notice that now I can't see my icons, which is slightly annoying. So ah, one way that we can just make this easier to see is selected the three art boards and we want to add a background color. So just pick a gray just so you can see them and then just make sure that you don't have included export checked and including instances, because if you have those checked, it's going to include the gray, and we don't want that. We just want to make it easier for us to see those white symbols. Okay, next, what we want to do is we're gonna create another button symbol s O that we have one with just the label, and then we have one with the icon and the label. So because I've already have this all set up, I'm just gonna duplicate this button. And because now I have two that are named the same thing. We don't want that. So let's go quick on this art board and I can easily rename our ports at any time. So it's another thing to know that if you if you think you messed up because you name something wrong or if you called, um, one of these icons instead of icon, you can just easily change any of those. So that's really nice. Now what I want to do is double click in the layer panel, and I'm gonna use button as a prefix, and I'm gonna call this one just icon. And then if I go appear CIA, have button and button icon. Let's just add, um, a name primary for that other button just so that I get those to group together. That's some good sketch hygiene. Right there. Um, all right, now we've got our label. We've got our icons created. So let's go and insert Icahn into our symbol, and you can place that anyway, anywhere you want. All right. Um, the other thing that we want to do is just for the simple itself. I want to kind of maintain about the seam patting on the left and the right to make that a little bit cleaner. So I'm gonna drag this over eso about there, do the same thing my background, just that good. Okay, so now we have, um, label and our button. So the other thing that we did with our color symbol is if you see over here, um, we changed the name of the symbol to help with the overrides. And I want to do the same thing for the icon because we're not always going to be using this, um, this name. So I'm just gonna call that icon. So now that allow me if I go over here, I'm just gonna delete these because we don't need them. If I insert an instance of my icon symbol that I can see over here. I have icon. I have label on a color, and that's just really nicely organized here. Another thing to know is you can decide how you want these things to show up in the overrides panel, by the way, that they're organized in the symbols layers. So right now we have the icon first and then the label, which kind of makes sense because that's the way that they're, you know, if you're reading it left to right. But if we decide that we want the label to appear first I go back. Now I have button label than the icon, then the background polar. Well, it just something to know that I can help. We get a little bit easier to parse. All right, um, one other thing that I want to cover with the over rise is if I click on this art board again, I have these options over here to manage my overrides. And actually, I can decide if I want to allow overrides or not, which is actually kind of cool. This is a newer thing That sketch pretty recently did So if I want Teoh allow Override, I can then decide if I want to have the text three icon in the color or if I want to say, Oh, you've been changed these things, but not this And that's just gonna update here. Soon out, that color background is gone. So just like one other extra piece, um, that can help you really manipulate these symbols in any way that that makes sense to you. All right, back to our inspector icon. I can't button. Let's jump back to the instance. And now let's say we want to change this label to be add to your favorites. And then let's stretch this hour and you'll see that some bone stuff is happening here. Eso first. Our graphic is getting really stretched, which we definitely don't want. And then we're just getting like, weird spacing happening when we stretch this button. So we're gonna fix this by using symbol, re sizing and constraints. So let's let's show you how to do that. Um, the first thing I wanted to tell you is it's actually, so if I jump into my symbols page and we're gonna be talking about this re sizing section here, but what's not really helpful is having to try something here and then jumped back and see what it did. I find it really, really helpful toe, actually. Take this instance or any instance, I'm just gonna copy this. Go to my symbols page, and then I'm just gonna paste not inside of the symbol symbol inception, but just paste it here. And then any time I change something on this, uh, the symbol itself, the instances gonna update. And I can see how my changes are, Uh, how their propagating so that I think that's really helpful art. So and I'm also let me just change the color of this. Just that's a little bit easier to follow along with. This is a symbol. This is the instance. So the first thing I want to do is address this stretchy graphic thing that's happening here. So if I click on my icon now, Rachel, order re sizing what I want to do is have it fixed size. So you saw that jump right there. There we go, my own. Check it. It stretches if I check it. Um, what that is essentially doing is maintaining the height in the with of the icons so that you don't get that weird stretching. That way, if I decide to make my button taller, for some reason, it's also not searching. All right, so that's part one. Um, it's still doing some weird spacing when I move my button around. And so what I want this button to Dio is actually maintain the amount of padding here between the edge of the button and the edge of the icon. So what I can do is use this pinning over here, and I want to say, I'd like this thing to stay on the left where I had it. And so again, you can see that jumped over there, Um and yes. Then I also want to maintain the space between the icon and the label. So if I click on this, I can also say Pinned Edge. Now you'll notice that jumped a little bit, but it's still giving me flexible space in between the icon in the label when I'm when I stretch this. And so if I go back to this, um, text label, what's happening is it's currently on a central alignment, and they're all I need to do is change this Still being left aligned. Answer. Now, there we go. Now that's staying exactly where I want it. And I can have this. I can say how you know how big. I want the button to be in that way. All right, to see this in action one more time. Let's just do plate this instance and let's use, um, the download icon. Let's call this but in download and change it to Blue And there we go. So now I can have a lot more freedom about com How large I want my my button to be and maintain that nice grouping of the icon on and the text itself. Awesome. So I call this stress testing the symbol because what you're essentially doing is saying, Okay, how can I break this symbol? Um, how can I if I'm moving? If I'm deciding that I want my button to be taller for some reason, is it staying centered? Like the way that I wanted Teoh or a lot of times we're not actually changing buttons in that way, so you'll see this come up with other types of symbols that you might be stretching or altering vertically or horizontally. Great. So that just covered a couple different things. So we learned how to Kurds. Simple button. We learned how to change the background color of a button symbol, and we won't have at an icon so that you have a lot of flexibility with your buttons themselves. 4. Tips for Overrides vs. Multiple Symbols: The last thing I want to cover about our buttons symbols is helping you decide when it makes sense to use one symbol and take advantage of all the overrides. So you get ah, lot out of one simple versus when does it actually make sense to create unique symbols and have more than one for something sort of like we did with this button here, where we have our primary but in and we also have our button with the icon. So these air separate symbols we did that as part of the class to show you that you know how you can kind of build upon. But there are ways that I could have used the button with Icahn, um, and then just opted to maybe turn on and off the icon for certain buttons. So let me talk about that a little bit more. The reason why I chose toe have visas separate symbols is it's a lot easier to see one. What types of buttons do you have in your system and to it's actually overrides can get kind of tricky once it starts getting, um, but there's more things that you can manipulate. There's a lot more to remember. If someone is not familiar on your design team or someone else that might be using your file isn't as familiar with overrides or knows which options to choose if I can be, You know, not You're not getting as much bang for your buck by it. And it doesn't really, um it doesn't really hurt anything by having more than one symbol. Ah, in terms of buttons, the other thing I can actually show you quickly is there's times where it doesn't. It also doesn't make sense. Teoh. Use one symbol when we're we're having to change too much to make it work. So let me walk through one thing. Let's say that we in our design system, we have, ah, white button with, maybe like a great up line. So what I want to do to demonstrate this is I'm gonna make on a duplicate this color square . I'm gonna call this color White, and I'm just gonna change that toe white. So then, if I'm using a little scrap, this one, for instance of it, um, if I choose is for White. Obviously, I'm not gonna be able to read my label because that is white. So I avoid on white. Um, I can do this color masking trick. Or it could be like with text, or it can also use textile. So there's ways to get around it. But, you know, if I have a white but it's gonna be on a white background, I probably want to use some kind of border or shadow or something around that button so that you could actually see the button. Um, and that's just going to get really tricky if I'm trying to do all of that within this one button. So let's switch this back to Magenta. And in this case, what I want to do is I'm gonna duplicate this button again, and I'm gonna call this one button secondary. And then what I'm gonna dio is, um I could leave this and just changed the instance of here in tow. White, if I want Teoh, I can also choose not to use the color symbol and actually just use this original background, which is just a shape wait s so I can do either one of these. I'll just leave this with the symbol on for now and then I can take my label, and they probably wanted to be some kind of dark gray. And now, let's also add, um, actually, you know what? Because I want to add a border. I'm just gonna kill this, uh, this mask altogether unmasked that and found. So now I'm gonna add this border onto here, Um, something a little bit later. All right, so now I've got this different style, and if I go back out here, you just Look, we've got a regular button, got a button with icon, and now secondary here. And maybe this is something like log out. Um, so the neighbor a different style. So in my system, I might have something that is, um, color button a button with an icon and then a white button. You could also get a little bit tricky or two. You could have a white button with an icon. There's a lot of things that you can play around with. But why I find this really helpful again toe have different symbols is because this is gonna also allow me, Teoh, just make it really clear that these air the button types that I have within my design system you could also make the case for um not allowing the background to be changed in, like the simple button if you want to really hone in on saying like whenever you use this primary. But in its always blue, whenever you use an icon. But in its always teal um, something like that. And then there's kind of no discrepancies. Someone can't interpret that in any other way. Hopefully, that helps you out in terms of why create a simple when you should create multiple and covering the different ways of manipulating this button using overrides. 5. Creating a Complex Navigation Bar Symbol: in this next lesson, I'm gonna show you how to create a navigation bar component using multiple nest and symbols . So we're gonna take what we what we learned from the button examples and apply some of those techniques into this navigation bar, but do so in a way, we're actually combining a lot more Cymbals together. So in this example, we're gonna actually recreate the navigation bar from Skill Shire's website. So I've got a screenshot of it right here, and then I'm gonna jump to the symbols page. So what I've done to kind of prepare is I just threw together symbols for the various parts of the navigation bar. So these are pretty simple. There's a couple icons avatar, search bar. The logo is just a bit map or an image, a button and then our navigation link. And so we're gonna talk more about this one in the second because this is the only piece that I didn't quite finish for assembling this navigation bar. So let's jump back quickly. Two are now bar here and let's zoom in a little bit. All right, so we have two different styles. On are two different variations of the navigation links here. So we have something like home. We're just a text link and then browse has this little arrow icon here. So what I'm gonna dio is use one symbol and show you how you can use that symbol for both navigation links within. Without the arrow, you could choose to do two separate symbols. But for this case, since it's it's pretty easy just to be, we can essentially turn this symbol on and off that that's it's just a better option. So let's jump back and let's zoom into this knave. Label seekers can see that better. All right, the first thing I'm gonna do is jag my art board and make that a bit bigger so we can fit. Um, one thing I want to call out is if for some reason this adjust content on resize is checked before you draw before you alter an art board or stretch it, you probably want to uncheck that cause it does kind of funky stuff. Um, I always just uncheck it because I don't want things moving around. I want to decide where I'm placing them, so as long as it's unchecked, that's good to go. All right, We're gonna go into symbols and we're going. Teoh, grab the arrow. Have that in there. And that's it. So now are never label includes euro. And if I click on this, you can see I've got that symbol right here. All right. The next thing that I want to dio is we are going Teoh, Um, let's quickly stress test this symbol. So let's insert on instance of this navigation link. Okay, here. And oh, I've created just a background layer in here right now. It's gray. I can't really see that very well. So let's make that white, and then we can see what's happening. You can kind of just see the border of the of the symbol. So now one of our navigation items was brows. So we'll do that. We'll show how that works, and our little arrow just moves over with it. So that's great. But what happens when I stretch it? All right, so this is the stress testing again. Some seeing my brows. Text is moving and my arrow is stretching, and we don't want either of those things to happen. So what we want to do with our our text label is we want to pin that to the edge. And with our, uh, arrow, I come, we want to just go ahead and fix that size. Let's see. Great. And so that fixed it nicely. And then you can kind of just pick help. How? Why do you want that simple to be based on the text and we don't need to have that white box turned on. We can turn that off later. That's not a big deal. Um, but for now, let's just go ahead and leave that. All right, so let's zoom back out a little bit. So the next saying that we want to do is draw our container symbol for our navigation bar. So this is essentially just the background in the bar itself. So I'm going to insert a shape rectangle, and I'm gonna draw shape here, remove the border, make this white aimed. 01 thing I didn't mention, um, something I find really helpful. So this is just a screenshot are a bit map limit. Copy this. So set that back to 100 um, paste it in here, and then I can see what size I actually need to make this. So this is 59 tall. Let's just go ahead and make this 60 to have an even number. And this is 11 72. So we'll make that 11 72. And then we've got this little shadow at the very bottom. So let's just add that I said just a couple things here. It's a little taller. There we go. OK? Blewitt letter Still just set that outfit to 10. It doesn't really matter. Um, all right, so now we've got the shape that is matching our navigation color and style. Now, let's go ahead and create a symbol out of this, and we can just call it that far, all right? Now it is the amount for a second. And here is my actual nap. Our symbol. This is just an instance of it. So I'm gonna get rid of that. I'm gonna move that screenshot and back in. All right, Now let's start compiling or assembling this naff bar. So what? We're gonna dio again? We're on the symbols page. These are the actual symbols themselves. So we don't want to use thes. We want to use instances of them. So, like this guy best is an instance of that. So we can use that. Um, let's start with the logo. We'll kind of just go left from right. So put that there. We can kind of finesse and go back to decide where things should play out or layout. We can do that in a second. I'm also just gonna lock this rectangle layer, because whenever I mouse over this, it turns blue. And sometimes that bugs me and I just lock it, and then it doesn't do that. All right, Now, here's one of my instances of the knave link, so I'm just gonna pull that in, and then I'm just going to duplicate this will go back and change those things afterwards. Um And then over here, I have two more instances. Yes. You know, there was another one there, just like I don't duplicated it twice. Arias. There's two more, Then I want to insert my search bar suddenly grab that right here. And lastly, there were I grabbed it. My notifications icon, my avatar and my button. All right, so those are all of the pieces can see there. Um, obviously, we need to go back and just tweak some of these things. So now what we want to do is this is home. So I changed the label toe, home, browse and workshops. All right. Now, I just want to stretch that out. So now you can see home and workshops. We don't want to use the arrow. So what I can do is in the overrides panel, there's the option to click, and usually this shows me different symbols that I can switch between and will show symbols again of the same dimensions. But this is the only one of this size, so only has the one. But we also have this option of selecting none, and all it does is turn it off. So that's great. That's exactly what we need. Now I can start this and make it a little bit smaller. I'll move, browse over workshops over, and I'm gonna do the same thing for workshops on a select None. Just drag that, but smaller. Perfect. Now I think countable line. Um, I can line things up like this and just use, um, use these guides or I can just put things Oh, this I can also take this image and put it into the symbol and then just line things up. But I think this will work fine for us. Quickly. Then we'll go to browse. What's that over in home? Mm. Skill share low girls. That was pretty close. All right, there's that. Now let's jump over here. Our brain is pretty much in the same place. Um, we're Avatar. Over. Okay, so this is classes is gonna change that. We're going to get rid of the arrow. You make that smaller. It's my classes. Spooks. Now we're gonna line up over here and teach fact, all right, in The last thing that we want to dio is this search bar is actually a little bit wider, so we can go ahead and do that. And as I stretch that, you'll see I haven't set the constraints yet. Um, so let me go up to my original symbol. I'm going to click on the icon on the safe pick size, and I'm gonna make this pin to the left. There we go. So now when I if I resize that symbol who got up in that? Here we go, is why we stress test it. And you're gonna been that to the left as well. Okay, perfect. So it doesn't really matter how large we make that. All right, So that is that we have our nab are assembled. Oh, the one thing we've got to change. Go premium. All right, now we're all set. Um, all right. So in the next lesson, we're gonna walk through re sizing this whole in out far together. 6. Nav Bar Symbol Resizing, Constraints & Organization: all right, We just put together our navigation bar with all of our symbols and all of our pieces. This is our screenshot where we were just referencing. So I'm we're all set with this. I'm actually just gonna go ahead and delete that. Now, what we want to do is make sure that this navigation bar is able to scale properly. What I'm gonna do is I'm gonna go ahead and in certain instance of this naff bar into my file e. And now, just like everything else, I'm gonna go ahead and stretch, and yet few constraints have any new defects. All right, let's dive in and see what we need to tackle. Okay? So right off the bat, our logo is getting squished. So we're gonna go up here, we're gonna say, fix size. And we also want to pin that to the left, because everything basically, how this now bar works so awful thing again is everything on the left is wants to stick to the left. Everything on the right wants to essentially stay right, aligned. And then the space in the middle just changes as you go. All right, so we're gonna pin that there. Four on navigation links were also gonna pin all of these, so they should pop back into the right place. That's perfect. So we're sort of getting the hang of this. It's out of doing the same thing over and over. Um, once you understand how your symbol needs to work, we're gonna dio pinning with the search bar and on the other side. Let's go ahead and make sure that this avatar stays fixed that the icons days fixed. And now these two are cons. Instead of pinning to the left, we want to pin these to the right. Here we go. Um, I'm gonna get back to that in a second. Let's also make sure that these are pinned to the right. Great. And OK, so a couple of things are still happening on this side. So we've pinned things to the right, so they're staying, but they're still not exactly acting in the way that we want them to. So things that these guys air spacing out a little bit more than we wanted. And our button is changing size when we actually don't want that to happen. So what we're gonna dio is we'll start on the right side and click on my button and what I want to do because we have already named this, but in exactly what we want and this name isn't gonna change, I'm gonna go ahead and fix the size horizontally. And did you see how that just popped? Yeah, So that's what I want. I also want to pin this to the right edge. And so now that should maintain that button should stay in the same place and stay the same with because we don't want that to variable. And now, my, my avatar and my notification icon, they are also staying. So there they're doing exactly what I wanted to do. The other thing is, let's see, let me go into this original symbol for a second, and then I'm gonna change this color to be sort of a darker gray so you can see what's happening when we stretch this. All right now, you can also see that these knave links are also stretching when we don't want that too. And again, just like we did with the button. Because we've already renamed Thies to what we want to use and we're not going to be changing these anywhere. We actually want to fix the with of these as well. So I'm gonna do that here, and I'm going to do that here and that jumped back. So now those are also in the same spot, staying same. And I want to jump over here and do the same for these other links for me. Cool. Come to those air. Just close together. Um, let's turn this gray layer off. We're just I'll just hide it. There we go. So, again, as I'm stretching, nothing is changed. Uh, these guys are gonna staying the same the time when we wouldn't want to use the fixed with for symbols like this. We wouldn't actually want to use it if we were changing the names of these labels on the fly. So if I was going to change these, um, in my design and not have it be part of this bigger symbol, then I'm gonna want Teoh. Make sure that I don't fix the size because you could see here home is shorter than workshops. We want that simple to be able to flex when we need it to accommodate for what? We're showing. All right, The last thing that we you probably noticed is my search bar is changing size, so that's getting wider and shorter, and that's OK here. That's actually a common pattern on many websites where the search bar will just get wider and kind of accommodate to the screen with. So I think that's totally fine. We can do that. And then at some point, if this got smaller, what we'd want it to do is to not actually let this overlap. Um, but we could size that here if we wanted Teoh. If you did want to fix the with of this or pick a specific with, let's say we actually just wanted it to be, um, you know, be is why does it needed to be We could fix the with and then not would stay. But I think in this case it's totally fine toe. Have this be a little bit wider, and we don't have to fix the size, and then that can stretch so totally up to you. All right, let's also cover some organization in this file. All right, when I click on this instance of the navigation bar, let's look in my ovaries panel this is kind of crazy. There's a lot going on in here, and it's a little bit unwieldy to parse. So let's talk about how we can work to clean this whole thing up. That's this organization starts with the symbol itself. So if I click on this nap bar getting Lizzie back in, this is showing all of the layers in the symbols that I have inside of this main symbol me , not our symbol on. And these are ordered the way that I just created them. But I can see that if I click on the instance of the symbol thes, they're gonna be in the same order as they're listed in my layers panel. So because Button is showing first over here, it's because it's the first thing in this layer. So what I want to do is to clean this up a little bit. I essentially want Teoh, see if there's anything I want to rename and re arrange in the symbol. I always find it easiest to organize my layers by left to right. So here my sculpture lugar would be first. So let's just rearrange some of these pieces by just clicking and dragging um, also Now I have all my my knave links, which in the symbols panel there named Knave Link. So let me just move this one up so we can see it. Um, and I'm gonna click on the instance, so let's go over here. Um, now I can see it says Knave Ling here and innocents novel in here. But what it's not doing is not super helpful, because I'm not sure which the link this is. So there's a couple of things that I could dio But what my main preferences is to click on this and again because we've already set up and customized these symbols within this navigation bar. And we're not going to be changing the name of these symbols. Uh, with each instance like these are going to stay what they are. I'm gonna actually rename this knave link here to home and then let me grab carouse, and I'm just gonna put these in order workshops. Okay, so let's start with those three. Now, when I click on the instance, go over here. I see home browse workshops. So that's in the order. It also shows me, um, which navigation link I'm talking about. You can also see them by hovering over. It highlights them. But I feel like it's a lot easier to know. Oh, I'm talking about home right here, and I'm gonna show you something that is, Ah, a little bit later, when we're looking at different states of the navigation that this is gonna be way better for us to do that. All right, let's actually jump back to this logo for a second. So if I look in this over its panel I see logo, it lets me have the option for an override. Do I need an override for the logo? It's very likely that I don't I don't think in this case, I don't think that is gonna change at all. It's just gonna kind of be there and be static so I could have the option to just get rid of this logo altogether in terms of the override. So do you remember when we clicked on when you click on the symbol Art board, you have managed overrides and you have the option to allow overrides all together. But what I can do is individually go in here and say logo. Uncheck it. It looks like the bit map. I have to also uncheck because this guy is made up. I open this up. It means made up of just a bit. Map. Go back here. Uncheck that as well. And now if I go again back to my instance, that logo was just gone from the overrides panel. And so I think that helps with being able to clean it up as a new thing. That sketch is done fairly recently, and I think that's a great improvement. All right, if I didn't want Teoh hide something altogether, Um, there's another thing that I want to talk about here with, Um, so there's arrow label, so browse has the arrow turned on and showing the bit map here. So when you have icons that are bit maps, which are essentially just a J pay Gershom sound sort of image file, you can choose to swap out this image with anything else. And sometimes that's helpful. Way actually probably would do that with our avatar, but here, this icons not gonna change. So let's leave that alone and I go here, actually, let me again. You have to click on the symbol Art world together now, so I skipped my logo. Um, I have home. I have browse, and here's the bit maps. You kind of just have to look down the list of things. So I have the browse symbol. Have the arrow inside of it, which I do want to keep the arrow symbol on, because that's how I turn it on and off. But the bit map itself. I don't need to be able to change that so I can uncheck that here and now. Let's go back and under browse. They don't have that, um, that arrow bit map showing up anymore. So that's good. That's helping us out. All right, Workshops looks good. And then let's continue rearranging in the order. So next would be our search bar. Let's go back here. Here's our search for that's already named for us. So that's good. But let's look in here so I can see, um, icon Search, which I can also rename. If I'd like to to do to actually to rename thes things, I'm gonna need to go back to my original symbol, so I don't really need to worry about that right now. It's not a huge deal But I also have the bit map here for that search magnifying glass icon . And again, I'm not gonna be swapping that out. So let's click on the Nash Bar Art Board, Scroll down search bar. There's that bit map. Uncheck that great. And then let's go over here. So now I want to continue along with my next nap link. So after Search Bar, I have teach and then I have my classes. And next up I have my notifications icon. I have my avatar and finally, my button so I can rename any of these layers if I think it's helpful, Um, I might want to just keep Button named his, but I could also name a go premium, but if I want to. But I think keeping it simple here is totally fine for Icahn slash notifications. Maybe we could just simplify this by saying notifications. Um, so there's that. And while we're on this, let's go back to our rights. We see we have the bit map here again. So let's go over here and turn off again those bit maps that we don't need. So we have the arrow again and teach get rid of that classes and navigations. Here's that other bit map and I also have one for my avatar. So let's have a that one for a second. I'm gonna click back here so I can see quickly. This is still a lot of things to look through, and it's still a little bit messy, but it's a huge improvement from what we had before. Um, so I've got home. Browse workshops, search bar, teach my glasses. Notifications, Avatar. Now, for this avatar, I have the option to choose image. What I could dio is there might be a time where I actually want to swap out this image depending on where I'm using this navigation bar. So this is essentially showing the user that's logged in. In this case, it's me. If I was doing a mock up for a different user and it was important to swap out this graphic , I could just choose any image from my computer and use that to swap out, and it's gonna mask it in the same way. So it'll just swap out that image, and you can do that as often as you want. You can do that with every instance of the symbol if you'd like. Um, so we can We can choose to leave that you can. Also, If you think you want Teoh, you might want toe leave it or not. Leave it. You can always change your mind afterwards and uncheck those things because it's a simple toggle on and off. All right, then we've got our button. So this is looking a lot better than it did. One other thing that I find helpful is there's other things that you can, uh that you can do to differentiate of the names of the symbols. So you could also we could click on home, for example, and we could do something like, um, just kind of putting something in front of it. Like if I did little dashes, I'll just show you how this might look. Um, click back on here, and that sometimes helps with, like, finding what are the 1,000,000 symbols versus, like, what are the things inside of those? Another thing that's that is pretty nice to do is using an emoji. So if there was something that represented a navigation and you wanted to just use an emoji here, that could be really helpful, just to, like, drier. I quickly toe. Oh, here's where I need to go toe to swap out those overrides. All right, I'm gonna remove these for now, but just a little A little tip for you. So we've got are now far all set up. All put together. We've got our overrides panel nicely organized as best as we can, um, are layers are nicely organized over here in turn. And now I can use this wherever I like, and we fixed it so I can scale properly. Um, if I'm using this Nath bar on different screen sizes or different size, our boards super easy. Now, just to say OK, this guy needs to be a little bit wider. It needs to be a little bit shorter. It might be using it to show on like an iPad mock up or something. I'm so I can do all of that. And just a note as well. Sometimes when you're going from desktop to mobile, especially on the tablet. Um, sometimes you have different options available in terms of the navigation, you don't see every single thing. So if there was something that you didn't want to show, like, let's say we didn't show the butt in. Oops, let's say we didn't show the but in in the mobile experience or for some reason, we can just go up here and we can turn that button off. So we've still got all of this these ways to manipulate this symbol. All right, There's one more thing I want to show you about this navigation bar, so let's jump into that in the next video. 7. More Tips for Symbol Overrides: Let's talk about one more thing that we can do with our navigation bar symbols so often time when you have a website, we want to show which page that the user is currently on. So that's something we could call either a selected state or an active state. And right now we only have sort of this one state of kind of the default. So let's add a an active state so that we can toggle between so that if I'm designing, let's say the workshop page in my file I can switch that symbol to show that that is theme navigation page that among All right, we're going to start by duplicating this now label. And now again, the first thing I want to dio eyes make sure that I rename the symbols. So there they have a unique name since a novel ing active and I'm gonna change this one's that. It also has that tree structure Teoh de vault. All right now, I can do anything I want in terms of how do I want visually represent the active state? Um, so let's start with just changing the front color to be a little bit darker But that's not That's not too much of a difference, especially if we're not like changing the color. But let's say I want to add maybe a little kind of underlying here. That's a pattern that we've seen a lot of times. So if I want to have a little color bar down here, I'm gonna need to make this symbol taller. Now. I don't really want to do it from here. That's just gonna stretch things out. Let's make the base symbol itself a little bit taller. That's just gonna make things easier on us. Um, all right, The everything that I want to do is let's take workshops, for example, and let's change the symbol that we're using. We're using the default right now, as you can see here, and let's change it to the active state. So as I'm building the symbol, I can see what's happening. I also let me also just call out. I want to do this from not from the navigation bar symbol, but actually from the instance of it. All right, so we're amusing workshops that's going on here. It's amazing. T fall. Let's change that toe active Now What happened here I have this knave label essentially reverted back. So if I go back to default, these are the overrides that I've already done. But because I'm using a different symbol for this active, I'm gonna have to sort of redo what I've already done. So I can go here and change this Teoh workshops, and I'm gonna need to get rid of my arrow. All right, so there is that. So it's kind of one thing that's a little bit annoying, but it's pretty quickly. You can do that pretty quick. All right, so here we go. Now, I'm using this. And if I change the color on this, I can see that that's gonna update there. But not in the original symbol. We'll switch back. Okay, so now when you click on this, I mean, I want to stretch this art board so that it actually touches the bottom. I could test out over here. How tall do we need this thing to be? Maybe 42 pixels. It looks like Undo that. So if I stretched this and have this coded 42 now, I don't want this to happen. So remember how we talked about adjusting content on resize on checking this. This is one of the reasons why so let's undo that. I'm gonna uncheck adjust content. And now I'm gonna just struck this to be 42 pixels. Tell all right now this guy moved up. So let's say we want this. All right? So we wanted to actually go and pin that to the edge. So again, you could be stress testing symbols all the time at any point. So always kind of make sure that your that you are checking those things as you go so you don't get unintended consequences. All right? Now all I want to do is draw a little shape in here. Do a little box. I'm gonna have this be blue. Yeah, Lotus a little shorter from this down. Okay, Now this is duck appear. And what I also want to call out is when I'm changing the size of this. Now, if I go back here two workshops, it still giving me the option to switch that back. Oh, but now see, I don't have the option to click on the active anymore. And that's because the overrides in your panel are only gonna choose symbols that are the same size. So we actually want to take this default symbol and may get the same height as the other one. Someone unclip, adjust content. I'm gonna drag that down. Let's just pin this to the top, just for that sake. I'm gonna also do this year, Hillary. And now if I click here, go back to workshops now, I also have that option for active. There we go. Okay, but doing something a little bit funky. So maybe either we want to move this up so we can play around with that. So it just depends where you want that bar. Do you want it sitting on top of that gray layer? Do you want above that gray layer? Let's have it about here, all right? Other thing is, it's going to be as wide as your symbol itself. So right here are we have you know, we're 88 pixels wide, So let's see what happens if I resize this symbol. If that's gonna stay. Yes. So that's staying fixed, because up here, we fix the size. If we didn't fix the size here and then if we're scaling that bar is gonna change size, which is what we don't want to have happen, so we'll make sure that that's fixed. Awesome. So that was really easy. Um, so now I have the option here to say I actually want to use the default. Maybe I want to change home and use the act of state here. Now again. We had already changed the names in the labels and everything, so I'm just gonna have to do that again and say, No arrow. And what's the last thing that's happening here? So this symbol off, for some reason, it was still wide. So let's just bring that in. OK, and there we go. Now let's do one more thing. Let's hop back to gonna copy this. So you want to create all over again with copy this instance? Hot back, Teoh, our main page. Now again, this is just the screenshot. So let's hide that. And let's paste are knave bar in here. So now you can kind of see it a little bit more in context. Obviously, that's not a full page. I'm but you can see this here. So let's toggle default. There we go. Maybe I want to click on my classes and change that to the act of state again. And once you re name these things and get rid of the symbols as you'd like, that's gonna stay. So now, if I take my classes and go back to the default And now again, if I go back to active, that's gonna just maintain because I've already changed the overrides there. So there we go. That is a pretty, um, flexible and customizable navigation bar. 8. Using a Base Symbol for a Complex Modal Component: in our final example, I want to show you how complex symbols can allow you to be flexible with your designs while still adhering to your design system and being able to maintain consistency. I'm also gonna explain when there are times when you shouldn't actually use symbols for certain components. So let's talk about this. This is a motile component also known as a pop up, and here I've got three examples of how a motel might be used within a design system. In this 1st 1 it's more of a confirmation, so it's just kind of texting some buttons to let the user choose. In the second example, I have a create account motile, where we have a form. And in the third example, we have more of an informational motile that might just pop up and allow the user to read some information and then dismiss. So at first glance, it doesn't really seem like there's a way to use one complex symbol to achieve each of these three designs. So then would you create separate symbols for each one of these? You don't actually have Teoh and I personally would not in this case, So let's walk through this and talk about why symbols work wonderfully for components that will be reused again and again, especially when you are aren't dealing with a lot of variety with those components. Now, Motile component is something that we would be using, probably again and again. But there is some variation within each of these models. Sometimes your designs do need that variety, but you're still adhering to a system so these models don't look like they're from completely different systems. There are some commonalities here, and that is the key. The key is to find water the commonalities between the variations and center on that. So let's look at these three models. Each one of them has a title and an ex to dismiss the dot the motile component. Some of them have buttons, some of them don't. Some of them have more of a body text, and this one doesn't. This one's a form. This one has an image, so there are similarities. But there's also differences. What I can do here is create one complex symbol as a base and then build upon it to create these different configurations. We want the container of the motile in certain elements within that to be standardized but allowing for flexibility to have any content to be included within that container. So in this example, where I have this image, I might have a completely different image. I might have a lot of text. I might want to include buttons on this sometimes and sometimes not with forms. There's a lot of variation that come with a form. It's not always going to be laid out in this way. And then with confirmation models, sometimes there are more options. Sometimes there's more text. There's still some flexibility and variation that comes with each of these styles. So let's jump into the base symbol that I've created. Jump to my symbols page. Now you can see here I've got a couple things going on. Um, I've already created some symbols for our buttons. I have some colors. I have some of these text fields and then I have our motile symbol itself. So what I have here is I pulled together those commonalities that we talked about. I have our title. I have a text box. I have our buttons and the X icon. So I want to walk you through how we can use this base symbol in a number of different ways to create all of these different variations. This 1st 1 is the most closely aligned to the base symbol itself. It essentially has all the pieces that we just walked through. And if I click on the motile symbol, look at the overrides panel. All I've done is basically swapped out the text in here added labels for our buttons, and that's it. It's a simple is that I have a lot of flexibility here with the amount of text, because the way that our Symbolist set up, we can scale it as tall as it needs to be. We can also scale it as why does it needs to be And those things, uh, just kind of fix themselves. So I've already set up those constraints and re sizing. I'm not going to go through that part right now because we've covered that in previous lessons. So if you need a refresher, just go back and watch the other videos of particularly the navigation bar in this next motile. I'm gonna open up this group so I have the base model here, and if I hide this other section. What have essentially done is I've used the same pieces as this 1st 1 but you'll notice there's no text here. I can actually see. There's it wants to show me there is something there. So let's talk about that and you overrides. Basically, I just don't have anything in the text field there, and a little hack to make this happen is you'll see I have a space. I'm gonna delete that space and then you'll see motile text box here. So that is aligning to what's in the base symbol. But to be able, if I don't want that text there, all I need to do is click in here and add a space click. The space bar hit return and it's gone, so that's a really nice way to allow for more flexibility there. I also have the buttons, so that's fine. And then I have in this form elements. I'm using those symbols that I showed you from the Symbols page for these for these text field forms, and I've grouped them together, so this is still a complex or nested symbol. But this entire thing is not a symbol in the third option here, let me open this up again. Let me hide this in this example I have text and I have a little bit more text but I have over here But here we don't have the buttons. And so if you remember how we are able to choose which button were using I can talk toggle between primary and secondary because I already have those symbols up. But here I'm saying none because I don't want any buttons in this one again. That gives us the flexibility. Then what I can dio is for the purposes of my mock up. If I need to include an image here, I can do anything that I want. If this image is taller again, I can click on this motile and I could stretch this out. Maybe this text is longer or shorter. Maybe this image is larger. I have all of the flexibility to do that as well. No, just because we're using a base symbol and even other nested symbols within this it doesn't mean that you need to take each one of these models and make this into a symbol that actually doesn't really matter. Were using the building blocks that were creating to have consistency within our designs to be able to use the different pieces. But it doesn't make sense. We don't need to reproduce this entire specific motile or this entire specific motile. And that's the beauty of this. This this method also allows for more flexibility later on, if there are other types of models or configurations that you want to create again, we have our base here and that's enough. So that gets us started. That allows us to have that consistency within our design system. So our buttons are always in the same place. Maybe sometimes I just need one. But in maybe sometimes there's not an X. I can hide that, too. But ultimately I'm getting a lot of flexibility and getting a lot of bang for my buck from this one based symbol. 9. Final Thoughts: I hope you found these tutorials and tips to be helpful. There are so many ways that you can use complex symbols, nested symbols and overrides to make designing faster and more efficient. Getting symbols to work for you is all about trial and error. So don't be afraid to experiment. And if you get stuck, please don't hesitate to post questions here and myself, for your classmates can help you out. Thanks so much for taking this class.