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.
It just feels like everyone is screaming the words “Design System” and won’t stop
— Horse Design Systems (@horse_designsys) May 1, 2019
In this post I’m going to show you how a design library using Sketch might actually work 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 art boards that are repeated within a design. Change anything on an art board within a design, and it’ll change on all your files where it’s used.
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 Sketch.Cloud
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
- Sync to Sketch Cloud (for other designers)
- 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.
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 Atlasssian 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.