Timeline vs state machines
Understand the difference between timeline-style Figma to Lottie export and interactive dotLottie state machines.
Most animation exports create a timeline: the animation starts, plays through time, loops or stops, and does not need user input to decide what happens next.
Interactive Figma exports are different. They can become a dotLottie state machine, where user input changes the state of the animation.
Timeline-style animation
Timeline-style animation is best for:
Loading animations.
Success or error feedback.
Logo loops.
Simple UI transitions.
Linear onboarding moments.
Preset, multi-frame, and most prototype flow exports behave like timeline-style animations. Prefer dotLottie for smaller files and modern playback; use Lottie JSON only if the destination requires legacy lottie-web compatibility.
State-machine animation
State machines are best for:
Buttons with hover and press states.
Toggles.
Interactive icons.
Components that react to click, hover, press, or timed transitions.
State-machine behavior must be preserved in .lottie. Lottie JSON cannot carry state-machine interactivity, themes, or motion tokens.
Designer mental model
Timeline animation is like a movie clip: press play and time moves forward.
A state machine is like a component variant system with rules: the animation can move between states when an input happens.