Usage Guidelines
Following some basic principles when using the motion system tokens and variables lets you improve clarity, engagement, and UI efficiency.
Purposeful Usage
Dropdown menus smoothly sliding down to indicate expansion and notifications fading in and out–these animations not only enrich the user experience but also help users understand what is happening on the screen. However, animating every element can create visual clutter and become frustrating, so motion should be applied purposefully and selectively.
Right Timing
Motion duration must align with the movement, the dimensions of the element, and the context it is part of. As a rule, smaller components should animate quickly, while larger ones require more time for smooth transitions.
Context Sensitivity
Apply transitions thoughtfully based on the component’s role and importance—playful or dramatic effects work well for minor elements like switches, but not for most UI elements. Long, decorative animations for critical alerts not only delay user response, but could harm usability.
