Film a real sword swing or a drop, and turn it into a reusable easing curve in Figma on the spot
Turning real-world motion into design ft. Patrick Flaherty (Microsoft) | Config 2026 · Patrick Flaherty
21 min total·Actually worth watching closely: ~11 min·3 must-watch clips
- 0:14 – 4:54Listen
The animator's old craft: observe first, then act
Opens from the traditional animator's workflow — observe first, interpret second, stylize third — and argues that digital tools have let designers skip the observing step and face the curve directly.
Getting lost in the curve editor stems from skipping the step of watching real motion first
Mostly spoken argument and setup with nothing essential on screen — works fine as a podcast▶ Jump to 0:14Speaker · Patrick Flaherty - 4:54 – 7:16Skim
Facing the intimidating graph
Why the Bezier graph that greets you when you click into easing settings is so off-putting ('Custom Bezier is more like French for "what the hell is this?"'), plus the core claim: design the feel, not the graph.
The graph is only a description of motion, not its source — what we're after is punch, softness, and the rest of the feel
Visuals are curve-editor screenshots and slides; a glance is enough — the argument is the point▶ Jump to 4:54Speaker · Patrick Flaherty - 7:17 – 11:56Watch
Spacing is velocity — you are the analog signal
Visually breaks down how spacing relates to speed and feel, then tells the origin story of Motion Tracker — from the scrappy wave-a-piece-of-paper-on-camera prototype to a desktop app.
Spacing equals velocity, and velocity equals feel — once you can see spacing, the curve becomes a picture of timing
The spacing animation at 440s and the early prototype footage are the soul of this section; audio alone loses the intuition-building▶ Jump to 7:17Speaker · Patrick Flaherty - 13:02 – 15:19Watch
Live demo: recording stage motion into curves
Hands-on at the desk: the camera tracks three motions — a sword swing (X-axis), a hit, and a drop (Y-axis) — then in and out points are set and processed into easing curves.
A short, intentional real-world motion is enough to generate a usable easing curve
The highest-value live demo in the talk — the mapping between the motion and the generated curve has to be seen with your own eyes▶ Jump to 13:02Speaker · Patrick Flaherty - 15:19 – 18:59Watch
Name it, save it, drop it into Figma
The recorded curve is named 'Swing' and saved for sharing, then dropped onto a linear animation, instantly changing its character; adjusting the duration adds the missing weight, and pasting the value into a variable applies it to every linked animation at once.
The curve gives the feel, duration gives the weight — and one cubic Bezier value can travel across tools
The before/after animation comparison and the variables panel applying globally are purely visual — you can't hear the difference▶ Jump to 15:19Speaker · Patrick Flaherty - 19:03 – 21:17Listen
Wrap-up: building a team's shared motion language
A call to name, store, and share good eases so a team stops everybody guessing what 'sword swinging' means — and, next time you're stuck, to stand up, move, toss something, and capture real motion as your starting point.
It doesn't have to be perfect, it just has to be true — swap the blank curve for motion you actually performed
A purely spoken wrap-up and call to action, with no demo on screen▶ Jump to 19:03Speaker · Patrick Flaherty