Skip to content
Various UI components from Microsoft SwiftKey.

2020

SwiftKey Design System

Rebuilding SwiftKey's Figma libraries after the Surface Duo redesign.

I joined Microsoft SwiftKey just as the Android app was going through a significant redesign in the lead-up to Surface Duo with a more minimal UI direction, and a new set of components and layouts that would ship on regular Android too. The Figma library hadn't kept up.

Components were visually wrong against the new design, structurally missing the Duo additions, and scattered across multiple files. The base widths were also an arbitrary number that didn't match the 360px standard the rest of Fluent mobile was working to, which made cross-team reuse painful.

Duo was the forcing function. We had just done all the redesign work; now was the moment to centralize it.

I led the rebuild on the Android side, working alongside the designer who owned iOS. Together we also scaffolded the cross-platform foundations: color, typography, and the shared primitives each platform library consumed. This let us move on the platform-specific libraries in parallel without stepping on each other.

Rebuilding against the product

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

The Android library covers the keyboard surface itself and the settings app around it. Both needed rebuilding from scratch to match what was actually shipping, including the new layouts and controls Duo had introduced.

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

The rebuild was also a chance to adopt the Figma features that hadn't existed when the team first set the library up. Auto Layout was the biggest shift: components hold their visual correctness automatically as content changes, so designers stop manually nudging headers and icons to keep a screen looking right. The cost is the up-front rigor of structuring every component properly. The payoff is screens that stay aligned to the source of truth without constant tending.

Theming as a system

The keyboard's whole identity is themable, and the library had to make that fast.

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.

Every keyboard component is built off a small set of core variables: surface colors, accent colors, key shapes. Updating a theme is a matter of changing those in one place rather than touching every component on every screen. By duplicating the library, a designer can scaffold an entirely new theme in minutes and iterate inside Figma before committing to building it in our internal theming tool to see it on device.

Iconography

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

As part of the alignment work, SwiftKey adopted a custom thin weight of Fluent Icons, drawn specifically for the keyboard's lighter visual register. That work is covered in more depth on the Fluent Icons page.

Download Microsoft SwiftKey for Android or iOS.

© 2026. Hello from the UK!