Pathwise

Manuals / Motion for Product / Guide 1

Start · beginner · Day 0 · Guide 1 of 9

How to use this path

Product motion is functional: it explains state change. You will critique real apps, prototype in Figma or CSS, and write a “when not to animate” checklist.

Path progress
11%

Step 1 of 1

Setup

Figma Smart Animate and/or CSS transitions. Prefer one stack for practice.

SetupDrag stickies · tap for tips
Study mapDrag stickies · tap for tipsKeep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Assert the UIdrag · tap →Retry wiselydrag · tap →Seed datadrag · tap →Close the loopdrag · tap →Keep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Pathwise hackdrag · tap →Setupdrag · tap →Try thisdrag · tap →Follow the dashed drag · tap →

Do this now

Create a Figma file “Motion Lab” with 3 blank frames for experiments.

Was this step clear?
Chapter learning outcomes
  • Functional motion
  • Tooling
  • Accessibility baseline

Clear these before you leave