Motion

How long should a transition take?

120 ms for a small state change, 200 ms for a sheet, a dialog or a page push, 320 ms for progress and 480 ms for a skeleton loop. Click a row to run that one on its own.

No preset reads instant. Progress Bar and Progress Ring read slow directly, so a component can name a duration without a preset, and the Components section below lists who reads what.

Which easing curve fits which movement?

Decelerate for what enters, accelerate for what leaves, standard for small changes that stay put, emphasized for hero moves and linear for loops. Duration says how long, easing says where the time goes.

decelerate and accelerate are a pair: a thing arriving slows into place, a thing leaving speeds away. emphasized is the steepest curve off the line, with about 78 percent of the distance covered in the first fifth of the time and then a long settle, which is why it carries the dialog and the page push. Never use linear for an entrance.

How do the three springs behave?

Three configurations, stated as response, damping and mass. Native code takes them as springs; on the web, sample the spring into a CSS linear() curve and run it over its response.

subtle carries motion/toast/enter and motion/toggle/state. default carries motion/sheet/enter and motion/dialog/enter.

bouncy is referenced by no preset, so it is there for a component that asks for it directly. Mass is 1.0 on all three, and response and damping are the only two things that move.

/* motion/spring/subtle: response 0.30, damping 0.90.
   Run it over its response, 300 ms. */
.toggle-handle {
  transition: transform 300ms linear(
    0, 0.0419 3.57%, 0.139 7.14%, 0.2596 10.71%,
    0.3843 14.29%, 0.5017 17.86%, 0.606 21.43%, 0.695 25%,
    0.7685 28.57%, 0.8277 32.14%, 0.8742 35.71%, 0.9101 39.29%,
    0.9372 42.86%, 0.9573 46.43%, 0.9719 50%, 0.9822 53.57%,
    0.9894 57.14%, 0.9943 60.71%, 0.9975 64.29%, 0.9995 67.86%,
    1.0006 71.43%, 1.0012 75%, 1.0015 78.57%, 1.0015 82.14%,
    1.0014 85.71%, 1.0012 89.29%, 1.0011 92.86%, 1.0009 96.43%,
    1
  );
}

The curve is the spring the Figma file plays, sampled at 29 points. subtle peaks at 1.0015 and default overshoots to 1.0152, which is the settle of a sheet or a dialog; the animated components below run both this way.

Which motion presets does the kit ship?

Seven presets, every one an alias. A preset holds no value of its own, it points at a duration, a curve and, where the platform can spring, a spring.

There is no motion/dialog/exit. Sheet ships both directions and dialog ships only enter, so the exit of a dialog has no token yet.

Which components move, and how?

The 14 components that move each name the preset they take their timing from, so retiming a preset retimes every component that reads it.

The Timing column is what each component animates with in the Figma file. The collection holds 31 variables, and every component that moves reads from it.

Which components animate their own state change?

The library holds 9 Motion / sets that play their own transition on the Figma timeline. Search “Motion /” in the Assets panel and the instance animates as is. Each has one-shot variants and a Loop for presentations, all timed from the presets above.

The sets are Motion / Toggle, Checkbox, Radio, Button, Skeleton, Toast, Dialog, Sheet and Page Push. Place an instance in a top-level frame and press play. Use a one-shot variant in a prototype and Loop on a cover or in a presentation.

One-shot variants start at 0.2 s. Loop plays the change at 0.4 s and back at 1.4 s, so a 2 s timeline loops cleanly, and the drawings above play the Loop variants that way.

Every chart except Legend animates on the same timeline. Bar raises each column 12 from a fade over 480 ms, 50 ms apart, and Line draws its current series over 600 ms on standard.

Eight example screens enter in reading order, in Light and Dark.

What should motion do when Reduce Motion is on?

Swap the movement for a fade or an instant change and keep the state change. With Reduce Motion on, the Play buttons on this page move the dot to the end of the track without animating it.

A sheet still opens, a toggle still flips and a toast still appears. What goes is the travel: a slide, a scale or a spring becomes a fade at the same duration or a cut, so the new state is visible without the reader being moved across the screen.

Looping motion such as Skeleton pulse and Spinner stops on a still frame. The animated components above rest on their end state the same way, and their Pause button stops the loop at any time.