Sketch has been our go-to interface design app for a while now. If we thought we’d ever look elsewhere, something has just convinced us to put a 💍 on it, as they say. I’ll tell you why. Two words: shared libraries.
Shared libraries are to design apps as CSS files are to web design: a beautiful way to keep all your design information in on place and easily change on the fly. A symbol library is basically collection of symbols (images, logos, buttons, icons, form fields, etc.) that are placed on pages throughout a site. A shared library means all designers can access these and, when they are updated, the whole design updates as well. No hunt and peck, no copy and paste.
They Have Arrived
Once upon a time, we had big hopes for Adobe Cloud Apps, but their implementation didn’t quite meet up to their promise. I’m feeling a lot more positive about Sketch. Here’s why.
First of all, the implementation is surprisingly simple and clean. You create a Sketch document you intend to use as a shared library, then tell Sketch about that file in the preferences. Note that it’s just a file, which means you can store it in iCloud Drive, in Dropbox, in Google Drive, wherever. Doesn’t matter. If your whole team can see that file, they can use that shared library.
You can even share that folder, and hence that shared library with a client, a contractor… anyone in the world.
Their behavior inside the Sketch app makes perfect sense as well. Now, your symbols within your document are just one parent-level option; every shared library appears in there as well. The hierarchy is logical and makes perfect sense to someone already comfortable with symbols in Sketch.
Finally, if you update a symbol in the parent, you get a notification in the corner of the app, but nothing happens until you click it. Furthermore, you’re given the opportunity to review (and approve, if necessary) all of the updates before they propagate into your document.
Symbols Rule
The best part about how symbols work in Sketch is in how they allow nesting and overrides. This means you can have one symbol representing a button, for example, and it can contain a number of options for the background color or icon. It can even allow you to enter custom text. Yet, the whole symbol remains intact, and editing the symbol (moving the icon, or adjusting the color options or type) doesn’t break anything.
When you combine this with shared library files, the benefits become immediately obvious. Things like sets of icons, colors, and fonts can be stored in the shared library. Indeed, a whole style guide can exist there. When new pages or screens need to be mocked up, they can be composed from those assets quickly. If the client’s logo needs adjustment or the colors change, those can easily be updated everywhere.
Shared libraries of symbols in Sketch mean you no longer have the urge to try to keep all your work in one file. You can have a file that contains all the shared symbols, and then a file for the basic site design, a file for exploring some new page layouts, and a file for a style guide. You don’t have to, but it sure makes it easier when more than one designer is working on a project.
It’s Not Like Adobe
This is not how things work in the Adobe Cloud system. For one thing, Adobe decides what types of assets you would want to share (color, type, graphics… those are your options!) and does not allow these items to be nested. When placing assets, they are simple assets with no options or parameters of their own, unlike Sketch.
Adobe does get a lot right. They have apps on desktop and mobile, so you can share your libraries between different devices, which is something we love. The makers of Sketch have no plans to make an iPad app, so we’re stuck with Adobe or third-party tools here.
I should note, however, that with the advent of iOS 11 on iPad Pro devices, we’ve basically been using Dropbox and the Files app to take the place of this, since iPads now support full drag and drop. This brings our workflow with Sketch and third-party apps pretty close to what Adobe offers.
Using Shared Libraries at Needmore
How do we expect to use these new features at Needmore?
For one thing, when we start a project, we always create a project folder in Dropbox and put in whatever assets our client has delivered. Since more than one of us will be working through ideas in Sketch, it’s natural to think we’d make a shared library of the client assets right away. If the client provides updated assets, they can easily be replaced this way. And it’s much faster than hunting through the file system for each asset.
Obviously, this feature comes into its own once we’ve got approved styles and are building out pages. Shared symbol libraries are effectively style guides you can build things with…
We’re already starting to use shared libraries in Sketch, and are excited about creative uses we’ll think up over time. They’re built on a solid foundation, and yet another reason why Sketch is our go-to interface design app.
Library photo courtesy Eli Francis. Most example screen shots courtesy the Sketch website.
