Using Symbols

Pablo Stanley
A free video tutorial from Pablo Stanley
Product Designer
4.1 instructor rating • 7 courses • 121,487 students

Lecture description

Symbols make it easy to have elements that are repeated across your design. They share style, position, size, and effects. When you change one symbol, it changes everywhere that symbol is being used. Useful on elements like Navigation Bar, Status Bar, Icons, etc.

Learn more from the full course

UI Animation using Sketch 3, Principle App, and Flinto

Learn to prototype UI animations and micro-interactions using Sketch, Flinto, Principle, Marvel & Invision Craft Plugin

08:44:25 of on-demand video • Updated April 2018

  • Learn the Fundamentals and Some Advanced Tricks on Sketch
  • Create realistic prototypes for mobile devices and web
  • Create UI animation and micro-interactions using Flinto
  • Create UI animation and micro-interactions using Principle
  • Create simple prototypes using Marvel App
English [Auto] Just get together. This is part of a series on sketch basics. In this session we're going to learn about symbols symbols are super powerful and super important and I think makes kids particularly to use. So let's go out and rape them. All things that you can do with like this. So go ahead. Symbols are great for elements that are repeated across through the time they are style position size and effects. When you change one symbol it changes every word. That's the most we use and it's useful in elements like like navigation or you Heathers on your status bar buttons carts icons etc. all elements are going to be repeated and you're going to be using them a lot. You will probably want to use symbols and it's different from textiles and from graphics Dallas and that is like more like a group of elements. And also you can even nest symbols inside symbols. So let's do an exercise real quick so you can learn. How to use this. So for example there's if you use an animal if you're designing a mobile lab there's a chance that you're going to be using this status bar a lot. So for example I have this dark and light the status bar. So since I'm going to be using it a lot I'm going to create a symbol. Let me change the customized metal bar so you can see when to put it. I can text. Done. And you will see here I come says create symbol a tool so you can select any layer or any group and you can create a symbol right there and point to the status bar. Dark when to create a symbol. And on this one going to create a symbol to sort of spotlight this name is being taken from the layer or the group that you have already put in it so it's already by the file giving you the name but you can edit it and change it so and you see that says send symbols to symbol space the thing is that the first time you create a symbol it will create a new page where all your symbols live now. So over here on the left on the pages you'll see the now your symbols are over here. So you can even rearrange them and your symbols live inside. And our board does this in any other our port. And over here if I go back and I want to edit edit it I will go to the symbol space and then I can return to the instance where I was editing. So here I can not really in context I cannot really edit the size or the. Or the elements or the colors or any graphic styles. I will have to double click and then here I can change anything I can change it. I don't know as that of PM is going to be AM and the same over here instead of AM PM and though if I go back to my page you will see there now its am here and apparently didn't change it here but you see how it would change here and also not only that but also for example here I don't know this is sign changes instead of at the heart it changes to light. I can just click on it and then here I can see what what symbol is being applied and I can just change it to a different symbol if I need to sort. Right now I'm going to change the chart and no changes to that symbol. So that's pretty cool. Let me undo that and so that's pretty cool pretty basic and the elements are going to be probably you're going to create once and then you're not going to edit them again. But it comes in pretty hand the when you're doing stuff that is repeated but also you do edit. For example here it has a label but you want to have a list of these elements of these rows of the cells over and over but. You probably want to have control over the text you want to always have the same spacing in the same style. You want to have control over the text. So let's go ahead and create a symbol from this. So I'm going to create a symbol and right away and I'm going to use slash and I'm going to explain why the slash in a moment and we do same with this one. This is so but this one is switch off. OK. And actually if they get it mixed up this one should be switch up in the shoe a little. But we continue in a moment. Anyway here as you will see it has over here on the right. Instead of all the different elements that you have on a normal layer you have something that is called overwrites. And this one will detect any text layer here and it you can overwrite it. So by the fall it gives you a label or you can say. Notifications for example of vacations you should get there in the changes here. See how it's not change in style or anything if I want to change the style I can just double click on it and then here instead of black I'm going to do it right. I don't know why but no changes here is respecting my value they put in that which is not vacations but it just was also respecting the style from the from the from the symbol on to undo that quickly and then I'd have those two new symbols this up click them and now that I have them here I can actually just just for the sake of being organized I can organize them here. Here I organize these two to get out where I can hear now at them. So this one actually chewed B switch off so I can just rename it the sewage switch and then this wants to be just labeled. Label label. Now let's put it that way it through its Tell me about this info because they all have labels. Ok cool so they create this and then even here I can duplicate for example this one and I can say you know what I'm going to create a new symbol and I'm here in the civil space and I can create new symbols and this one is going to say no info for example not in the book and I delete this info. There you go. Just a normal cell with no info it just has a label. And obviously probably you know that we're using these icons here but probably the icons is something that you will probably want to edit. But let's keep in for now. So over here let's move this a little bit here and I'm going to put Kate this is the kid again and now I can go ahead and this one should not have info so I'm going to do this. And this one is the info instead of stitched together it's going to be two items for example and then the label said label I'm going to call it or no resistance I don't know why this is and this one is going to say settings you go in now. See how everything I have control over the levels I still have freedom of changing them and it's respecting all the different values like colors and style and that way is just like that. If you change it any. For example here if I were to put over here I could just like duplicate the symbol. I have the symbol. Let me let me use the same symbol in different places so you can see the power of the symbols. Here here and here and this one I'm going to say you know and this one is going to have nothing sorry and to say nothing. That's what's going to say and then Les was going to say but it is done but if you get one saying sketch there you go. So now that I change it later you know what I double click on it and you know what is going to happen. You know what I'm going to change this instead of regular going to change it to both. And this one is going to be instead of it this medium grade going to say it even lighter grade. They go back and it changed everywhere. Respect the labels it's given the same labels no label look at here. And but it's respected all the values from the symbol of the different style. So it becomes very powerful and it will help you a lot a lot in your workflow as you notice here. I have other instances of this. I have this to say which is so since I sometimes I used to switch on and switch off. I can create a symbol for that so I'm going to great. It's a book that is called switch. Which this one is going to call switch slash and I want to tell you about the slash. Why did they name it so it's a slash off the thing is this Once you go to insert you can go to symbols here and then you will see that it Groups things by the name that you gave it. So for example all the cells are now inside a cult cell SLAs something no other group here and I will keep my symbols a little bit more organized and I can just like a present and I can put it anywhere in my artwork. Ok that's cool. I trade those symbols and now I want to put it here that way and using the same symbol everywhere. So over here this thing is not a symbol. This is just a group and regular group. But I can actually get to put this symbol. I'm going to duplicate it when to drag it and put it over here. Oops sorry. No that's not it. And sorry I know you have to insert the symbol here so I'm going to put switch off and going to put it right here and see how this is a symbol that is inside this. So now I'm going to put three and you go to space and it's good and now if I were to change it here it changes here to see how. How cool is that. Since this is the parent this is just following this. So it's pretty powerful when nesting symbols inside symbols because that way you have you can go a little bit more granular on on the elements. So so yeah I can now for example I can duplicate this one. And this one I'm going to call it switch on and obviously you know what I want to do. So instead of having to switch off I'm going to put switch on and I have a different layer those that I go back here and you know what no notification should be on. I can just change it and there it goes. And then if I were to double click on this and if I were to change the color of this instead of this distance that of the screen I want to use a blue I change it here and it changes over here too or I'm using that same symbol and sight this symbol is like a symbol symbol Sachin. There you go. Ok cool. So that's cool. And a North cool thing about symbols for example another example is when you use buttons so button sometimes you want to have a primary button a second there about than you do the same. I create a simple bottom slash primary crane I want buttons large secondary and then over here if I want to use the same button I want to say continue. For example I can change it here and I change the label and you know what. Is that why I want to be as their secondary want to be primary you could just change that and it's going to say continue continue and I go and I did this and you know what is that a blue. We want to be green because I don't know. Because it's cool to see things change. And there you go. It changed here and it changes everywhere. So yeah now the cool thing also about symbols it can get pretty complex that was pretty simple but sometimes you want to have control not just over rights not just on text but also in images so for example here all these are groups as you can see these all these have layers and everything but it would be better if I just have a simple sum going to actually just create a symbol out of this where this one is the main title I want to actually call it here title this one is going to be in focus and this one is going to be going to move it around here. This one is primary and then second there. So primary secondary action and then I have my background and I think I'm ready. I'm going to select this group which is called cart. I'm going to create a new symbol. And there you go. I create the symbol and I can duplicate the symbol over here. Let's look at it again or here. Create a grid and for example this one. It is using that same symbol they're all using the same symbol but I want to change the titles and the images not just the text. So for example this one I want to change the image and it will change it for me. I can either magically choose a different image. So I'm going to go to here I have it downloads it to use Mexico and I am magically respected everything. It just changed the image and I can just go ahead and the title is going to be Mexico and the info has. It's the best city after the loss. There you go. And then Ramos. Most certainly did a little bit smaller than it should be but that's ok I can just double click on it and I can make that text layer a little bit bigger and it will be a fine. Actually I'm going to say it out of instead of fixed. I'll talk when I go back and out it if it is fixed. I was thinking that a couple of these. There you go. And I'm going to do the same here. I'm going to choose a different image. Going to shoot spots then. And that's cool right. That's a pretty easy but also like I can edit any time thing you know what the car should be a little bit smaller so I can just do it here. I do it once you do that change once and then see what happens. See how all the cars are changed now. I still have to adjust them. But it's it that's easy compared to all the work that it would have me to do so here probably I think too much of the right way. Let me also change the size so the background dishy size of the background. There you go. And the change to the correct time 0 2 0 0 0. This is the same with the background but only it's should be you know one of the three go. Let's go back through trance instance and now we see that everything's in order and they change everywhere in respect to the size of the image as respect to the labels all the data change the style the sizing and it was perfect actually when to change this a little bit bolder to both go back and scope everywhere. So as you can see symbols can be your best best friend when you're using a sketch. So go ahead and give it a try.