Creating a shared pattern library for Sketch using Abstract and Lingo

At Dropsource, we’re about to take a big step… hiring our second designer. You may be thinking, it’s just one more person, what’s the big deal? Well, hiring designer number two is the first time any team has to start dealing with the complexities of multiple designers working together on the same product. One specific complexity I’ve been thinking about is how to maintain consistency when working with someone else. After a lot of research I decided to solve this problem by creating a pattern library for Sketch that contains all of the design components we use for creating our application’s interface.

To start, I knew I had to answer three big questions:

1. How will more than one person contribute to the pattern library without overwriting each other’s work?
2. How can we make sure everyone always has access to the most up to date version of the pattern library?
3. How do we push changes to the pattern library to existing Sketch files?

After searching the web, I found many solutions that attempt to solve this problem such as Figma, UXPin, Invision Craft, traditional Git, and even the native Sketch Libraries feature. However, none of these solutions did 100% of what I needed. So after much trial and error, here is the method I came up with to create a shared pattern library for Sketch using two awesome products, Abstract and Lingo.

Let’s start by talking about Abstract. In a nutshell, Abstract is Git (aka version control) for designers. It allows you to create one master Sketch file, branch off that file to make changes, and merge those changes back in. The cool part is that it shows you every individual addition, update, and deletion made to the file and allows you (or a teammate) to review those changes before being merged back into the master file. And if multiple designers are making edits to the same file, they won’t overwrite each other’s work when their changes are merged. Magic.

So, what’s the first thing you need to do? Yup, you guessed it! Download Abstract, create your first project, and name it something like “Sketch Pattern Library”.

The thing with Abstract is that you have to open your Sketch file through their desktop app so your changes can be tracked. Go ahead and open up your “Sketch Pattern Library” project and create a Sketch file.

Once your file is created, click the “New Branch” button in the top right of the screen and name your branch.

Once your branch is created click the “Edit in Sketch” button to open Sketch.

When Sketch opens, you will see a bar across the bottom of the Sketch interface that allows you to commit changes to your branch. In other words, save your work.

For a design team, Abstract is a great way to maintain Sketch files that will be worked on by multiple designers. It’s an easy way to iterate on a single file without having to worry if you’re working on the most up to date version or overwriting someone else’s work. As it relates to this article, Abstract will be used to maintain a Sketch file that will act as the single source of truth for your pattern library, allowing your entire team to collaborate on the file without any drama.

Now you’re probably thinking “Awesome! This will make it easier for my team and I to maintain a single pattern library file, but this still doesn’t explain how I share my pattern library across multiple Sketch files and keep them in sync…”

Well, that’s where Lingo comes in.

Before we get too deep in the weeds here, Lingo is an brand management app made by the folks over at The Noun Project that acts as a single place to store assets like logos, icons, blog images, colors, etc. and keep them organized. It’s a pretty cool product on its own.

They recently released a Sketch plugin that allows you to store symbols, shared styles, and styled text in a Lingo kit and then sync them across any Sketch file your heart desires.

Now that you’ve got the inside scoop, the next step is to install the Lingo desktop app and Lingo Sketch plugin. Once that’s done, you’ll need to open Lingo and create a kit that you’ll use to store your pattern library. For consistency, I just named it “Sketch Pattern Library” like the Sketch file in Abstract.

Ok, let’s head back to the Sketch file you opened from Abstract and start creating your pattern library and syncing it to Lingo. For the sake of keeping this article short, let’s start with a simple button symbol as shown below.

With your first symbol created, save your Sketch file and then click the “Preview & Commit…” button on the Abstract bar across the bottom of the Sketch Interface.

This will bring you back to Abstract where you will name your commit, create your commit, and then merge your branch back into the master Sketch file by clicking the “Merge Branch…” button in the top right.

Side Note: If you work on a team, this is the point where a co-worker would review the changes you’ve made to the pattern library and approve or deny your changes before they are merged.

With your branch merged into the master file, click the “Edit in Sketch” button from the master file to open it as untracked. Abstract will warn you about opening your file as untracked but it’s ok to continue because we’ll only be syncing with Lingo, not making any changes. If you do need to make changes, you should close this file and create another branch in Abstract.

When you have the untracked master file is open in Sketch, start the Lingo plugin, click the “Open Lingo” button on the Lingo widget located at the bottom of the Sketch interface, make sure the “Sketch Pattern Library” kit is select, and press the “Push All” button.

After pressing the button you’ll see a pop up that prompts you to review the changes you’re about to make. If everything checks out press the “Push” button to send your button to Lingo.

Now that your pattern library is saved to Lingo you will be able to pull it into any new or existing Sketch file. So let’s do it! Create a new sketch file, start the Lingo plugin, make sure the “Sketch Pattern Library” kit is select, and press the “Pull All” button. After pressing the button you’ll see a pop up that prompts you to review the changes you’re about to make.

If everything checks out press the “Pull” button to install any symbols, shared styles, and styled text stored in Lingo into your Sketch file. And Voilà! The blue button symbol is now available in the Sketch symbols menu.

So what happens when your primary color changes from blue to green? Time to update your pattern library!

1. Go to Abstract
2. Open the “Sketch Pattern Library” project
3. Click the “New Branch” button in the top right of the screen
4. Name your branch and then click the “Edit in Sketch” button to open Sketch
5. With Sketch open change the background color of the button symbol from blue to green
6. Commit the change to Abstract and merge the branch back into the master file
7. Once your changes are merged, open your master file as untracked and push your changes to Lingo via the Lingo plugin
8. Go back to your Sketch file and pull the pattern library changes using the Lingo plugin and your button symbol will be updated from blue to green!

And that’s it! By using a combination of Abstract and Lingo I’ve put together a pretty simple process for managing a Sketch pattern library that can be used across all of our Sketch files and can scale to work for design teams of any size. Abstract to manage the master pattern library file and Lingo to sync that pattern library across all of our designs. The end result? A faster design workflow and more consistent designs across our application.

I hope this process proves useful! It sure has made my life a whole lot easier.

A few additional tips for the ambitious:

• Pull the “Sketch Pattern Library” from Lingo whenever you create a new Sketch file or open an existing Sketch file and you’ll pull in all of the symbols, shared styles, and styled text you need to start designing.  And you’ll always have the latest pattern library.
• Always make symbol changes to the “Sketch Pattern Library” in Abstract. It may sound tedious but the extra steps of branching and committing changes are what guarantee everyone on your design team has the most up to date version of your pattern library. It’s on you and your team to consciously maintain this file so it stays the single source of truth for your designs.
• Lingo allows you to push all symbols, shared styles, and styled text or only select ones. To push only selected changes, just select the artboards you want to sync and press push. I don’t always use this feature but it’s been useful for those few times I haven’t been ready to sync everything.
• It may be tempting but don’t push changes to Lingo from any design file other than your “Sketch Pattern Library”. You may end up pushing symbols that should only live in your design file and start cluttering the “Sketch Pattern Library” with unnecessary components. Additionally, this also changes your pattern library without going through the proper approval workflow in Abstract, which is important for the reasons above.
• Once Sketch Libraries supports all symbols, shared styles, and styled text the Abstract workflow is still relevant. This native Sketch feature would just replace Lingo.