Nested Symbols in Sketch - Wunderlist Todo App - Let's Make That In Sketch

what's up everybody on Jessie Showalter and this is another episode of let's make that in sketch the show where I teach you interface design techniques as well as how to use a popular design software sketch for Mac in this episode we're going to be remaking the Wonder list to do app which is an awesome free app for iOS and Android and desktop and laptop I use it all the time and in doing so when we recreate it we're going to learn one of sketches most powerful features nested symbol I'm talking symbols inside of symbols inside of symbols so that when you make one change to one interface component it happens across every artboard in your entire project that's an amazing thing I love this feature I love this product let's get started okay so here we go we have sketch open and we have our artboard already created us taking the liberty of just kind of creating the base of some of what we're going to do here today so you can see on the left hand side I have an artboard titled there this is literally just a screen grab from my device of wonder list and you can see on the right hand side I have just gone ahead and recreated kind of plate the word work on top of and that is that top header section that bottom navigations background gradient and I've gone ahead and created that first kind of like input field because what we want to do is we really want to focus on creating reusable interface components today and that is the magic of that it's all going to take place within the individual kind of table cell like to do items themself so let's get started with that I have this file save as wonder live sketch you can find the file down in the description of this video if you're interested in downloading it and following along and when you open up this video you're going to see three pages you'll see the mobile which we're currently working on you'll see the desktop which is something I've kind of grabbed off of my desktop version we're going to we're going to be doing that for our extra credit today and then lastly a symbols page which if you don't know how to use symbols we're going to teach you that right now and then also there should be a couple of icon saved right there near the original artboards these are going to be the main icons to be working with throughout the tutorial so it's all that being said time to time to dig in time to get started time to make this thing happen the first thing I'm going to do is I'm going to look and see what are the reusable interface components that we need the first thing I see is right here these kind of header tags okay so they're section tags whatever you want to call them but those are the top of every quote-unquote section so that's a really simple symbol so we're going to start with that okay we're going to drag out just a rounded square and it's probably not going to need to be as rounded as I just made it it's a border radius of eight right now we're going to drop it down to like three or four something like that and we'll take our color picker and we'll just grab inside there and now we have just that basic shape now again this might be a little bit off but we're not going for precision here we're going for the overarching kind of features how to do this so we've made that first one that first shape and now we're going to take our text tool and make it not so matte it will just write the word you tube inside and we're going to pick something like Helvetica new it's just like a really simple font and we'll just drag that size down like something pretty small maybe like 10 and inside of our typography options we'll choose upper case and that's just going to make our typography a little smaller actually it's going to make our typography all uppercase and we made it a little bit smaller to fit and we'll grab these two and we'll line them up Center and vertically and horizontally Center them always do that and then what we're going to do is to make our first really simple symbol is we're going to just kind of grab both of those by highlighting over them or Anna press the create symbol button up in the tools panel it's going to give us the opportunity to name this so we want to call this header - tag I think okay so now we have a header tag symbol and if you kick over to the symbols page sketch has gone ahead and made us our first symbol okay so we'll kick back over to our mobile page real quick now you can see if I drag out a couple different instances of this symbol instances of the sim okay remember that terminology and I come back into my master symbol like symbols page if I change that color to be like a red or like that pinkish color it's going to change every instance of that symbol so you can see how powerful right off the bat symbols are because they allow you to make one change and it may not seem like such a big deal whether you're looking at one or two our fourth what if you have an entire project where if you're prototyping a brand new app or website and you have buttons or components across 100 different artboards you do not want to be wasting the time kind of mindlessly changing colors in each and every one you want to use symbols they're such a time-saver okay so we're just going to go back and undo that and bring it back to its original color you can also see a great thing that sketch does is it's going to identify elements within the symbol that are worthy to be overridden and once you click on that instance of the symbol and the right-hand panel you'll see over here we now get an override section so the thing that sketches identifying right now is the text inside of it so we can rename that like from YouTube to Twitter and it's going to balance it now important note something important to remember is when we go to our symbol page and we click on our symbol right now the text is left-aligned so that's not going to spread the text or kind of like render the text evenly within the space we want to make sure it's Center aligned and vertically centered now whenever we do that and we override it with words it's going to stay perfectly aligned like I can do right one letter and I'll stay perfectly aligned but what if I write a little too much okay it can't fit well that's why sketches so smart they also allow you to resize symbols or instances of symbols okay so you just take this and stretch it a little bit and we'll get all of a sudden the perfect kind of like a version of that symbol okay with the spread out text so you can see thats how simple it is to make reusable containers components so now we have a component and now we want to start making our to-do which is where like all the magic happens so we're gonna drag out another rounded another rounded square and it kept that same size of border-radius for us and we're just going to space it down a little bit and make sure it's Center aligned okay now we have kind of our background or or our initial plate for the to do what we want to do now is we look inside this this very basic to-do item and you can see it has a couple things to have that checkboxes typography and also have a star on the right-hand side well underneath that we also see that you can add an attachment now would add the pin symbol again you once you click the star make it important now you're going to flag it as important and it's possible to have not a one line but a two line version okay of this to do we're going to need to make as few symbols as possible to recreate this that's our mission right now so let's start first by creating a check box we're going to create or another round and square we're gonna drag enough thing out make it about thinking what's the size there's 17 by 17 yeah let's go 17 by 17 and we'll give it a little border that looks about right for our check box we'll take that check box and just make sure that it's perfectly centered perfectly centered within our to do we're also going to take our typography tool and just make sure that it has the right color and maybe both some bump up the size of our typography and we'll just do to do this script tion okay I can't spell today so to do description the to do description goes here we'll just write that like that so we're going to take all our elements so far just make sure we're staying aligned here and then now we're going to drag our star symbol down into our to-do item okay so let's just get proper spacing here we're about 13 let's make it 15 away from the edge we're make our text 15 away from that edge I'll make sure I start 15 away from that edge we're going to make these similarly size okay and we're going to want to get a similar kind of border color for our star okay and we're going to graph all of those elements and again we're going to just Center them and now we're going to grab all of them again and we're going to create a symbol out of it okay so we'll call this to do we'll just call it to do okay and so now we have a symbol and we can drag out multiple versions of that symbol and you can see in the override we can fill in the to-do description right there and that's all the override he gives us now we're now going to take our dive into making nested symbols okay so that each symbol has more complex overrides to it so we're going to double click on the instance of the symbol and it takes us to the symbols page you can see here is our art to do within our symbols page so let's just zoom in on it what we want to do now is we want to click on each individual element and make that a symbol as well okay so we're going to click on the symbol it'll make this checkbox unchecked okay now let's assemble it if you look you'll see we have a little checkbox symbol that sketches placed over here for us okay likewise we want to take our star we want to create a symbol we'll say star unchecked let's just keep them similarly names so you can see now we have the symbols created inside okay and just by doing that literally just like making these big guys symbols okay and they're now inside of another symbol here on our symbols page if we go back you'll see just by clicking on our to-do item we now have overrides for the star and the checkbox they're kind of boring overrides right now they're literally you can turn it off or turn it on that's the level of control that we have right now but we want more control we want to be able to create either checked or unchecked start important or not important so we're going to do is we're going to remove our little icons we're just going to paste them in here because we're about to use them here in a second okay and what we want to do is we're going to bring our symbol kind of right near our to do okay because we want to keep those around where they account we want keep in context of where they go within that master symbol so here we go we have our symbols and I have this checkbox so let's start with the checkbox we want to be able to have this checkbox okay the checks version of it or the unchecked version this is really really important one thing we have to understand is that sketch is going to be looking for similarly sized and similarly named symbols that are inside of your symbol to use as like like-minded overrides okay so I want to in that override back on our in our to do I want to be able to have this star field right here and I want to be able to open up that drop down and see starred checked and star unchecked okay to do that they need to be similarly named and similarly size we can see if I try to put my check mark inside of here it's going to change the size of it so let's just go ahead and I'll show you what I mean by that I'm going to take another check box and I'm going to move my check mark inside of it just like that and you can see now if I create a symbol of this that's exactly how it want to look on the page we're gonna call this check mark checked or checkbox excuse me check box check okay and so sketch has gone ahead and made that that symbol for me okay just close everything up so you can see it I have I have my unchecked and I have my check okay in there right next to each other in the layers panel as well you can see my unchecked is 17 by 17 and my check is 21 by 21 okay that so we still cannot use it as an override although the similar name similarly name they are not similarly sized so let's go back and figure out how we're going to do that or basically we're literally just going to take the canvas that this is this is on okay and the other one is 21 by 21 we're going to take this canvas and we're going to make it 21 by 21 we're going to this is just an instance of it so we're looking for the actual symbol itself okay there it is there's our guy so if we put them right next to each other now we can see when we zoom in that the check box is going to be anchored the bottom left corner that way they're having the same exact space okay and you can see in doing so it's change the size actually we have to just set two original sizes in our symbol and we want to realign it okay the way that we want just like that and we're looking good right now so now we head back to our main page and click on the override you can see you have checkbox checked and unchecked and now when we drag out multiple instances of this symbol we can check some of them and uncheck others and that doesn't change anything to do with the master symbol okay so that's an amazing override system we've made our first nested symbol now we're going to get more complexed okay we're going to go in well we're going to do a really similar thing with our star okay so we want our star to be in there obviously here's our star unchecked okay and it's in a 20 by 20 and the next thing we want to do is we want to make that flagged version okay so what we're going to do is we're just going to draw a rectangle just like so we're going to leave the star the same size and I forget what color the guy is I'm just going to steal it like that the color and I'm going to paste the color in there and I'm going to move it move this shape backwards okay and then what I'm going to do is I'm going to hit return I'm going to hit I'm going to head into the edit mode or the edit shape mode okay and I want to put a point in between the two I'm going to create that little kind of flag symbol thing there and a great trick to do that if you hold the command symbol down it's going to identify the exact middle between two points so you can just click right there and we're just going to drag that up and make a little flag symbol okay so now what we want to do is we want to make sure our star is placed in the right spot okay maybe what we want to do actually is we want to change our master symbol and make our star a little smaller okay so it doesn't look awkward we'll drag our flag down so its length a little bit more nicely spaced okay and now we're going to take our our star icon that we have in here and we'll paste it over here and we'll bring our guy up right there there's our star self centered think it's centered let's see what we notice five on each side is good looking good we're going to take our border and make it white perfectly aligned and we are going to grab this and we're going to create a symbol we're going to call it star checked okay now we have a star checked symbol but again it's different sizes this one is 26 by 40 whereas our original star is 16 by 16 so we want to change this to be 26 by 40 okay and we're going to set to original size so does it look all wonky drag it down about where the other one is and you can see that our stars 12th on the top here and let's delete this instance and bring our actual star check symbol over this one is pinned from the top this one should be 10 from the top as well okay so now what we have is we should actually similarly space these to make it in the middle okay and that's actually fine if it's not because it's going to flip over so we can make our check star exactly where we want it and we can make this one exactly in the middle of its canvass okay and maybe actually cheat and go down just a little bit more so now you can see over on the mobile page if we go back we have star unchecked and we have star check okay and so again we can now drag multiple instances of this guy out we want to do a similar thing we want to put our our pin okay we want to create a symbol out of our will say attachment okay and we'll drag our pin to be inside that's actually an instance of it so we wanted that actually sorry so we have our instance of it and we actually want our pins out line I don't know why that's a darker color to match the rest of the style there so we have our pin and now you can see what we'll actually do is we'll just I think will hide this okay on on default we won't have a pin okay oh maybe we do have to actually keep it up like that so let's put the attachment there like that and what we should have is attachment or no attachment so now we can just drag instances of this symbol out you can see how complex they can get we'll just give it a little bit of spacing there like that we'll make this one have an attachment and we start as important and not be completed just FYI sidenote Wunderlist style of a completed to do is not a check mark it literally just removes it from the list but it was just another good example of that next of symbol kind of thing we're doing so we can just change these up a whole bunch and make each individual one again you can still change the name so we can put get some milk in this one I can spell and we could do how about now we have all these symbols kind of drawn out and you can see that how easy it is to create these now we're going to tackle just two more issues and one is how do we make a second line of text in there okay we want to be able to have a second line of text and we want to be able to also make sure that as they expand into the desktop version these interface components are completely reusable no matter what we're designing this this app force so let's do that we're going to go back to the submission page and we want to do this with the least amount of symbols as possible obviously so what we're going to do is we're going to rename this to do to be to do and we'll call it one line like that that's to do one line now we're going to duplicate this symbol now we're going to name this one to do two line and we'll call it red okay and we'll duplicate actually wool way to duplicate that but we're basically just going to make one and one more symbol and we're going to drop the text and we're going to make it a red color and drop the side down this is like a due date okay and we'll save the past due date okay just like that and we'll kind of bring these just text together just like so and we're going to take that same that symbol and we'll just duplicate it again and we'll say two lines blue or we're just going to take the color picker and pick a nice blue color and we'll retitle this and just say due date okay now you can see we have three different to do symbols okay and we're going to just go out here and see now we have like a greater control over the overrides where I can literally up here the master override I can choose which symbol I want so this is this it to do with a one-line okay great I have it to do now with a one line that I named those incorrectly let's go back to our symbols page this should be to do to one line to line Reds oh no they're right okay sorry so I want to just change that to a two line blue okay which means it's got a due date on it and then I want to do another one with a two line red which means the date is past due and you would just type the date in here May 1st 2017 or whatever you want to say and now you have like reusable component they're using the same star and pin and checkbox symbol inside of them one symbol for the checkbox right that's just being reused now we can just grab all of these and group them together and drop them down into a new group and we can rename the top and start again and you have reusable components now we're going to we're going to move from the symbols that we've created the complex nested symbols now we're going to figure out how to make these reusable in all sizes whether that's a tablet or desktop or web app whatever you do so we're going to grab this group and we're going to move over to the desktop view and I'm going to paste that in now you can see we have our components on our desktop artboard and we want to be able to stretch these components okay so I wish I could just stretch these out and make them fit so as the the size it's almost responsive in a way I wish I could make that happen is there a way there actually is so we're going to do is we're going to fix that and we're going to go into you can see if I if I just try to stretch each individual symbol stretches out all wanti well what sketch is going to give us is some really great symbol control if we double click on the symbol we want to click on each instance okay inside of the symbol itself all right so what we're going to do is you can see on that on the override where the overrides would be there's some kind of symbol controls the resizing controls we're going to be looking at here we're literally we don't want to stretch it right which is the default for some reason but we want to pin into corner that's going to pin that object to the nearest corner or corners so that it doesn't move just so you can see we'll go back now we'll try to stretch now how the star the pin are stretching but the check box is not stretching okay it's staying the same size and it's pinning it to that corner no matter how wide it gets so let's do a little bit more of that action that's awesome we're going to take our star and we're going to pin to corner we're going to take our attachment icon we're going to pin that to corner okay let's go back and see what happens now everything's stretching out really really nicely we have one more little issue and that is that the text is actually leaving it left anchored position and we don't want that okay so we're going to do is double click into this symbol again and we're going to take these symbols okay we want to make sure it's left aligned okay and we want to I think resize object let's try that okay so we're going to resize the object what it's doing is it's actually taking the width of the text area so for instance like this width right here it's set to auto we should actually fix that okay and drag it all the way out to be near the pin anything after that is going to be like an ellipse it's going to just dot dot dot after that okay and so we'll set that about two there and now each one of them is sets you resize so you can see it's just opening up more space for the text to going so you can see if I if I typing like something really really long in here it's now been given in the space to receive that text because it's stretching it not stretching it resizing that text box to account or a lot for the increased space size okay so we'll just type veggies in there but now you can see let's just backtrack you can grab all of these components and resize them and we at we do have to go back in to our symbols page and make sure we've done the same with all of these symbols like so just make sure that those are pinned to corner as well now no matter what version of it it is you can let's go back to our desktop they are all going to stretch fine we got to probably make that adjustment with those due dates since those are two lines like that make the looks fix stretch out the length for them and then say resize the object and then the last thing we probably want to do is so we go to our desktop how's our header tag looking looking pretty nice actually it's stretching out really really nicely so we can do that and the whole thing is going to stay centered over the group just like it's supposed to and the boxes are going to stretch perfectly all the elements inside nothing is going to get messed up and and we can still we can take these objects and create new instances these symbols create new instances of them and we can still have the fine-tuned control to be changing them as we see fit now again this is why it's so awesome because I've now designed the iOS version and the desktop version and later on like maybe during a design critique with my art director or the rest of my creative team we can look at and say you know what I don't really like the color of the flags can we change that we could come back and say hey maybe we want to change our brand color to purple okay we come back in everything has changed across all artboards in your entire project hallelujah sketch you are awesome thanks so much for watching this tutorial if you enjoyed it and you want to see maybe some more videos in the future click that like and subscribe button down below I'm going to be doing a lot more in this series as well as others I hope you guys are designing amazing stuff having an amazing week and really honing in on having an effective and an efficient workflow and let me know what you guys think down in the comments if you have any ideas or questions I'll get back to them as soon as I can to talk to you guys later see you you

Channel: Jesse Showalter

Views: 23,764

Keywords: sketch, sketch for mac, how to use sketch for mac, designing in sketch, creating ios apps in sketch, how to do product design, modern product design, vector designs, design a todo app, ios design with sketch, wunderlist todo list, designing a todo list, how to make an iPhone app, designign iPhone apps, designing interfaces, modern UI design, designign apps, nested symbols, sketch nested symbols, sketch workflow, app, tutorial, Sketch tutorial, interface design tutorial

Id: hKGDtwDJaV8

Length: 27min 20sec (1640 seconds)

Published: Mon Mar 27 2017