FREELessons: 19Length: 2.4 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.3 Symbols in Sketch

One of the most amazing features in Sketch is its use of symbols. These are repeatable elements that function in a master/instance system. Changing the master will affect all other instances of that symbol. It’s actually a bit more complex than that, so let’s have a look at how to work with symbols in Sketch. You'll also get a quick introduction to the Sketch symbols library, which we'll be working with more in the next lesson.

Related Links

3.3 Symbols in Sketch

I think one of the most amazing features and sketches represented by symbols. These are repeatable elements that function in a master slash instance system. That means you can have a master component and then you can have instances, of that component. So let's take a look at symbols and learn how they work. The simplest example I can give you for using a symbol is to create a button. So let's create a simple shape here and we'll put some text inside that says Submit. Okay, let's do a just a quick styling here. All right, so all I did was just set a fill color border color to this background. And give it a large radius, and also set some font family, font weight, size, and color to this text. All right, now we're gonna group this. And we can right click it and say Create Symbol, or we can hit this little button here where it says convert layers into a reusable symbol. Now we can rename this. We'll call it Button. And we have the option to send it to the Symbols page or not. But checking this will create an additional page here, called symbols, that will contain all the symbols in your document. So let's keep it checked, hit OK. Now if we check the page, we have an artboard with the name of our symbol in an instance in here. Now, here's where it gets interesting with symbols. Let's say I have another page in here. Let's create an art board. And let's say I want to use that button. Well, I could go to Insert, where it says Symbols, Document. Select Button. And then just click it anywhere on the page. So now this bit is an instance of my Button symbol. And you can see this icon here represents assemble. And if we look in the inspector where it's a symbol, right? We can see that Button is selected. So now if I go into my symbols page and this is the master component, okay? If I change for example the color of this text. To let's say, a dark grey, and I go back into my pages, you will see that all of the instances of that symbol have been changed. Now I can't do the reverse, that means going to one of my instances and select the text. It doesn't work like that. I don't have access to this. What I can do is change the text itself, but not its properties. So I can say here, Submit Form, all right? So if I do this, my master component is not changed. And the other instance is not changed either. Only this instance has a different text. The only way to edit the style of this instance is to detach it from the symbol entirely. So what we would have to do, right click, Detach from Symbol, or we would go into here and say Detach from Symbol. So now it's just a simple group, I have access to all of its elements. I can change the color of this text to whatever I want. But that, doing that will not affect the other instance of my symbol or the symbol itself. So that's how symbols work basically. They're repeatable elements that function in this master instance system. Now when I select the master component in my symbols page, I have the option to manage the overrides, all right? I can choose to allow overrides or not. So if I don't allow overwrites, I cannot go into this instance and change the text. It's not available for me anymore. But if I do allow overwrites, I can select my instance and I have another section here in the inspector called Overrides. So I can change the text like this. Or I can double-click that text and edit That element directly. So that's how overrides work. And you can have as many overrides as you want in here. Like for example, I can create a form, right? And we're just going to assume that these are the form fields and I can create a symbol out of those. We'll call it Form. So now this becomes an instance. My master is right here. And I can manage which overrides I want to allow. If I allow all of them ,well, I can simply go into this instance and I can override each one. Just like that, or I can double-click each one and edit it that way. So this is huge. This is very, very handy because you can have like a master button. Let's say, and instead of creating multiple buttons and repeating the process you just create a symbol and you just change the text on each one. And if at some point you decide, okay, I want the text on the symbol to be this color, well, it would do that and that would be updated automatically on all the buttons. Now you can also have nested symbols, okay? So for example, if I'm gonna insert a button here, and on that button, I'm gonna add an icon. And just bear with me here. This icon is a symbol that I have in a library. We'll talk about that in the next lesson. But for now, right, this is a symbol. And I'm putting a symbol inside another symbol. So now, I can override that symbol with another one. Right now, I can choose another one from my linked libraries. And it's super easy to do. Now, as I was saying in the previous lesson, a symbol is not just about grouping elements together. You can also include text styles and shared styles in a symbol. So let's keep things simple, let's remove this. And let's select this rectangle, Create a New Layer Style for it. We'll call it button-bg. And let's select this text, create a new text style. Let's call it button text, okay? So now, if I'm gonna create a text, for example, that has the same style as my button text and I make a change to it. Let's say I change the font weight and I update that. You'll see that the text inside my button, inside my symbol will be updated automatically. Same thing goes for the shared style. If I'm gonna have a shape with the same style and I do an update to it. Let's say I'm gonna make the border a lot thicker, and I'm gonna update that. You'll see that the symbol gets updated automatically because inside the symbol, I have a layer which is as shared style. It's really very, very simple. And it's very customizable, right? You can organize your styles and you can do all sorts of things with text and layer properties. Now, previously I showed you how to include those icons in my symbol. That's actually a bit of a more advanced functionality. That's called libraries or shared libraries. And libraries in Sketch are basically collections of symbols. And we'll discover more about those in the next lesson. See you there.

Back to the top