Written by Praneeth Kawya Thathsara, Founder of UIAnimation & MotionDesignSystem
We all know the value of a well-built design system for digital products. Yet when I took on the challenge of creating and documenting the complete motion design system for our product, I was surprised: apart from a few examples of specific components, there are almost no comprehensive references or guides on how a motion design system should be built, delivered, and maintained.
After discussing with designer friends and colleagues, I discovered that many startups — and even large companies — don’t standardize their animations. In many cases developers “hack their way” through implementing animations to match designers’ intent.
Using a standard motion design system can benefit your business in meaningful ways:
Much shorter animation development time
System-wide motion consistency
Faster decision-making when designing new animations
In this article I’ll walk you step by step through how I created and delivered our motion design system — how we built it, documented it, handed it off, and now maintain it.
(Note: This is not a guide on how to design motion graphics beautifully. Instead, it’s a manual on how to document, maintain, and handoff animations to development teams.)
The Anatomy
Just like with atomic design, each complex animation is built by combining organisms, molecules, and atoms. Developers can create “classes” (or tokens) for each element and reuse them when building new animations. Classes and tokens ensure consistency, faster development, and make system-wide modifications much easier.
Step 1 — Defining Standard Duration Tokens
The first thing we do is define a set of duration increments, and assign them tokens. A token is the name we give to a particular time-unit. Just as “H1” might be a token for a bold size-48 headline, “F2” (for example) could be a token for 200ms. Both serve the same purpose: maintain consistency and enable modification across the whole system.
→ Wherever you define the duration for an animation, you’ll use the token rather than a raw numeric value.
Here’s an example of a token chart:
(Names can also be descriptive words, like “fast”, “ultra-fast”, “medium”, etc.)
In some cases we’ll want to use “dynamic durations” — durations that vary based on travel distance or size of the element. Example: “50 ms for every 10% of viewport travelled”.
Step 2 — Defining Standard Easing
Next, define standard easing values for all our motion types. The best practice is to have at least:
Entrance easing (easeout)
Exit easing (easein)
Standard easing (easein-out)
Linear easing
These are defined as part of your system, with tokens and naming, so they can be reused rather than re-specified case by case.
Step 3 — Defining Basic Animations
Now we define basic animations — transitions involving one or two properties (e.g., opacity, position). These basic animations become the building blocks for more complex ones. By standardising them, developers and designers share a common language.
Step 4 — Defining Animation Patterns
Animation patterns are combinations of basic animations. They too have predefined easings, durations, and naming conventions. For example:
“SlideIn-Up-5” might combine a translate up 5px with fade in
“Elevate-Up” might combine a movement up and drop-shadow change
By assigning classes (or tokens) to each of these patterns, you can reuse them easily. This reduces decision fatigue and ensures consistent behaviour.
Documenting Animations
For our handoff and documentation we found the easiest approach is a diagram chart. Here’s how:
In your design tool (Figma, Sketch, XD) create a symbol (or master component) for the chart layout. Leave space for animation labels.
Use resizing constraints so the chart can stretch or shrink as needed.
Build bars representing each duration increment (from Step 1) and label them with the corresponding token.
Create a symbol for the component + animation label, so you can reuse it across documentation.
For more complex animations, attach a short MP4 or animated preview of the motion so developers/designers can see exactly how it should behave.
Putting It All Together: Example 1
Let’s take a typical card rollover animation of a UI element and document it via the system.
Scenario:
Card’s background moves up 5px and its drop shadow changes
Card’s content moves up 5px
Disappearing content moves up and fades out
Entering content moves up and fades in
Using our tokens and classes:
Card’s BG: Elevate-Up (animation pattern)
Card’s content: Move (basic animation)
Disappearing content: SlideOut-Up-5 (pattern)
Entering content: SlideIn-Up-5 (pattern)
Then you chart the delay and duration for each animation via your diagram bar. If the component name alone is insufficient, you can add a visual guide / screenshot to clarify start and end states.
Putting It All Together: Example 2
A more complex example: tabs transition animation (switching tabs in a UI).
Slider (black underline) moves left/right
Exiting tab content: fades out to the left, ease-in
Entering tab content: fades in from the right, ease-out
By throwing these into your chart and applying your predefined tokens and easings, you maintain consistency across all tab transitions.
More Consistency — Fewer Charts
When writing the documentation, aim to cover as many use-cases with as few variables as possible. E.g., you might use the same rollover chart for all types of buttons and links, and the same pop-over menu chart for all kinds of pop-ups.
✨ What’s New: Recent Updates & Best Practices
Since the original article, the industry has evolved. Here are updates worth incorporating into your motion design system:
- Physics-Based Motion Tokens
For example, the Material Design 3 system now uses a physics-based motion system: springs defined by stiffness, damping and initial velocity, rather than just static easing curves.
Material Design
This means you can have motion that feels more natural and adaptive (e.g., overshoot, bounce) but still controlled via tokens.
- Two Tiers: Standard & Expressive Motion Styles
Large systems (e.g., Carbon Design System from IBM) distinguish between productive (subtle, efficient) and expressive (dramatic, branded) motion.
v10.carbondesignsystem.com
+1
This enables you to decide when to use everyday motion vs. high-impact motion (brand moments, hero animations).
- Accessibility & Reduced Motion Support
Inclusive design now more firmly requires support for users sensitive to motion (vestibular issues, low vision, etc.). Systems such as Fluent Design System emphasise providing “no motion” or reduced-motion versions as part of the guidelines.
Fluent 2 Design System
- Audit & Governance Process
Research emphasises that building a motion system should start with an audit of existing animation patterns, usage, deficiencies, and inconsistencies.
DesignSystems.com
+1
In addition, define motion principles (brand-aligned objectives) that help govern when to use motion and how.
Webflow
- Cross-Platform & Token Implementation
Modern design systems emphasise tokens not only for duration and easing but also for motion direction, travel distance, and context (micro-interaction vs macro-transition). These tokens then map to code (CSS variables / design tokens) and design tool symbols — ensuring implementation alignment across design → dev.
Carbon Design System
+1
- Dynamic Duration Based on Travel/Distance
Rather than fixed durations alone, some systems define dynamic durations — e.g., duration proportional to distance moved or percent of viewport travelled (as you described in your original). This approach yields more natural motion across varied contexts.
Framework Recap: Motion Design System (Updated)
Here’s an updated checklist you can adapt:
Audit existing animations: catalogue where animations exist, how long they are, how they behave, and where inconsistency shows up.
Define guiding principles for motion (brand-aligned): what is the purpose of motion in your product (affordance, feedback, delight, navigation).
Set up tokens: durations, easings, directions, travel distances — and distinguish tiers (standard/expressive).
Establish basic animation atoms (fade, slide, scale, move) with tokenised values.
Define animation patterns/molecules that combine atoms (e.g., slide-in + fade). Assign classes / names.
Map higher-level choreography/organisms: screen transitions, component states. Use your tokens + patterns.
Document & handoff: chart durations, label easing, attach previews, provide code snippets or design tool variants.
Support accessibility / reduced motion: provide alternate flows for users who need simplified motion.
Governance & maintenance: keep your motion system up to date, with audit cycles and version control. Make it part of your design system’s living documentation.
Implementation: ensure tokens map to code (CSS/JS), design tool variables (Figma/Sketch), and developers/designers reference the same source of truth.
Final Thoughts
Motion isn’t just decoration — it’s a functional dimension of your user interface: giving feedback, guiding attention, clarifying transitions. But unless you standardise it, you’ll end up with inconsistent, ad-hoc animations that degrade your user experience and slow down delivery.
By establishing a motion design system — one built on tokens, patterns, documentation and accessible governance — you’ll gain faster development, consistent behaviour, and a more polished, professional product.
Need a Motion Design System for Your Product?
📩 DM me or email: uiuxanimation@gmail.com
I help brands build scalable, professional, future-ready motion systems tailored to their identity.
Top comments (0)