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