Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
FREELessons:19Length:2.4 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.1 Shared Styles in Sketch

A big part of Sketch is the reusability factor. That means that for a more efficient workflow, you can reuse some elements and styles and have systems in place that allow you to change these elements and styles across pages and artboards at the same time.

In this lesson, we’re working with one of these systems, known as “shared styles”. In this video, you'll learn how to use shared styles in Sketch.

3.1 Shared Styles in Sketch

A big part of Sketch is the reusability system, which means that for a more efficient workflow, you can reuse certain elements and styles. And also have systems in place that allow you to change these elements, and styles across pages and art boards at the same time. One of these systems is called shared styles, and this is what we'll cover in this lesson, so let's begin. Shared styles are applied to shapes. So if we were to create a simple shape, it doesn't matter what shape it is. It can be a rectangle, it can be a custom shape drawn with a vector tool, okay? Shared styles apply to all of these. Let's say that we're gonna apply a fill color, and we're also gonna apply a border color, okay, something like this. It's a very, very crude example. And let's say that we also wanna apply, I don't know, a shadow. And we wanna save this layer style or the shape style, so we can use it later. Or we can do that by going to the Appearance section in the inspector where it says No Layer Style. We can click this and select Create New Layer Style. We can give it a name. For example, My rectangle, and it shows us a preview right here, and the name. So now I can select any other shape I want. And I can go in here under Appearance, and I can select My rectangle. So I can do that here, I can create a new page, and I can create a new element here. And under Appearance, I can choose that style. It works without problems. But now, let's say that I wanna make some changes. I wanna change this fill color from this light blue to this kind of magenta color. Well, once I do that, notice that only the element that I apply these changes to will actually display them. The others stay exactly the same, but we also have a small asterisk here next to the style name. That means that this style has had changes, was changed, was updated. It doesn't show the asterisk here on the other instances, only on the one that was changed, so now I have two options. I can either use this override or this particular style on this element only, and ignore the rest, or I can go in here and I can update the layer style. And I wanna do that, all of the other elements that use that shared style will get updated. How cool is that? Now, if at some point I decide, okay, I want this style, but I just want the initial look of it, I'll make my changes afterwards. We can go in here, select the element, go to this bit, and select Detach from layer style. So, what that will do is it will basically keep the same appearance but detach it or unlink it from the layer style. So now I can go in here, I can change this color or this border. I'm gonna make it smaller or thinner, and I'm gonna update it. So now only this and this will get the updated style. This one stays exactly the same because it's not linked to anything. I can relink it by selecting it and choosing the layer style again. Now if I'm gonna make some changes to this, and decide that at some point, okay, I don't want those changes anymore. I can go in here and I can select reset layer style, and this will take it back to the shared style that I have applied previously. Now if I have more than one layer styles, for example, let's duplicate this. Let's change its color, and let's save it as a new layer style. Let's call it, My rectangle 2. See now I have two styles, I can always go and organize them by clicking this button, where it says Layer Styles. I can double click to rename, and also I can delete any layer style I want using this button here. So this is a very useful system especially for collaboration. Because you might have one document that contains the styles for all your buttons, icons, images even. Anything that can have a shared style applied to it, right? And then you can reference those styles, and include them in the rest of your project. And when you have to make a change, you just change one single item, and then go, and select Update Layer Style. And that will update all the elements that use that style across your entire document. That is fantastic, a huge, huge time saver, and one that I actually find myself using a lot. Now the styles that are saved or the properties that are saved in a layer style, are all the properties that you can set here basically, the opacity. Let's reset that, right? So the opacity makes a change, the fill, border, shadow, inner shadow, if you decide to add an inner shadow. That's gonna affect it, and also the blur, affects the layer style as well. All right, so that's how you can use shared styles, and these are applicable to shapes. But what about text? Well, for text, we actually have text styles that work exactly the same way except they're dedicated for text. Let's have a look at those in the next lesson.

Back to the top
View on GitHub