Prototype Animations: Guiding Users Between States

Why it exists

Static mockups show what a UI looks like, but not how it feels to use. Animations were created to bridge this gap, simulating the dynamic feedback users get from a real app and clarifying the spatial relationships between different screens and components before any code is written.

The mental model

Treat animations as a narrative tool. They explain the 'how' and 'why' of a state change. A 'Dissolve' suggests a change in the same context, while a 'Push' or 'Move' suggests navigating to a new, distinct context. The animation choice communicates the underlying structure of your app, building a spatial map in the user's mind.

How it works

In Figma, you connect two frames with a prototype interaction and select a transition type. 'Instant' is a simple jump. 'Dissolve' fades between frames. 'Move', 'Push', and 'Slide' create directional motion, differing in how they treat the original frame (stationary, pushed away, or dissolving). The most powerful is 'Smart Animate', which finds matching layers between frames and automatically animates changes to their properties like size, position, and color. You can further refine all transitions with duration and easing curves.

When to use it

Use animations to confirm user actions, guide focus, and establish a spatial hierarchy. A 'Move In' from the right is great for a forward navigation flow. 'Smart Animate' is perfect for interactive components like dropdowns, toggles, or expanding cards. 'Push' is ideal for simulating swiping gestures in a carousel or page stack.

When not to use it

Avoid animations that are slow, distracting, or spatially illogical. Don't use a 'Push' transition for a modal dialog that should appear on top of the current view; a 'Dissolve' or 'Move In' from the bottom is more appropriate. Overusing complex animations can make a prototype feel sluggish and obscure the core user flow.

One canonical example

To create a 'swipe to next page' effect, you link Page 1 to Page 2. For the transition, you select 'Push' with the direction set to 'Left'. When the user interacts with the hotspot, Page 2 will slide in from the right, pushing Page 1 off-screen to the left, perfectly mimicking a native swipe gesture.