Skip to main content
Basics6 min readNovember 2026

How do I hand off animations to developers?

Short answer

Give developers the exact values, not just a video: durations, easing curves or spring settings, delays, the states involved and what triggers each change. The most reliable handoff is a runtime file (Lottie, Rive or ExodeUI) that plays the designed animation directly, so nobody has to rebuild it. For coded animations, share a spec plus a prototype.

Core Takeaway

  • A video shows the feel but hides the numbers
  • Spec every transition: trigger, duration, easing or spring, delay, properties
  • Name states and inputs the same way designers and developers do
  • Motion tokens keep values consistent across the product
  • Runtime files remove the rebuild step for complex motion

On r/UXDesign and r/UI_Design, "how do you hand off animations?" is a recurring thread. The common pain is that developers receive a nice video and guess the numbers.

What a good motion spec contains

For each transition: what triggers it (tap, hover, data loaded), which elements change, which properties (position, scale, opacity, colour), the duration, the easing curve (as cubic-bezier values) or spring settings (stiffness, damping, mass), delays and stagger, and what happens on interruption.

Use shared names

Name states the way the code does: idle, loading, success, error. Name inputs as the data they represent: isLoading, progress, onSuccess. This avoids a translation step.

Motion tokens

If your product reuses the same timings, store them as tokens such as duration-fast: 150ms, ease-standard: cubic-bezier(0.2, 0, 0, 1). Developers reference tokens instead of copying numbers.

Ship the file instead

For complex, multi-state motion, the cleanest handoff is no rebuild at all. Lottie hands off a played animation. Rive and ExodeUI hand off an interactive file with a state machine that developers drive with inputs. ExodeUI files are readable JSON, so developers can review changes in git. We make ExodeUI.

Review together

Check the implementation side by side with the design on a real device. Small easing differences are easy to miss in a browser on a fast laptop.

Frequently asked questions

Is a screen recording enough for handoff?

It helps show the feel, but developers also need the exact values and triggers.

How do I spec a spring animation?

Give stiffness, damping and mass, or response and damping fraction for SwiftUI, plus which properties use it.

Can Figma hand off animations?

Figma prototypes show transitions and some values. Complex motion still needs a spec or a runtime file.

Who owns motion, design or engineering?

Both. Designers own intent and values; engineers own performance and integration. A shared file helps.

Related Guides & Examples

Hand off a file, not a video

ExodeUI files carry states, timing and springs into React, Flutter, SwiftUI and more.

See how it works
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 →