Stop 05 · Wireframing & PrototypingTopics · 7/9

Prototyping Interactions & Transitions

In short

Motion tells people what just happened. A sheet sliding up from the bottom says 'this is on top and can be dismissed'. Good transitions explain; random ones just look busy.

Adding realistic transitions (slide, fade, smart animate) between prototype screens — making a click-through prototype feel closer to the real, animated product experience.

The jaadu in a magician's cape passes a shiny coin smoothly from one hand to the other.

Think of it like this

A magician's hands

A good magician moves the coin smoothly so your eyes follow it from one hand to the other. If it just vanished, you'd feel lost. UI transitions guide the eye the same way, showing where things went.

Watch it happen

Anatomy of a Figma interaction

Trigger

Action

Destination

Animation

Easing

1/5Trigger: what starts it. On tap, on drag, while hovering or after a delay.

The big ideas

What you need to know

Smart animate

Figma animates layers with matching names between two frames, so a card can smoothly grow into a full page.

Overlays

Menus, sheets and dialogs open as overlays on top of the current screen instead of replacing it.

Keep it short

Most UI transitions feel right in a few hundred milliseconds. Long animations make apps feel slow.

Respect reduced motion

Some people get dizzy from motion. Products should tone it down when users turn on reduced motion.

See it in code

Walk through the code

css

1.sheet {2  transform: translateY(100%);3  transition: transform 250ms ease-out;4}5.sheet.open {6  transform: translateY(0);7}8 9@media (prefers-reduced-motion: reduce) {10  .sheet { transition: none; }11}

1/3The sheet starts below the screen and will animate its position over 250ms with ease-out.

A bottom sheet sliding up, the way a developer would build your 'slide in from bottom' transition, with motion turned off for people who prefer less.

Save yourself the pain

Common mistakes

Oops

Using a different fancy transition for every screen.

Do this instead

Pick a small set of transitions with clear meanings and reuse them consistently.

Oops

Slow 800ms animations to show off.

Do this instead

Keep most transitions short. Motion should help understanding, not delay the user.

Your mission

Animate a bottom sheet

~30 min

Quick check

Why does a bottom sheet usually slide up from the bottom instead of just appearing?

Go deeper

1Add a smart animate transition between 2 states of the same component.
2Experiment with different transition types and note which feels most appropriate for a given interaction.
3Learn not to over-animate — transitions should clarify, not distract.