UX Power Tools – Medium | Jon Moore

Sketch Tutorials

This new feature is even better than nested symbols. I promise.

Before you do anything, go download the Sketch 47 Beta.

Beta

Some Quick Background

If there’s one phrase that’s plagued the design world more than any other over the past year, it’s this: “SINGLE SOURCE OF TRUTH”.

No, this isn’t a real tattoo. Yes, I always match my t-shirts to my rug.

No, it’s not a singles ad for a fortune-teller (“27, Male. Single, Source of Truth. Loves the Beach.”). It’s this idea of maintaining a central document or library as the end-all-be-all-I-swear-this-is-the-final-version of the design, and all its related pieces.

It’s not a new idea. Developers have always battled each other (and Git 🙄) to keep the code base in sync across large development teams.

And really, it’s not new to design, either.

But the proverbial megaphone for truth has gotten louder over the past couple of years as more and more businesses invest in design, and distribute work across teams of 5, 10, and 100+ espresso-sipping, succulent-gardening, jogger-panted, color connoisseurs.

How Things Work Today

There are tons of different plugins, apps, and services that can help you maintain your golden source of truth, but it’s a dangerous game when your product depends on someone else’s. Every time Sketch updates, these solutions break, and everyone grumbles on Twitter for 24 hours until a patch is pushed into production.

It works, but it’s broken. Just below single-sided border control and above color overrides for symbols (ahem, Sketch) sits an overwhelmingly popular feature request for design teams: Shared Design Libraries.

Features I Would Give Up My AirPods™ For:

1. Native Single-Sided Border Control
2. Shared Design Libraries 👈🏼👈🏼👈🏼
3. Color Overrides for Symbols

Prepare for some good news.

All this backstory is just build up to this: Sketch just released a native solution which will make sharing easier than making avocado toast 🥑 🍞

Introducing…Sketch Libraries!

Get ready to have your jogger pants blown right-the-hell off.

What are Libraries?

Libraries are Sketch documents that can be used globally. 👇🏼👇🏼

How do they work?

1. Open your Sketch preferences and go to the “Libraries” tab.
2. Click “Add Library…” and choose a Sketch file.
3. Done!

You can now use every symbol from this Sketch file in any document:

When you add an external symbol, they look like this in your layer list:

Any time you save changes to a symbol in the master library file, you’ll be notified of the change(s) and prompted to sync any document that uses symbols from that library:

It’s easy to miss, but I don’t mind it being out of the way. I wouldn’t want to be bothered every 5 seconds if someone is working on the master file. Clicking this button gives you the opportunity to selectively sync any/all updates that have been made in the master library, showing you what is different between your copy and the master copy. This paradigm should be familiar to designers with development experience:

If you want to edit the external symbol, just double click it. Sketch will ask you how you want to edit it:

• Unlink from Library: Think of it like another level of “detach from symbol”. In this case, it first detaches it from the external library and creates a local symbol. At this point it’s still a symbol, but the symbol artboard now actually exists in your local file.
• Open in Original Document: This will open the master library file and jump you straight to the artboard for the symbol you clicked.

Yep. That’s it.

My dear friends…it really is that easy.

Try It Yourself

Here’s a free Sketch Library of user avatars I put together so you can use them as external symbols. This is useful if you want to always use the same group of people in your mockups, instead of relying on the randomness of the Content Generator.

FAQs

Won’t external symbols bloat the Symbols page in my local file?
Nope! External symbols are NOT added to your local Symbols page. That would kind of defeat the purpose of an external library, don’t you think?

Won’t I lose all of the symbol overrides for my fancy button symbol?
Nope! Sketch treats external symbols just like local symbols, so any overrides that are available in your master file will be available in your local file as well. That means if your master file has five different color symbols that can be used to swap the color of a button symbol, those same five colors will be available in your local file. HOW COOL IS THAT?!

Will I lose local overrides if I sync symbol changes from the library?
As long as the master symbol retains the same attributes and layer set, then all of your overrides should be preserved. You will only lose overrides if you make changes to any nested symbols in the master symbol (this isn’t any different from the way symbols work today).

Does it work with text styles and layer styles?
Not yet, but it’s in Sketch’s roadmap.

If I add symbols to a library, will users of that library have to update their file(s)?
Nope! If you add new symbols, these will just show up in the “Add Symbol from Library” dropdown. That was easy!

I don’t want Dave to mess with the parent library. Is there a way to manage user permissions?
Natively, not right now. You can accomplish this through Dropbox or Google Drive folder permissions, though.

How many Libraries can I have?
I dunno…how many stars are in the sky?

Can I reference a Library in a Library [in a Library]?
Yep. Updates will cascade through each one though, so you’ll have to sync them all individually (don’t forget).

Is this the best thing since sliced bread?
It’s butter. Err, better.

Some Library Inspiration

Libraries are fantastic for sharing UI components across a design team, but let’s not stop there. Here’s how Sketch Libraries will reshape the way you design forever:

1. Central Component Library: Manage all of your buttons, fields, inputs, etc. all in one central library. My design team uses UX Power Tools and it works perfectly with Sketch Libraries.
2. Icon Library: Manage all of your icons in a library. Any time a new icon is added, it will immediately be available to all designers.
3. Illustration Library: Manage all of your marketing and product illustrations in a library. Product designers and web designers can reference illustrations from your file. It doesn’t matter if you’re not done with your illustrations. They’ll be notified every time you make updates.
4. Brand Asset Library: Manage all of your brand assets in a library. If all designers are referencing a single brand library, logos and related assets will always stay in sync.
5. Color Library: Manage all brand or UI colors in a library. Using nested color symbols in buttons and icons to allow you to override their color? Reference colors from this color library in other libraries and it’ll be mind-numbingly simple to update colors across multiple documents.
6. Charts Library: Manage charts, graphs, and visualizations in a library. These tend to be pretty beefy designs, so housing them in their own library will keep UI files clean and performant.
7. Individual Component Library: Manage individual UI components in a library. You know how LESS, Sass, and other CSS pre-processors usually modularize styles for easier management? Divide your design system into multiple, cross-referencing libraries for more organization, and easier symbol insertion.

A Fantastic Business Move By Sketch

This native library feature is going to be HUGE for Sketch’s business.

Who uses Sketch? Product designers and web designers (or whatever you like to call these roles). That’s about it.

Albeit a large population, these designers only make up a small portion of the design community. And everyone else? Well, they tend to favor more illustration-friendly products like Affinity Designer and Adobe Illustrator:

• Product Branding: Adobe Illustrator. Defines colors, fonts, logos, etc. Creates primary branding assets.
• Icon Design: Adobe Illustrator, Affinity Designer. Creates custom icons for product and marketing.
• Illustration: Adobe Illustrator, Affinity Designer. Creates custom illustrations for product and marketing.
• Data Viz: Excel, Illustrator, D3. Designs charts, graphs, and visualizations for the product.

That’s a lot of people and a lot of revenue that Sketch is missing out on.

Sketch Libraries are going to make it much easier (and more enticing) for these individuals to get into the Sketch design workflow. Instead of exporting SVGs from Illustrator and importing them into Sketch, an illustrator can manage their own file of illustrations, then a product designer can reference those drawings as external symbols. Anytime the illustrator needs to make updates, they’ll propagate straight into the UI file. Every asset can now be shared. Now…and forever. It’s going to be so brilliant and I can’t wait until it’s publicly released!

Other Cool Stuff

These are just some disorganized thoughts and ideas, but I think you’ll find some inspiration in one or all of them.

• Libraries can reference other libraries. Woah. Leonardo DiCaprio would have a friggin’ heyday with this level of Inception.
• Product managers can now do dirty mockups with real symbols and components without you worrying about them screwing something up in the base component library.
• Deploying new symbols doesn’t require syncing. They just appear in the external library symbol list. This won’t disrupt a user’s workflow.
• You can define InVision Craft data symbols in an external library, and when a user uses them with Craft Duplicate, it will fill in dummy data automatically.
• You can nest external symbols into local ones.
• You can have two separate libraries with matching symbols and components. One for wireframes. One for high fidelity. You can override between LIBRARIES instead of just between symbols.
• Libraries can be your own personal Content Generator. Make a library containing only list items. Or only avatars. Or only charts. Design work can now be distributed and shared across a design team. Evan can do the charts. Jon can do the UI. Andy can do the branding. Illustrator can do their work and make changes without disrupting the UI designer. All files can talk to each other.
• Files are no longer bloated with hundreds of un- or under-used symbols.
• You can make a library of artboard symbols (holy sh*t). This is like sticker sheet Heaven.

Summary

Needless to say, this is a HUGE new feature that will make a very positive impact for design teams of all sizes.

It couldn’t be easier to use, so go play with the beta to start learning how it works. You’ll be a pro in about 3 minutes.

While you’re waiting for the public release of Sketch 47 (I reckon they’ll be doing at least a few weeks of beta testing on this one), go grab yourself a copy of the UX Power Tools Design System(s). They work perfectly with Libraries, and your design team will achieve a level of speed and consistency that you didn’t even know what possible.

UX Power Tools

When I’m not writing about external libraries, I’m working on Sketch design tools at UX Power Tools to make you a better, more efficient designer.

Follow UX Power Tools on Twitter
Follow me on Twitter

Sketch Libraries: How they work, and the crazy stuff you can do with them was originally published in UX Power Tools on Medium, where people are continuing the conversation by highlighting and responding to this story.