Our design workflow gonna improve so much with Sketch Libraries! 💎+📚=😍
With some pro tips! ✨ Available now in Sketch 47 Beta, coming soon to next stable release!
Libraries features from Sketch Beta is kind of late into the design system game. Adobe XD, Figma, and even UXPin have implemented the features, and it is good~! The Libraries feature teased during the release of Sketch 43.
But Sketch communities is still the biggest among all the design tools, I believe. And some of the designers just can’t simply migrate to other tools because our workflow is tied to Sketch very closely. Like I’m very relying to Sketch plugins, these make me hard to switch. 😅
Why Do We Need Libraries Features? 🤔
Product design is kinda complicated nowadays, and we need to move things at lightning speed than ever to align with the sprints or launch date. To meet the requirement, we need to have a tool that can help the design stay consistency, up-to-date, easy access to teammates, etc. And the Design System is the answer to this!
The best design happens when designers collaborate together.
Whether you design with a team or alone, the Sketch Libraries gonna to help you with better design workflow. The design will get layout faster, more consistency and collaborative than ever. 🎉
And also there is no more manually copy some symbols from another Sketch file. Sometimes you will get duplicated symbols and mess up my current Sketch file. Although there are tools like Craft Library, Brand.ai, Lingo and more, I feel they’re still not perfect, and some need extra 💵 to subscribe.
Now Sketch have their own native Libraries features but let’s see how it can replace those existing library tools!
Let’s Get Started!
We can use Sketch Libraries to quickly insert symbols from the default “iOS UI Design” library or import your Sketch file that already has tons of UI elements and use it as a symbol library. Yes, a library is just a Sketch file with a bunch of Symbols, everyone is familiar how to create reusable Symbols.
Once you open up Sketch 47 Beta, there is nothing radically different from current stable version. Go to the top left menu Sketch Beta > Preferences… (or Command + Comma) And you will see a new tab menu “Libraries.” And there is a default library that Sketch attach for us, iOS UI Design. You can press on the EYE icon or just press spacebar to preview what’s in the library.
➕ Adding Symbols from Libraries
Let’s say you create a new Sketch file, go to Insert menu and you will see iOS UI Design menu. You can add your desired symbols that are from that library now, super easy!
For better and faster way to add library symbols, I suggest you customize the Sketch Toolbar to add in Symbol menu. I think this method is better than scrolling the list from the top.
There’s a much faster way to add a symbol, and you should do it all the time, by using Sketch Runner, the must have Sketch plugin if you’re designing in Sketch! It is very time saver and intuitive.
But the downside is, if we want to add library’s symbols, we only can use the RUN tab instead of the INSERT tab as we typically insert symbols. It is better than nothing, but I wish Sketch Runner team will include library’s symbols to be searchable from INSERT tab, because there is a preview panel to see is it I’m adding the correct symbol.
To avoid confusion, Sketch team have differentiated the icon of library symbol from the local symbol.
✏️ Editing Library’s Symbols
The library’s symbol is just working same as the local symbol; it can override the value at the Override panel on the right. Constraints work fine too if the symbols set correctly.
You can detach the symbol, and it will become regular group folder. Or you can unlink the symbol by double clicking the symbol. You will see a warning dialog to ask you do you wish to Unlink from Library. If you choose to unlink, the library’s symbol will become your current Sketch file local symbol.
You can group the libraries symbols or nested it into your local symbols too, kind of inception concept~😮
⭐️ Adding Your Own Created Libraries
The cool thing about Libraries is, you can just add in all the previous projects that with Symbols inside as the library! Unlike other tools, it does not require a new workflow to do this! 🎉
If you don’t have any internal UI Kit available, I recommend you to start one for yourself and your team from today! There’s bunch of resources out there for your references to start with, below are some of the links:
⚡️ Syncing Your Libraries with Teammates
Sketch team recommends us to have a person handling the master Sketch file (the Library Sketch file). This person can avoid everyone getting the unconfirmed style from someone who is not responsible for the master library file.
Senior and/or production designers may want to restrict access for some users so that the file is read-only. (please check the docs of your favorite syncing tool to see how to do this)
So how can we edit the library? Simple just double click on the symbol that you want to edit, and you will get a dialog box asking whether you want to Unlink from Library or Open in Original Document to edit it.
Be aware what you are gonna do next, if you’re going to edit in the original library Sketch file, everyone who is using this library will be affected by the changes.
But Sketch has made all the library file Locked by default. This can prevent unauthorized designer go one step further. But if you’re the designer that handle this master file, you can proceed to unlock it.
The best thing about library symbol is that you double click on the library symbol you want to edit, Sketch will open the master file and straight away focus on the symbol. This reduces the time to search for the particular symbol and edit it. 👍✨
Once you saved the master file, your current Sketch file will take some time to recognize there are some changes from the master file. But this only takes about ~5s to ~10s. Depends on where is the master Sketch file locate, if it locates in some cloud services like Dropbox, it will need to rely on your internet connection speed too. Just be patient my friend. 😅
You will see “Library Update Available” on the top right corner of Sketch. Click on it; you will see a dialog box about the changes. If you’re familiar with Git, this is just the same way they both look alike.
Sometimes it doesn’t need to update all the library symbols update to your design; it depends on cases. And Sketch has done this Review features very well. It let designers choose what needs to update and what not. This makes the Libraries feature more flexible than others. 😌
👍 Pro tips: You can enlarge the Review dialog box to see the old and new symbol much more clearly. And you still can undo the update if you haven’t closed the current Sketch file.
✌️ Pro tips: If you’re Abstract user, version controlling with Libraries will be a perfect combination for this workflow! Not going to cover Abstract here, but there’s bunch of article about how to use it, and you guys should read!
📚 Summary
Libraries definitely will become one of the biggest releases from Sketch team. And it will improve our workflow and collaboration between designers a lot.
Some of the designers I know slowly to migrate to other tools because of buggy-ness of Sketch and not able to collaborate in real time. But I think Sketch should focus more on their power users and bring more power features to us. And I foresee the future of Sketch is very bright and will continuing benefit product designers! ✨
“It is the long history of humankind that those who learned to collaborate and improvise most effectively have prevailed.” — Charles Darwin
And meanwhile, if you can’t wait for the stable release of Libraries, go ahead and download Sketch 47 Beta and become a pro in minutes. But be sure don’t use your ongoing production project for unpredictable issues.
Clap clap clap 👏 and share if you’ve enjoyed this article. It’ll motivate me to write more! Thanks!
Follow me on Twitter. If you have a new project you want to collaborate with Minitheory on, you can email or visit us here!
_
Yap Kwang Yik is a Senior UI Designer work at Minitheory, a digital design studio based in sunny Singapore. We make software simple, based on how people think and behave.
