Messenger Design System

Leading production design for the system behind every Messenger launch.

Role: Senior Design Manager
Year: 2020 – 2022
Scope: Design leadershipDesign systemsProduction designDocumentationDesign education

Overview

The system behind Messenger’s biggest era of change

The Messenger Design System supplies the components, styles, and patterns that every Messenger team builds with, on every platform. I managed the production design arm of the design systems team, the group that maintained and distributed the system, unblocked teams when something broke, and consulted with product designers on how it should evolve. I grew the discipline from one designer to seven. We rebuilt the Figma libraries for iOS, Android, and Desktop, shipped a library-swapping capability that partially automated iOS-to-Android translation, wrote the specs, and partnered with engineering on implementation. That work set Messenger’s pace: the rebrand, chat themes, custom reactions, interoperability with Instagram, and feature after feature beyond them, all shipped inside two years, and it all held together. Everything on this page shipped through the system; a change made once showed up everywhere.

Impact

A better product, a faster org, a stronger brand

Every screen drew on patterns the system had already worked out, states, edge cases, and accessibility included. Teams across Messenger, Messenger Kids, Instagram Direct, and Communities shipped faster because they pulled components instead of remaking them. The brand held together through a rebrand that touched every surface at once. And the work kept paying off after I moved on: the patterns we built for encrypted chats took Messenger all the way to private messages by default.

Coverage