Sketch design libraries - Sketch Tutorial

- [Instructor] Using InVision's Craft Library within Sketch is great. Your design library is in the Cloud, and everyone can access it and pull in components, and get updates across their files whenever someone updates a component; however, I want to point out that when your work flow depends on a third party integration, it can sometimes present problems. For example, if Sketch updates, any third party plugin could break until an update is pushed to production, and that's where Sketch design libraries come in. So Sketch just released a native solution in their latest public beta that will do something similar to what Craft Library does. Honestly, in a modern design team, shared libraries are so crucial and close to the core of the software, that it just makes sense to include it right inside of Sketch. So if you're Sketch file looks a little different than mine does, it's because I'm using the public beta version. To download the public beta version for yourself, just go to sketchapp.com/beta. So let's take a look at how this works. The first thing you're going to want to do is add a library to your Sketch file. A library is nothing more than a regular Sketch file with symbols, so if you have a design library with symbols all set up all you have to do is add that library to this Sketch file. So I'm going to go up to the top, and hit preferences, and you'll see that we have this new icon here called libraries, and Sketch has actually already given you a library that you can use; an IOS UI design. But what I'm going to do is I'm going to add a library, or basically just add the Sketch file that I've already created with symbols set up already. I'm going to add a library, and I'm going to go to my Dropbox, and I'm going to choose my Sketch file with symbols already set up, and I'm going to open it, and there it is. So there you go. Now that Sketch library has been added. So I can just close this out and start using it. So how do you actually use this library and use these symbols? All you have to do is go to the top up here, insert, and you'll see that you have your libraries right here ready for you to use. So if I go down to the Sketch library that I just added, here are all of my symbols that I have in that Sketch file, and I can use that in this document and across any other document that I open and add that library from. So let's say, for example, I'm going to go ahead and add a button large, and I'm going to put it right here in my file. So you'll notice here that we have this button large, and all of my overrides that I set up in my previous file also came in. So I can change the color if I want to, I can change the state to none, so it's my default state, or I can change it to the pressed state, and I can change this to submit. Note that this didn't actually add this symbol to my file. So if I look here, I don't have a symbols page. That's the cool part about this is that this is actually just pulling a symbol from a different file. So this didn't add a local symbol to my document. You'll notice this new icon we get here of this link. So that is telling you that it is pulling this symbol from a global library file. So that's really cool because you really get rid of a lot of bloat in your files that you get with all of the symbols that you have to create. Now let's say that I want to edit this large button symbol. So if I double-click to edit, you'll see that I get this message asking me what I want to do with this symbol. So I can't make changes to this symbol in this document unless I unlink it, which, I think is actually a really good thing because it will force you to keep your files consistent, and it will minimize the risk of making a mistake. So let's say I want to unlink the file. You'll see that Sketch added this as a symbol, a local symbol to this current file. So I just have now a symbols page, and it's now a symbol here, and so I can edit this in my local file. So I've unlinked it from my global library. Now, let's actually go back. I'm just going to undo that, and let's say that I actually want to open it in the original document. So I'm basically going to edit the library in the source file and then save the file. So I'm going to open this in the original document. Notice that Sketch actually adds this kind of piece down here that makes sure I know that I'm editing a library file, and also notice that I actually need to unlock this first. So I'm going to go up to the top next to the name, uncheck this box, and unlock this so that I can actually edit this file. So let's just say that I want to change the corner radius of this from let's say four to 100. So I'm going to go over here, and I'm going to change the radius all the way to 100 over here, and I'm going to save this library file, command S, I'm going to close it, and go back to my original file. So this should be more apparent in my opinion, but what you'll see is up here all the way in the top right, you'll get this notification that says, "Library Update Available." so after you click this notification you'll be presented with a list of symbols that have been updated. So you can choose to edit all the symbols, or if there's a lot of changes here, you can just go through and check and uncheck which ones you want to actually sync. So this one that I want to sync. It has this old version and this new version, and I'm going to update the symbol, and now you'll see that the border radius has changed to 100 instead of the previous four. So this is a really awesome, new feature that will make a really positive impact on design teams everywhere. There are a few improvements that I would make that I mentioned, such as making the sync notification more apparent, and I would also really like if they were going to include shared textiles or layer styles, but I think it's a really great start, and I'm really looking forward to what comes next.