Draft Motion and Micro-Interactions With AI

Workflow area: Figma AI & Prototyping · Tier: Core · Hands-on time: ~30 minutes

Micro-interactions carry a disproportionate share of perceived quality: the save confirmation that settles instead of popping, the list item that slides out with weight, the loading state that breathes. Most teams under-invest not because they undervalue motion but because keyframe work is slow and the tooling gap between design and engineering swallows whatever gets made. AI drafting changes the first economics — a described transition becomes editable keyframes in seconds — but the draft always arrives generically pleasant: default springs, uniform timing, no opinion. Timing and intent are the design. That part stays yours.

When to use — and when not to

• Use it for the transitions users meet dailystate changes on core actions, navigation transitions, feedback confirmations; frequency is what compounds the quality signal.
• Use it when motion exists only in your heada drafted, tunable version beats a written description in every handoff conversation.
• Use it to build a motion vocabularydraft once, tune, then reuse the same durations and easings across the product; consistency of motion is a system property, not a per-screen garnish.
• Skip it for signature brand momentsa hero animation that defines your product's feel deserves hand-crafting from intent, not tuning from a generic draft.
• Skip motion entirely where it adds nothingdecoration on rarely-seen screens is cost without payoff, and every animation is a tax on users in a hurry.

The recipe

1. 1.

   Write the intent line before touching the tool. One sentence per interaction: what changed, and what the motion should communicate. "The task slides off and the list closes the gap — completing feels like progress, not deletion." No intent line, no animation; motion without a communicative job is decoration.

2. 2.

   Draft with a prompt that specifies intent, not just geometry. In Figma Motion on your frames, or Jitter for standalone comps:

   Copy

   Animate the transition between these two frames (before/after
   attached): a task item being marked complete.
   
   Intent: completion should feel satisfying and final, but quick —
   this happens dozens of times per session.
   - Checkmark: quick confirm on tap, ~150ms, slight overshoot.
   - Task row: fades and slides out, list below closes the gap
     smoothly. Total sequence under 400ms.
   - Stagger: checkmark first, row exit begins ~100ms later.
   - Easing: decisive start, gentle settle — no bounce on the row.
   Generate keyframes I can edit; keep layers separate per element.
   

3. 3.

   Tune the draft — this is the actual design work. Play it at real speed, then at quarter speed. Adjust the three levers the AI cannot judge for you: duration (drafts run long; frequent actions want the fast end of 150–400ms), easing (replace default curves with your product's standard set), and choreography (what leads, what follows, what overlaps — sequence is meaning). Iterate until the motion says the intent line without you explaining it.

4. 4.

   Produce the reduced-motion variant — it is a requirement, not a courtesy. Vestibular disorders make large movement, parallax and zoom physically unpleasant; WCAG expects motion triggered by interaction to be disableable. For each animation, define the prefers-reduced-motion behavior: usually a simple cross-fade or instant state change that preserves the feedback without the movement. Draft it the same way ("same transition, no translation or scale — opacity-only, 150ms") and check that the completion signal still reads.

5. 5.

   Hand off timing as data, not adjectives. Export Lottie files where the format fits (icon animations, self-contained comps), and for interface transitions document the spec engineering actually needs — element, property, duration, delay, easing curve, reduced-motion behavior — inspectable in Dev Mode alongside the frames:

   Copy

   ELEMENT      PROPERTY        DURATION  DELAY  EASING            REDUCED
   Checkmark    scale 0→1       150ms     0      cubic(.2,.8,.2,1) opacity only
   Task row     x, opacity      250ms     100ms  cubic(.4,0,1,1)   opacity only
   List items   y (gap close)   250ms     150ms  cubic(.2,0,0,1)   instant
   

Make it yours

• Jitter for the marketing-adjacent set: empty-state illustrations, onboarding moments and feature-announcement animations draft well from a still frame plus intent line, and export to Lottie for both product and marketing reuse.
• Motion tokens in the design system: promote your tuned durations and easings into named tokens (motion-quick, ease-exit) and reference them in every draft prompt — pb-24's documentation pass then covers motion too.
• Video-reference drafting: record a competitor or reference app's transition, describe what to keep and what to change, and let the AI draft your version — taste transfer beats starting from zero.

Quality check

• Every animation has an intent line it demonstrably servesif a colleague cannot guess the intent from watching, the motion is not communicating, it is performing.
• Durations respect frequencyanything a user triggers many times a day sits near the fast end; a delightful 700ms becomes a hated 700ms by Friday.
• Easing came from your standard seta product animating with six different default curves feels subtly broken even to users who cannot say why.
• The reduced-motion variant exists and preserves the feedbackremoving the animation must not remove the confirmation.
• Handoff carries numbersif engineering received "smooth and snappy" instead of durations and curves, the tuning you did will not survive the build.