Skip to main content
LanguageEnglish
Physics & Tokens4 min readOctober 2026

What are motion tokens and how do they work in design systems?

Short answer

Motion tokens are named design-system values for animation: durations, easing curves, spring settings and sometimes distances. Instead of writing 300ms ease-out in every component, teams use names like motion.duration.medium or motion.spring.gentle, so motion stays consistent and can be changed in one place.

Core Takeaway

  • Motion tokens store timing decisions: duration, easing, spring stiffness and damping
  • Name them by purpose (enter, exit, emphasis) or size (short, medium, long)
  • Keep a small set: a few durations and a few curves or springs
  • Include a reduced-motion variant for accessibility
  • Store them in the same token pipeline as colour and spacing

Design systems already use tokens for colour, spacing and typography. Motion tokens apply the same idea to animation. They turn decisions such as "small elements move quickly and settle gently" into named values that every designer and developer uses.

A typical set includes durations (short, medium, long), easing curves (standard, enter, exit) and, increasingly, springs defined by stiffness, damping and mass. Springs are popular because they feel natural and handle interruptions well in code.

Naming matters. Names based on purpose, such as motion.enter or motion.emphasis, are easier to apply correctly than raw numbers. Keep the set small. If every component gets its own curve, the tokens stop doing their job.

Accessibility belongs in the tokens too. Define what happens when the user turns on reduced motion, for example shorter fades instead of large movement, so every component handles it the same way.

Tokens are usually stored in JSON and turned into CSS variables, Swift, Kotlin or JavaScript by a token build tool. Our free Motion Token Generator produces a starter set you can adapt.

Frequently asked questions

How many motion tokens do I need?

Fewer than you think. Three or four durations and two or three easing curves or springs cover most products.

Should motion tokens use springs or durations?

Both can work. Springs feel more natural for interactive and interruptible motion; durations are simpler for fades and CSS transitions.

How do motion tokens handle reduced motion?

Define alternative values, such as shorter or opacity-only transitions, that apply when the user has reduced motion turned on.

Can Figma store motion tokens?

You can store numeric values in Figma variables, but how they connect to prototype transitions is limited. Most teams keep the source of truth in a token file.

Related Guides & Examples

Generate a starter set of motion tokens

Pick durations, easing and springs, preview them, and export tokens for CSS and JSON. Free.

Open the token generator
ExodeUI

EXODEUI DESKTOP

A little space for good ideas.

Choose your platform to get the official ExodeUI installer.

Looking for Intel Mac or other builds? Explore the web studio or check all download options.

Prefer the browser? Try for free in your browser →