Guidelines and animated assets for Facebook’s iconography system. The goal was to establish a cohesive motion language that enhances usability, communicates feedback, and adds expression.
Motion System
Animation principles and assets across three categories: Utility, Expressive, and Educational. Each category was designed with a distinct purpose while maintaining consistency across the system.
Utility
Functional animation that reinforces feedback and clarifies system state changes. Motion was used to improve responsiveness and make interactions feel more immediate and understandable.
Expressive
Expressive animation that adds personality and delight to key product moments. Designed to feel lightweight and intentional without distracting from usability.
Educational
Instructional animation assets and motion patterns that help communicate actions, gestures, and interaction outcomes. Motion guides attention and improves comprehension through movement rather than additional UI complexity.
Work Impact
Created lightweight animated vector assets optimized for implementation across platforms and surfaces, along with motion guidelines that enabled teams to expand the inventory while maintaining consistency across the system.