Using Sketch Libraries - Best Practices

(originally posted on Medium)

A few months ago, my team and I did significant research to determine what was the best way to integrate our design system into Sketch. How could we make all our symbols work seamlessly? A ridiculously daunting task, as many of you know. We looked at, and Sketch. Bugs, dependability, and control ultimately led us to create a template file with Sketch with all our symbols.

With the addition of Sketch Libraries, gone are the days of design templates and third-party tools. Although there is some setup required to fully optimize your library, I promise you’re going to want to do this. Here’s what I did for CircleCI.

I’ll reference my previous post, Dynamic Icons in Sketch, as a building block. Previously, all the symbols were in one file. Instead, we’re going to separate out the colors and icons and make sure our Icons Library is using the Color Library.

Start With Your Colors

  1. Create a new Sketch File, I named mine, Colors.
  2. In the Symbols Page, create as many symbols as you need for your colors. Let’s say you have five, you’ll need 5 — 100x100px symbols with a rectangle or path of the appropriate set of colors. It doesn’t really matter the size, so long as they’re all the same.
  3. Your colors are done. Now, just follow the instructions to add colors to your Sketch Symbol Library. Sketch > Preferences > Libraries > Add Library…
I chose to name my colors @color-name to differentiate them on the overrides dropdown list.

Adjust Your Icons

To make your icons dynamic, again, reference my previous post. As you see below, we’re using the color symbol as a mask over the icon shape. The only adjustments that need to be made with the additions of Libraries are the following:

  1. When adding the colors to your icons, make sure you’re pulling from your newly created Colors Library.
  2. Make sure every color symbol has the symbol library icon with the interlocking ovals.
  3. Now, when you’re using another file you will be using the proper overrides from your Colors Library.

Taking it to the Next Level

So, we should have two Libraries: Colors and Icons. These symbols are automatically built into any Sketch file you create. I used this organization to our advantage by breaking each of our components into their own Symbol Library. I’ve added Breadcrumbs, Buttons, and even a wireframing/flow tool. Our library is evolving as we redesign, but here’s a little glimpse to inspire you.

Michael SpiegelComment