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:
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.
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.
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.
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.
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 -
Artboard name: Android/Cell/Clipboard double cell
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.