How to keep design library in sync across the team? Welcome Sketch Libraries!

How to keep design library in sync across the team? Welcome Sketch Libraries!

The buzz these days is all about design systems, but design system by itself is not enough to ensure consistency through all designs. When working with design systems, the main challenges are ongoing maintenance and informing everyone about the changes.

For a long time, there wasn’t a thorough solution for designers who design in Sketch which would provide easy access to the latest styles and propagate changed assets to team members. Yeah, we had the ability to share symbols via plugins for a while (Craft’s Library), but there were too many problems, and sharing library is too important to rely on a third-party plugin.

Welcome Sketch Libraries

Sketch just made public the Sketch 47, and we finally have a document with symbols which can be used across other documents, so let’s see how to use libraries in Sketch.

1. Create a Sketch document with at least one symbol and save your document in Dropbox, Box, Sync or any other place where your colleagues have access.

2. Press CMD + comma to open Sketch’s Preferences and navigate to the Libraries tab.

3. You’ll notice there is iOS UI Design library included, but we’ll create a new library. Click on the “Add Library…” button and choose your document. Congrats, you’ve just created a single source of truth for everyone in your team.

Team members can now easily add the Library by following the same steps mentioned above and access the symbols in that file from any Sketch file.

Inserting, editing and accepting changes

Using shared library is simple and straightforward. Inserting symbols works just like inserting regular symbols, the only difference is they are not placed in your document. To insert a symbol just find your shared library at the bottom of the list on the Insert menu.

You’ll notice external symbols have slightly different icons from the local symbols to avoid confusion.

Once inserted, there are two options for editing an external symbol. You can unlink it from Library or open it in the Original document.


If you choose “Unlink from Library”, it will detach from the external library and become a local symbol in your current Sketch file.

Making changes in the original document will affect all instances of the symbol across any document which is using this library, but only if those changes are accepted. After making changes, everyone who is using this library will see “Library Update Available” badge on the top-right corner of Sketch.

Maybe Sketch crew should make that badge more prominent because it’s easy to miss. Anyhow, clicking on it will display a dialog box with outdated symbols and an option to selectively update them.

To sum up…

This feature is definitely a game changer for all Sketch users and it will change real-time collaboration permanently. What we would like to see in some of the future updates is an option to include text styles and layer styles in a library. If you’re interested in professional Magento design services, we invite you to explore our Magento Web Design Service – we’d like to help you build your next online store.

Related Inchoo Services

You made it all the way down here so you must have enjoyed this post! You may also like:

5 UX improvements for Magento checkout page design Marko Brisevac
Marko Brisevac, | 3

5 UX improvements for Magento checkout page design

Best practices for Magento product page design Zoran Vorkapic
, | 0

Best practices for Magento product page design

Our process of designing a Magento web store Kristina Orak
Kristina Orak, | 2

Our process of designing a Magento web store

6 comments

  1. Hey, thanks for this article. Very informative. I’m trying to identify the location of existing library file(s) in a Box storage environment, but I’m not having much success, though my colleagues have successfully set up libraries. I know that this is likely a Box issue, but thought that you or your team may have some insights for large teams working and accessing a common library.
    Cheers!

    1. Hey Paul, unfortunately, I don’t have insight in your Box storage environment so I can’t help you. Our team has only one folder for all libraries and subfolders for each project so it is easy to identify the location of existing libraries.

  2. So I changed directory on my gdrive where the library is located. Now all libraries are not synced – how can I manually locate the library and tell my sketch – hey – this library you could not find – is now here

    1. Hi Skali, interesting question, we just tried this and it looks like you will have to add that library again, but the good thing is symbols will be recognized so you won’t have to replace them.

  3. hi marko, thanks for sharing! I have still one question: how do you contribute new symbols to the shared library?

    1. Hi Philipp, I’m sure you know that adding new symbols to the shared library doesn’t require syncing, but I believe you were thinking about the process of adding new symbols and inconsistency issues with new elements. Our design team decided to have one responsible person for adding new elements to the library. We all can contribute with new symbols but only the library owner can add those new symbols to our library. We all hope that Sketch will work on better version control in the future to make our lives easier. We also tried Abstract for versioning, but still not completely satisfied with it.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.

Tell us about your project

Drop us a line. We'd love to know more about your project.