3.4 Libraries

Sketch libraries are collections of symbols that can be shared with your team and can be accessed from any Sketch document. Because of this they represent a key component to any design system or pattern library you might have. So let's see how to work with them and how you can create your own. Now, this is the document that I've been working on for the past few lessons. And if we take a look in our symbols page, I'll have these two symbols defined. Now, what I'm gonna do to demonstrate what libraries can do is save this document and I'm going to save it in a random folder on my desktop. I'm going to call it demo library. And then what I'm going to do is create the new document, a new sketch document. And inside my first page, I'm going to create an artboard. Okay, now let's say I want to use the elements from my library into this one. Well, I could go in here and I can try to copy this bit and paste it in here. And it works. It creates a symbol, but the symbol is just a standalone symbol in my document. It's not connected to anything. So what we need to do is go to the sketch preferences, go to libraries, and sketch already has this library built-in. It's called Apple iOS UI Design Resources. And you can download and use this or you can add your own library. So hit this button, navigate to the folder that we saved the library to. Load our demo library. And make sure it's checked right here. Now we can close the preferences. And we can go to insert. And where it says here are symbols. We can see that we now have a couple of libraries that we can choose from. So demo library button and let's put it in here. So now, this has a different icon and this icon tells us that this symbol is linked to a library. And it's the library that we created here. So now I can go in here. I can for example, select my layer, and I can change this border color, let's make it green. I'm gonna save that, that's important, and then I'm gonna navigate back to my document. And here, immediately we see library updates available. We click this and it shows us hey, some components are outdated. So it shows us the old version and the new version. At this point, I can decide not to do anything and keep the current version which is magenta or I can update to receive the new style. Other than that this symbol is just like any other symbol in my page. I can choose to only get from the library, I can replace it with something else, I can detach it from the symbol or I can open it in the library directly, and that's gonna open up my library here in sketch. Now, I can also do overrides. So I can double click this text. I can edit it or I can edit that right here and also here's the cool part about libraries and shared styles, text styles and symbols. When you have a shared style or a text style inside a symbol, you get overrides for it, right? So right now if I would have had another text style here, I would have the option to replace it. Same goes for the demo style, for the shared style, right? I have another button BG style that I can use. And look, I can do that. That's an override. And all of these styles are not defined in my document. They are defined back in my library document here. And this actually doesn't even need to be opened. It doesn't matter. Once I loaded that library here in the sketch preferences that's always available. So unless the library file gets deleted, I'll always have access to the symbols and styles saved in that file. That is just fantastic. Now this is useful in a number of different ways. First of all, you can use this system, this library system to create your own design system, right? You can have all of your styles, all of your symbols in a single place and everybody on your team can use it. And if at some point you're gonna make a change you're gonna change the library and all the people that are using that library will get the new elements or the new styles. They'll basically be kept up to date at all times so that's fantastic. Another great use for it. And this is something that I actually use all the time is that you can put assets like icons in separate libraries, and then use them in your projects. So in my sketch document, I have two icon sets, ion icon and zoned icons that I saved as sketch files. Okay, let me show this in the finder. That's all there is to it. It's a Sketch document with a bunch of artboards. And inside each artboard is an icon, and that icon actually has a mask here so that we can edit the color at all times. So once I have those loaded, if I want an icon I can simply go to Insert, and I can choose my library. And I can grab any icon I want from here. For example, this box icon and now we can see that it's linked to that zoned icons library. That is super cool. And that's a quick look at sketch libraries. Now if you want to learn more about this, check out the lesson notes where I've included a link to a tutorial that explains this feature in more detail. Now, lets talk about prototyping, because that's also a huge feature in Sketch. We'll do that in the next lesson. See you there.