Microsoft

SwiftKey Design System

I helped clean up and modernize our Figma design system.

Figma is the design tool of choice for the team at Microsoft SwiftKey and while we had a robust component library in place — it was due a refresh after completing a major project that saw us rebuild many of our controls and panels. I worked with another designer on the team to create a new, modern library system.

We use Figma because of it’s collaborative nature — which proved to be crucial during the work from home period caused by the COVID-19 pandemic. This ease of collaboration also makes it easy to share work with partner teams as there is no need to send file revisions, we can simply link them to our living Figma document.

Keyboard panel buttons from the Android component library.
Keyboard panel buttons from the Android component library.

I oversaw updating our Android component library. Many of the components were outdated or did not reflect product truths, especially so for our settings app which had undergone a massive rearchitecture and redesign. I recreated these components from scratch, ensuring they accurately represented our in-market product.

The library scales to hundreds of components and styles.
The library scales to hundreds of components and styles.

The new components also take advantage of many new Figma features, such as Auto Layout, that were not available when the team originally switched to this tool.

I also spent time providing new iconography for SwiftKey, partnering with the Microsoft Design System Studio to craft a custom set of Fluent Icons specifically for the keyboard (see more about these on the Fluent Icons page).

Our design language contains all of the Fluent Icons needed for SwiftKey.
Our design language contains all of the Fluent Icons needed for SwiftKey.

For flexibility in theming, the keyboard design is built from a set of core “variables”. This allows a designer to update the theme of every keyboard component very easily — changing only a few main components versus having to manually adjust every item.

I organized the components themselves in a logical and neat fashion to make it quick for our designers to get going and make adjustments where needed. Each component has a light and dark style, and it is easy to switch between them using the instance picker.

Color styles, typography ramp and components are all neatly organized to make it quick and easy for our designers to get going.
Color styles, typography ramp and components are all neatly organized to make it quick and easy for our designers to get going.

Download Microsoft SwiftKey for Android or iOS.