SwiftKey Design System

Over the past couple of years the SwiftKey design team has used Sketch to work on our iOS and Android products. We made the switch for a few reasons:

  • Seamless integration with Zeplin for easy communication with developers.
  • Quickly sync designs with prototyping tools like Flinto and ProtoPie.
  • Loads of handy plugins made by the community.

We realised that consistency across the products had become an issue, designers had been using different dialogs, buttons, colour, and icons. It seemed obvious that we should use Sketch libraries which was created to combat this problem. The first step was to evaluate the current state of design, to bring all of the screens and elements into one place so that we could see what we would need in our library. 

We decided to seperate the library into three parts; icons, components and colour. We created a file for each to keep the files light and more organised. Symbols from iconography and colour would then both feed into the component library. 







Here's our library in action, we use Sketch Runner to quickly navigate the libary. This allows our designers to create keyboards with a variety of options like secondary characters on keys, upper and lower case, and of course swapping out any icons in our toolbar. As SwiftKey has evolved over the years, we have created other panels for things like the clipboard, location, GIFs and emoji so it was important that our system would accommodate this too. 

Here are a few symbols from our component library. As we continue to expand it is important to ask ourselves if we need to add something new, or if we can re-use an existing component.

Component layers

Our icons are expanded shapes, masked to a colour symbol. This allows us to change the colour of an icon using overrides in the design docs. Although this makes it harder to edit icons later on, it avoids the need to unlink symbols in order to change the colour. It also ensures that the colour of an icon is picked from the colour library, which can of course be easily updated itself.

Icon layers

Useful plugins

As mentioned before, Sketch has loads of awesome plugins that can help you move a little bit faster. These are a few that I've found especially useful when creating this system. 

Sketch Runner

This is the first plugin that you'll need when using symbols and libraries. It's very similar to the spotlight function in MacOS, with a quick command (CMD + ') you'll have access to every library symbol. This also includes a small preview so you can see which one you want.

Move To Library

At first all of the symbols were in the same library before creating 3 seperate files. In this case I created a blank Sketch doc and added it to Sketch Libraries, and then used this plugin to export some of the symbols to it. It also keeps the symbol instances linked which saved me a whole lot of time.


It's good practice to keep a design file organized and that includes naming layers consistently. This is especially important when creating a Sketch library for a few reasons. Firstly, the naming of the artboard defines the structure of the symbol menu, like this -

symbol menu@2x

Artboard name: Android/Cell/Clipboard double cell

The name of your layers will show in the overrides section of Sketch when using a symbol from your library. This can quickly get confusing, so layer naming can help a lot. It's also worth noting that if you lock a layer in your symbols then it will not show in the overrides. This plugin is great for re-naming many layers at once.

Symbol Organizer

When creating a library there are many artboards and it's hard to keep them organized. This plugin works really well, especially when you have named the artboards correctly.