Creating a Design Library in Sketch

How do you create a design library in sketch?

The term design system is synonymous with design/component libraries. They shouldn’t be – design libraries are PART-OF a design system, not the same thing.

Which is why tweets like this are becoming more and more popular.

So in this post I’m going to show you how a design library using Sketch might actually work should you give it a go within your design team. Other posts have highlighted how it works as one person managing the design system – but that’s not why they were created. Nor is it smart or scalable within a team.

Like any good recipe these are thing you’ll need.

2+ plus designers
Dropbox or Google Drive
Sketch & Sketch.cloud

We know that Sketch allows you to create symbols – which are artboards that are repeated within a design. Change anything on an artboard within a design (artboard on an artboard – think matrix) and it’ll change on all your files where it’s used.

Example of Sketch symbols

Great for consistency.

To be able to share these symbols with your various files, say if you were working in an organisation and creating multiple assets a day – you need to sync your file to the cloud.

Sketch.cloud that is.

Now there are two things I usually do in order to get these shared not just with other designers in the team, but also to the developers who need to understand how these styles look and translate to HTML/CSS

  1. Sync to Sketch Cloud (for other designers)
  2. Sync to Invision using Craft (for developers, and client)

You can do this quite quickly, so it pays to do it often.

So now you have your file synced up for other designers and developers to see. You’ll need to set up your symbol library.

Sketch is currently working on this feature for teams, however, to get it working right now you will need to upload a Sketch file with JUST your commonly use symbols or UI elements to DropBox or somewhere you can locate this file from your ‘Libraries’ tab within preferences.

Team Library - Design system linking design ui libraries.

Next, you’ll add your new library and use them in your projects!

Easy right?

If there are any changes or additions to the UI style guide, you’ll do them by opening your Sketch file within Dropbox. If notifications are turned on within your team, you’ll be able to see exactly when the library is being updated.

Teams like Atlassian create up to 15 different libraries to cover fonts, colours and modules, making it easier to use and reduce conflicts when working on the same file.

Author avatar
Tania
https://taniarichardson.com
15 years as a digital designer. Author and Director of Richardson Creative, that helps start-ups and large organisations use design and data to design the best online experience for their business.