Building Motion Foundations for Facebook
Building the motion foundation and implementation guidance that helped transform Facebook's design system into a cohesive, scalable resource for 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, practical do-and-don't examples, and deep integration with components, assets, and code.
The Design Foundations team reimagined the system as Blueprint, creating a comprehensive set of design and implementation guidelines for teams across Facebook.
I led the creation of the Motion chapter, defining how motion should be designed and implemented while also contributing to the Spacing and Grid documentation.
Challenge
Motion was becoming a dedicated discipline within Facebook's design system for the first time.
The challenge was to translate motion principles into practical guidance that designers and engineers could confidently apply across products while integrating seamlessly with the broader design foundations.
Motion
I established the motion foundation by defining principles for transitions, interaction, timing, easing, and reusable motion tokens that supported consistent product behavior across Facebook.
Rather than prescribing individual animations, the guidelines provided examples and reusable patterns that teams could adapt to a wide range of product experiences.
Foundations
Blueprint transformed fragmented design documentation into a cohesive reference connecting foundational principles with implementation.
Clear examples, do-and-don't patterns, and consistent documentation gave designers and engineers a shared language for applying the system across products.
Launch
To introduce Blueprint across the organization, I led the creative collaboration with The Furrow, providing assets, art direction, and feedback throughout the production of the launch film.
The film communicated the system's purpose, scope, and benefits, helping teams understand how Blueprint could support their work.
Impact
Within months of launch, adoption of the design system grew from approximately 30% to 80% across Facebook product teams.
Blueprint established a cohesive design reference grounded in foundational principles and implementation guidance while introducing motion as a dedicated pillar of Facebook's design foundations.
Key Takeaway
Design systems scale when teams understand not only what to use, but why and how to use it.
By connecting foundational principles with practical guidance, Blueprint transformed an underused design system into a shared resource that teams could confidently apply across Facebook