Designing Animated Iconography for Facebook
Defining a scalable motion language and implementation framework for iconography across Facebook.
Company: Meta
Role: UX Motion Designer
Launch: 2025
Expertise: Motion Systems • Design Systems • Animated Iconography
Context
Animated icons and illustrations were already appearing across Facebook, but teams lacked a consistent way to design and implement them.
Building on Blueprint, I defined a motion language for functional feedback, expressive product moments, and interaction guidance.
Challenge
The system needed to support diverse product contexts while keeping animated assets cohesive across platforms, surfaces, and levels of visual complexity.
Motion System
I organized the language around three categories: utility, expressive, and educational, each with a distinct role and shared behavioral principles.
Utility
Utility animation reinforced feedback and clarified changes in system state, making interactions feel immediate without adding unnecessary visual complexity.
Expressive
Expressive animation added personality and delight to key moments while remaining lightweight and secondary to the primary interaction.
Educational
Educational animation communicated actions, gestures, and outcomes through movement, guiding attention while reducing the need for additional UI or written explanation.
Designing for Scale
I created production-ready vector assets and guidelines for integrating them across platforms and surfaces.
The framework supported everything from monochrome utility icons to higher-resolution expressive assets and animated illustrations.
Impact
The work gave Facebook teams a consistent framework for functional, expressive, and educational motion.
Reusable assets and guidance allowed the inventory to expand across products without losing cohesive behavior.