7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 14Length: 1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 Symbols and Shared Styles

Reusability is a crucial concept when it comes to increasing your productivity. Imagine building a button style over and over, versus having a specific style for that button that you can apply with a simple click. Sketch makes this easy with symbols and shared styles, both of which can help you create reuseable elements.

2.4 Symbols and Shared Styles

Hi. Welcome back to Practical UI Design with Sketch. Reusability is a crucial concept when it comes to increasing your productivity. Imagine building a button style over and over, versus having a specific style for that button that you can apply with a simple click. This can be easily achieved in Sketch. In this lesson, you'll learn about symbols and shared styles, both of which can help you reuse elements. So let me show you, so let's say you have an element that's gonna be repeated across your project in multiple places, and you also want to be able to change all of those copies at once. For example, let's say you have a simple button, I'm gonna draw one right here. I'm gonna make it red with no border. And inside I'm gonna put a text that says something like, button. And this one will actually be white, and we're gonna align them on the center, maybe make the text a bit bigger. And align this on the center. Okay, so this is a button, right. And what I can do is select everything that I want to include in my symbol and I hit Create Symbol. I'm gonna name it button symbol. And notice this created a symbol here on the right side. And also on the layers panel I have a pink folder, which I can rename to anything I want really. Let's say I'm putting this here, and let's say that I want this button again in another page. So what I can do is go to Insert > Symbol > Button Symbol. And it's gonna duplicate that button. But here's the nice thing. Let's say all of a sudden I want to make this button blue instead of red. Well, I can select one of them. I can select the fill and I can make it blue. And all of the other instances of that button are changed as well. Or let's say I want to give it some effects. Well I can select the background by clicking once on the button and then double-clicking to reach the background, or you can simply hit Cmd and select it directly. So, let's say I want to add like a shadow to it. Yeah, that shadow is instantly applied to all the other buttons, and it can instantly be viewed on all the other buttons as I change it. Okay, now let's say I wanna copy this button, and then I want to create a different style. So in here, I'm gonna select No Symbol. I'm gonna get this and make it green. And then I'm gonna create another symbol that says Button Green. And now I can choose between symbols. So if I want this button to be green I simply change it. If I want this to be blue I simply change it here. So basically that's how we work with symbols and it doesn't matter if you have a simple button or a piece of text or a very large component like a sidebar, all right? You can create symbols that include any number of elements, and that is pretty awesome. Because, for example, think of like a blog theme. You have a bunch of different pages that you use a side bar, and you include that side bar as a symbol in those pages. Well, what if you wanna change something? Change it in one place, and the others will change automatically. So, that is very efficient. Now, apart from symbols, there's also a thing called shared styles, and this can apply to virtually any element. Let's take a rectangle, for example. You have a certain fill, a certain border, and a certain number of effects applied to it. Let's add a shadow, for example. Let's make the fill white and let's make the border red. Let's say I wanna create a style for this. Well, I can go here, I can create a new shared style. I can rename it to Red Rectangle, this is probably not the best name but just so you get the point. And then I create a new rectangle and if I set this style to Red, it's gonna give it the same fill, the same border, and the same shadow. You can achieve the same thing, let's say you have another rectangle, by clicking on one of these elements, Copy Style, and then pasting it on another one. Based style, there we go. If I want to change something here like maybe turn the border to green, I change it in one place, and it propagates to the others. But if I change it here, on this rectangle which doesn't have a shared style, it's only gonna be changed on that rectangle. And you can use this for anything. This was an example with a rectangle. You can use it for text, like making a heading, Heading 1, yeah? You can select this, you can increase its size, you can make it bold, you can change its typeface, maybe something like this. And then you create a new style, let's say an H1. When you create a new text like big title and you want it to look exactly like this one you simply select H1. And changing again in one place, Will change the other elements as well. And one of the nice things that I like is that it shows you a preview of that style in this box here. So for example if I have another style like Heading 2, create a new style, H2. And now when I choose these I can see a preview. If you would like to delete any of the text styles, simply go to Manage Text Styles and you can select any of these and hit the minus button. Or Layer Styles, you can see the Red Rectangle here. Or you can see the symbols. So it's all accessed from this window right here. So what about practical uses for this? Well, it's really simple. Just like I explained with the symbols, the shared styles can be used very effectively with text, for example. Let's say you're building an artboard which contains all of your typography styles from H1 to H6 plus paragraphs. Well, you can define a shared style for each of the headings and the paragraphs. And then, apply that styling to the actual text and headings you're using in your website. And when you wanna change something, you simply change one of them and everything will be updated. It's that simple and that's basically it for symbols and shared styles and in fact for the first chapter. Next time on Practical UI Design with Sketch, you'll start building the admin user interface. You'll do so by first creating the color palette and buttons. See you there.

Back to the top