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.