Myles Larson

alt text goes here

Facebook Interface Guidelines

Design System


Role: Product Designer

Team: Interfaces design (~10 designers), collaborating with all of Facebook design

Status: Initial version shipped in Feb 2016

As part of the Intefaces design team, I helped build and launch Facebook’s first comprehensive design system. Until this point, Facebook's UI library was a hodgepodge of components maintained by volunteers.

In late 2015 the Interfaces design team was formed to formalize the design system and create a process for maintaining it. I joined the team early on and was part of this early push to ship a full library (note: this case study is focused on the work that I specifically contributed, not a comprehensive overview of the design system).

The inital library included the type system, color palette, iconography, and UI components. It was developed by working with individual design teams to adapt their key UI into a broader system. For example, I worked closely with the Profile, Pages, Events and Groups teams to create an "Entity Header" component that is used by each of these teams.

Entity header component explorations
Entity Header design explorations
Entity header on iOS
Entity header on iOS
Entity header on Android
Entity header on Android
Spatial model
Spatial model of Facebook's UI

We shipped the first version of the Facebook Interface Guidelines (FIG) in February 2016. It was initially distributed as one large "Master Sheet" with every component, including specs and implementation details. This was later replaced by a plugin for Sketch.

Welcome page of the FIG Master file
Welcome page of the FIG Master file
Welcome page of the FIG Master file
Welcome page of the FIG Master file
Welcome page of the FIG Master file
Welcome page of the FIG Master file

The FIG library was adopted quickly by Facebook's 300+ designers, and has since continued to grow and adapt as the foundation of Facebook's UI on every platform.