Animation in Figma prototypes: limits, patterns, and when to stop animating

Quick answer

Figma prototypes animate between named frames and matching layers—not on a full timeline like After Effects. Smart Animate works when layer names, hierarchy, and structure align across frames; Instant, Dissolve, and Move cover everything else. For product work, cap motion at what communicates state change (navigation, expand/collapse, success feedback) and document static specs for engineering. Start from how to create a prototype for triggers; use interactive components when the motion is a component state, not a full-screen transition.

What Figma can and cannot animate

Capability	Works well	Breaks or fakes poorly
Position, size, opacity, rotation	Smart Animate between matching layers	Physics, spring chains, particle effects
Simple easing curves	Built-in ease in/out on transitions	Custom cubic-bezier per property (limited)
Hover / press on components	While hovering, On click, variant swaps	True drag physics beyond basic On drag
Overlays & modals	Open overlay, swap overlay	Complex nested scroll + modal stacks
Sequences	After delay chains on one flow	Minute-long cinematic timelines
Video-level motion	Marketing hero demos with few frames	Character animation, morphing arbitrary paths

Verdict: Figma is a UX motion sketch tool. Ship production animation specs in code or a motion spec doc—not by expecting Present mode to be the source of truth for every keyframe.

Prerequisites

• Multiple frames (or component variants) representing start and end states.
• Consistent layer names on anything that should move—rename before you wire, not after.
• A decision whether the motion is screen-level (frame transition) or component-level (variant + While hovering). Mixing both on the same element without a plan causes “works in demo, confusing in Dev Mode.”

Refresh Auto Layout in practice if animated stacks jump when padding or gap changes between frames.

Pattern 1: Smart Animate for micro-interactions

Smart Animate interpolates layers that share the same name between two frames.

Steps

1. Duplicate a frame (⌘D / Ctrl+D) so you have Frame A and Frame B.
2. On Frame B, change only the properties you want motion on (width, fill, position inside Auto Layout).
3. Keep layer names identical (Card, Title, CTA)—do not let Figma append “Copy”.
4. In Prototype, connect A → B with Smart animate and pick duration (200–400 ms for UI; shorter for hovers).
5. Present and verify nothing orphan-animates because a layer existed in only one frame.

Best for

• Expanding panels, tab indicators sliding, hero text cross-fades, button fill changes when structure stays the same.

Common mistake

Renaming layers between frames so Smart Animate dissolves everything or animates the wrong sibling. Fix: use the layers panel filter and a naming checklist before connecting wires.

Pattern 2: Dissolve and Move for coarse navigation

When structure differs between screens (new modules appear, layout reflows), Dissolve or Move in/out is often clearer than forcing Smart Animate.

Transition	When to use
Dissolve	Modal steps, wizard pages, low-fidelity flows
Move in (directional)	Mobile-style push navigation
Instant	State toggles where motion adds noise (dense admin UIs)

Pair directional moves with mobile UI frame presets so safe areas stay honest during slide transitions.

Pattern 3: Overlays for modals and sheets

Overlays keep the underlying frame visible—good for sheets, menus, and lightboxes.

1. Design the base frame and a separate overlay frame (same device width; overlay content in a bottom sheet or centered modal).
2. From a button on the base frame, trigger Open overlay targeting the overlay frame.
3. Close via Close overlay on backdrop tap or explicit dismiss control.
4. Prefer Smart Animate on the sheet body only if layer names match between closed and open overlay variants.

Limit: deeply nested overlays (menu on menu on modal) confuse testers—flatten to one overlay per flow in usability studies.

Pattern 4: Component variants instead of frame duplication

If animation repeats on every button, card, or chip, model motion with variants and prototype triggers (While hovering, On click) instead of duplicating entire app frames.

• Document all visual states in the component set for engineering.
• Use Present mode to sell the interaction; use specs for build.

Deep dive: interactive components: hover, pressed, disabled. For carousel-like motion, see interactive carousels in Figma.

Pattern 5: After delay chains (use sparingly)

After delay can sequence toast → dismiss → next screen. Keep chains short (two to three steps). Long chains are fragile when stakeholders click early or restart Present.

Recommended workflow

1. Storyboard the chain on paper with timings.
2. Build each step as an explicit frame so you can link to it in critiques.
3. Label frames Flow / Checkout / 03 — success toast per file organization.

Easing and duration heuristics

Motion type	Duration	Easing
Hover feedback	120–180 ms	Ease out
Screen push (mobile)	280–350 ms	Ease in-out
Large panel expand	300–450 ms	Ease out
Marketing hero	500–800 ms	Ease in-out (test on real device)

Figma does not expose full motion curves per channel—if marketing needs bespoke curves, export a Lottie or video reference and keep Figma as layout truth.

Limits you should plan around

No true timeline scrubbing

You cannot scrub a master timeline across the file. Each connection is local. For complex stories, use separate flows in the Flow starting point dropdown or split into multiple prototype links.

Scroll and sticky headers

Long-scroll prototypes fake scroll with vertical scroll behavior on frames, but sticky headers and nested scroll areas break easily. For engineering handoff, annotate scroll containers in Dev Mode; do not assume Present scroll equals CSS.

Lottie, Rive, and video

Embed video in prototypes for cinematic pitches only—file size and autoplay policies hurt stakeholder laptops. Prefer static poster frames in the spec and link to motion references.

Handoff gap

Developers implement CSS / native animation APIs. Export duration and easing as tokens in your spec table; link production-ready exports when assets accompany motion.

Comparison: prototype motion vs interactive components

Question	Use frame Smart Animate	Use component variants + triggers
Whole screen changes?	Yes	Rarely
Repeats across 20 buttons?	No	Yes
Needs hover without navigation?	Awkward	Yes
Engineering needs every state?	Often missing	Yes, if variants named well

Troubleshooting

Symptom	Likely cause	Fix
Everything cross-fades	Unmatched layer names	Rename to match across frames
Layout jumps at end	Auto Layout padding changed	Reserve space; use inner stroke
Hover never fires	Wire on child, not hit area	Wire on parent component root
Overlay will not close	Missing Close overlay action	Add backdrop tap target
Animation feels sluggish	Duration too high	Drop 100 ms; retest on laptop Present

Security and sharing notes

Animated prototypes still leak structure and copy in share links. For confidential flows, use password-protected prototypes and expire links after reviews.

Common mistakes teams make

• Animating before IA is stable — motion polish on screens that will be cut wastes days.
• Smart Animating unrelated layouts — looks glitchy; use Dissolve instead.
• Skipping reduced-motion consideration — provide a static flow link for accessibility reviews; pair with accessibility plugins for contrast, not motion policy.
• One 40-frame mega prototype — split flows per journey; link from a cover page.

FAQ

How is this different from the general prototyping tutorial?

The step-by-step prototype guide covers triggers and connection basics. This article focuses on motion limits, pattern choice, and when to stop.

Can Figma replace Principle or ProtoPie?

For high-fidelity mobile gestures and conditional logic, dedicated tools still win. Figma wins when the same file must stay aligned with components and variables.

Do I need plugins to animate?

Usually no. Plugins help Lottie import or batch export; they do not fix Smart Animate naming discipline.

Recommended workflow (end to end)

1. Wire flows without motion (Instant transitions).
2. Add component-level hover/press via variants.
3. Add screen-level Smart Animate only on approved flows.
4. Document durations and easings in a handoff frame for engineering.
5. Archive experimental motion on an EXP- page.

Related JustFigma guides

• How to use Figma to create a prototype
• Interactive components: hover, pressed, disabled
• Creating interactive carousels in Figma
• Figma Auto Layout in practice
• Figma guides hub
• Tutorials index

Bottom line: animate to explain behavior, not to win a motion awards reel. When Present mode stops feeling honest, you have hit Figma’s limit—move the spec to code and keep the file as the structural source of truth.