Z
ZedPortfolio
Back to writing
Dec 04, 2025 Journal

Motion as a Design System

Thinking about animation like typography—using consistent rules for timing, easing, and distance so every interaction feels part of the same language.

Motion as a Design System

Good motion systems feel invisible at first, then obvious in hindsight.

You notice them most when they’re missing: buttons that jump from state to state with no in‑between, panels that pop in from random directions, loaders that feel disconnected from the action that triggered them. The interface still “works”, but it doesn’t feel coherent.

Motion as language, not decoration

Instead of sprinkling animation wherever there’s empty space, it’s more useful to think of motion as a language with grammar and punctuation.

  • Tap feedback says “we heard you”.
  • Page transitions say “you’re in a new context”.
  • Loading states say “we’re working on it”.

Each of these phrases should be spoken in a consistent tone across the product. A primary button on the marketing site should move with the same character as a primary button in the app.

Defining a motion scale

Start with a very small timing scale:

  • 120–160ms for taps, toggles, and quick affordances.
  • 200–260ms for dialogs and overlays.
  • 320–380ms for page transitions and large movements.

Then pair those with a handful of easing curves:

  • A snappy curve for high‑intent actions.
  • A soft curve for hover and focus states.
  • A settling curve for large movements that need to feel calm.

Once this scale exists, designers and engineers can reference motion tokens in the same way they reference colors or type styles—motion.tap, motion.dialog, motion.pageIn—instead of guessing per component.

Distance and direction

Timing alone isn’t enough. Distance and direction matter too:

  • Elements that enter from the side should usually exit back the same way.
  • Small elements rarely need to travel more than 8–16px.
  • Larger panels can travel further, but often benefit from overlapping fades rather than huge translations.

Consistency here helps users build an intuition for where things “live” in the product.

Documenting the system

A motion system isn’t real until it’s documented. That doesn’t have to mean a heavy spec; even a one‑page reference that outlines:

  • The timing scale.
  • The easing curves.
  • A few canonical examples (tap, dialog, page transition).

…is enough to align a team. From there, every new interaction plugs into the same grid, and the product starts to feel more cohesive with every release.