SwiftKey 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.
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 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).
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.