How to create a version controlled Sketch Library for your distributed team using Github
You have a pattern library, a design system, or library of symbols in Sketch. You have a team across multiple locations with multiple design files, how do you keep those designs consistent, particularly with an ever evolving library of atomic patterns?
- Stick the Sketch file on Dropbox as a single master template that everyone can use and refer to. The downside of doing this is that when it updates, none of the symbols in all of the Sketch files you’ve previously created will be updated.
- Use InVision’s Craft plugin, host your single master template on Dropbox. The problem with this is that this is not version controlled.
- Use Abstract — a great tool that will solve this problem but can be costly.
How to use Github with Sketch.
For the example below I’ll be using IBM’s Carbon design system Sketch file.
- Your team will need to download Github Desktop, install it, and create a free Github account if you don’t have one.
- Open Github Desktop and add your repo.
- Save your Sketch master library of symbols to to your local Github repo location.
- Commit your master (Don’t forget to give it a summary)
Thats it! You now have a version controlled Sketch library on Github. Now for the magic.
Adding the library to Sketch
Your team will now need to open Sketch and add the design system as a library:
You can either do this in Sketch by:
Going to Sketch > Preferences > Library > Add Library and selecting carbon-design-kit-8.0.0.sketch (or your-library.sketch) from your local repo location.
Or open carbon-design-kit-8.0.0.sketch (or your-library.sketch) from your local repo location, then in Sketch go to File > Add as library…
Now to see it in action:
Make any global changes to your master (left), commit and push them.
You’ll need to fetch an update of the master library. You can do this by fetching it in Github Desktop (below)
Once the fetch is complete you’ll notice in the top right corner of the local Sketch design file screen a prompt “Library Update Available”, click it and the following dialogue box (below) will tell you that the library symbol has been changed in your library, click “Update Symbols”.
Thats it. You and your team now have a centralised Sketch library that is version controlled and that can be updated and distributed across the team.