Building Motion Foundations for Facebook
Defining the motion principles and practical guidance that made Blueprint useful across Facebook product teams.
Company: Meta
Role: Product Designer
Launch: 2024
Expertise: Interaction Design • Motion Systems • Design Systems
Context
Facebook's existing design system, FDS, had limited adoption across product teams. Its documentation lacked foundational principles, clear examples of what to do and avoid, and deep integration with components, assets, and code.
The Design Foundations team reimagined the system as Blueprint. I led the Motion chapter and also contributed to Spacing and Grid.
Challenge
Motion was becoming a dedicated discipline within Facebook's design system for the first time. The work needed to turn abstract principles into practical guidance that designers and engineers could confidently apply across products.
Motion Foundation
I defined principles for transitions, interaction, timing, easing, and reusable motion tokens to support consistent behavior across Facebook.
Instead of prescribing individual animations, the guidance used adaptable examples and patterns.
Designing for Adoption
Blueprint connected principles with components, assets, code, and implementation guidance. Clear examples gave designers and engineers a shared language for applying the system across products.
Introducing Blueprint
To introduce Blueprint across the organization, I led the creative collaboration with The Furrow, providing assets, art direction, and feedback throughout production of the launch film.
The film communicated the system's purpose and showed how Blueprint could support product teams.
Impact
Within months of launch, adoption grew from approximately 30% to 80% across Facebook product teams.
Blueprint became a cohesive reference for product design, with motion established as a dedicated pillar of the system.