Facebook-logo-Tim-Rosenberg

Facebook Design Systems

Design System

Building Design Systems at Scale

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim adminim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex eacommodoconsequat. Duis aute irure dolor in reprehenderit in voluptatevelit essecillum dolore eu fugiat nulla pariatur.

Facebook-design-system-Tim-Rosenberg-Group-Screenshot

Project

Role

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim adminim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex eacommodoconsequat.

Background

Welcome to the Facebook Book Design System

The Facebook Design System is a comprehensive framework that provides designers and developers with a unified set of design guidelines, components, and resources. It ensures consistency, promotes collaboration, and enables efficient creation of user-centric experiences across Facebook's diverse range of products and platforms.

Here is how it is structured

Facebook-design-system-Tim-Rosenberg-Token

Atomic Tokens

Firstly, FDS begins with atomic tokens. These are parameters such as:

  • Typography
  • Color
  • Spacing
  • Corner radius

These atomic tokens are then used as the core building blocks for components.

Facebook-design-system-Tim-Rosenberg-Primitive

Primitive Components

Primitives components are assets that are made with the smallest possible atomic tokens. These are single-function components that perform a specific role.

Facebook-design-system-Tim-Rosenberg-pattern

Pattern Components

Pattern components are created from multiple primitive components. This collection of primitive components represents a single specific entity in the data architecture that may contain multiple attributions, actions or properties that are represented by each primitive component.

Facebook-design-system-Tim-Rosenberg-surface

Surface Component

A surface component is a collection of pattern components are combined to create a full section or entire screen. This is a single-specific product that may contain multiple entities and navigation routes.

Our Goal

Move Fast & Break Things with Scalable Infrastructure

Facebook's "Move fast and break things" motto created design debt by prioritizing speed over consistency and long-term maintainability. However, the mindset has shifted to "Move Fast With Stable Infrastructure." The goal of the design system is to build scalable design infrastructure through accurate and high-quality systems, reducing design debt.

PRIMARY GOAL

Build scalable design infrastructure through an accurate and high-quality design system.

PRIMARY GOAL

Increase time-to-ship by providing designers with ready-to-use assets, eliminating the need for recreating designs from scratch.

User Persona

Product designers at Facebook

The target user persona for the Facebook design system is product designers who work within the Facebook ecosystem. It aims to provide them with comprehensive design resources, guidelines, and components to streamline their design process, ensure consistency, and empower them to create cohesive and user-centric experiences across Facebook products.

PSYCHOGRAPHICS

CARES ABOUTS

Focusing on high-level user problems to improve the Facebook App.

FRUSTRATIONS

Wasting time on lower-level tasks such as recreating screens that are already in the Facebook App because the asset is out of date in the design system.

Principles

Our north star in building the Facebook Design System

The Facebook design system adheres to a set of principles to ensure its quality and ability to cater to our diverse global user population. These principles guide the development of a high-quality design system that is accessible, inclusive, and user-centric.

Facebook-design-system-Tim-Rosenberg-accuracy-new

Accuracy

The Facebook Design System must be up to date to provide designers with accurate UI standards, matching design assets, and ensure alignment with engineering code. This promotes consistency, reduces errors, and streamlines collaboration between design and engineering teams.

Consistency

Consistent UI standards in the Facebook Design System, including design tokens like color, typography, and spacing, are crucial. They ensure a cohesive visual experience, maintain brand identity, simplify design implementation, and enable efficient collaboration across different products and platforms.

Facebook-design-system-Tim-Rosenberg-iphone

Inclusivity

Considering diverse populations with different languages and disabilities in the Facebook Design System is vital for inclusivity, accessibility, and ensuring a positive user experience for all users.

Designs are optimized for:

  • Diverse languages with overflow support and right-to-left layout orientation for languages such Arabic and Hebrew.
  • Diverse accessibility needs with WCAG-Compliant color contrast and screen reader specification
  • Data-lite experiences for users with limited access and budget to internet data.
Facebook-design-system-Tim-Rosenberg-surface

Scalability

Building the Facebook Design System in a scalable way with a scalable Figma component architecture is crucial to efficiently update the hundreds of components. It enables consistent updates, streamlined maintenance, and ensures that changes can be implemented seamlessly across the system, saving time and effort for designers and developers.

Addressing the design system needs on a bigger scale.

As the Facebook product expands, the design system must evolve accordingly. Updates to the Facebook Groups section of the design system are essential to ensure compliance with accessibility standards, privacy regulations, and the universal Facebook Style guidelines. This ensures a consistent and inclusive experience for users across all aspects of Facebook Groups.

Process

Stakeholder workshop facilitation

To initiate the project, I facilitated a workshop with stakeholders, collaborating to identify priority areas that require focused attention and aligning on the project's key objectives.

Component prioritization

I collaborated with product managers and design program managers to establish alignment on priorities for the design system components.

Road map planning

I utilized Asana to create a roadmap, assigning priorities and timelines to components. I also provided weekly status updates to ensure transparency and keep the team informed.

Deliverables

File Architecture

To ensure efficient maintenance of the design system, I developed a centralized index file containing component metadata, status, shipped date, and point of contact for each component. This information was then propagated to the design system library files for iOS, Android, Web, and Android Lite, enabling consistent updates across all platforms.

Quick access hub

By conducting research on designers' needs, I identified the essential resources they required access to. To streamline the process, I developed a set of shortcuts and quick links that provide convenient access to each design library and design system resource, ensuring designers can quickly find the information they need.

Meta data components

To enhance component management, I created "meta data" components with status, point of contact, brief descriptions, and shipping dates. This enabled comprehensive tracking and provided a centralized overview of each component's status and relevant details for effective collaboration and maintenance.

Site map components

To enhance visual navigation within the design system's information architecture, I developed a site map component. This component allows users to quickly scan the entire design system and easily jump to specific design components, enabling efficient exploration and seamless access to relevant resources.

Detailed variant assets

To ensure comprehensive coverage of component states, I created variant options that accommodate various scenarios. These variants encompassed states such as user roles, scroll states, and privacy settings. By considering and addressing these diverse states, the design system provides a more robust and adaptable solution for different user interactions and contextual requirements.

These variants are very detailed. For example:
The homepage for Groups has 144 variations.

Here is an example of the total variations for Groups Homepage

3

User Roles

X

2

Privacy Settings

X

3

Scroll States

X

2

Color Themes

X

4

Platforms

= 144

Total variations

Design guideline articles

In collaboration with engineering, product managers, and designers, I worked on writing comprehensive guidelines and documentation within the design system. This partnership ensured the inclusion of valuable insights and expertise, resulting in clear and informative resources that support designers in effectively utilizing the design system's components and principles.

Impact

Measurable impact

In collaboration with my manager, I leveraged Figma's Design Library analytics to collect data on the utilization rate of new components in the design system. Additionally, I calculated the time saved by eliminating the need for designers to recreate design assets. This data-driven approach provided insights into the effectiveness and efficiency of the design system implementation.

28%

Increase in design-to-ship time for sprints that utilized the new design components.

750

Staff hours saved by not having to recreate the design assets.