Six small curve editor fixes shipped since Config by Jakub Świadek, designer on Figma Motion: auto-scaling graph bounds, shift-snapping handles, arrow-key nudging at 0.01, and a scrub line showing exactly where on the curve the playhead sits.

The first of four new short official tutorials on Figma Motion explains easing. The detail worth taking away is that custom easing curves can be saved as variables, reusable across your entire design system.

Two tiers of preset – basic animations move a single property, composite ones bundle several plus custom easing out of the box. Once applied, an animation shows up as a blue track on the timeline, where you drag the track itself to set delay and drag its handles to set duration.

“Path trim lets you create animated lines by controlling how much of a path is visible at specific points in time. You can use path trim to create draw-on or erase effects, handwriting animations, and looping spinners.”

Matt Perry, who built Framer Motion and now Motion, opens The Book of Motion with perception rather than code, on the argument that ​“motion is deeply human” and hardwired into how we register that something has changed. The book will have four parts: perception, mechanics, engineering, and practice. The intro chapter is free, the rest is paid early access, published a chapter at a time. And despite the domain, it’s deliberately not a book about the Motion library.

Figma’s official intro series for Figma Motion, three short videos covering the timeline, keyframes, and motion paths. Start with the keyframes one, which quietly makes the biggest point: any layer property with a diamond icon can be animated, and that includes fills, effects, and shaders.

Laura Fehre, Designer Advocate at Figma, teaches Motion to people who freeze up the moment they open motion software, by letting the Figma agent do the first pass. Prompt the animation, watch it build the keyframes, then refine the curves and springs yourself.

Miggi builds a loading spinner from one ellipse: swap the fill for a stroke with shift+X, sweep the arc tool to 75%, then round the end caps. In Figma Motion, the move is keyframing only the sweep value and deleting the start and ratio keyframes Motion adds by default, so it runs from 0.25 to a full 100%. Duplicate and stagger a few for a nested loader.

Miggi packs two Figma Motion tricks into one tip. Nest your animation inside a frame and the parent becomes a camera you can pan, zoom, and rotate. Separately, J and K jump the playhead to the next and previous visible keyframes.

A deep dive into the principles that separate intentional motion from decoration: easing and timing, anticipation, overshoot, follow-through, hold, and settle. The piece makes a compelling case for grounding animation in real-world physics and film editing rather than trending motion work, and lands on a point worth keeping: as AI tools make quality motion faster to produce, skill and restraint matter more, not less.

Nikita Prokopov makes the case that great UI isn’t just about nailing the start and end states of an animation, it’s about every frame in between. His rule of thumb: if you freeze the screen at any moment, you should be able to explain what you’re looking at. The post walks through a set of GIF examples — from Safari’s misaligned cursor-and-placeholder animation to YouTube’s inexplicable rectangle transition — showing how mid-animation frames that don’t hold up on their own erode user trust.

Cole Derochie from Shopify made a plugin for simulating an LLM streaming experience — make sure to check out the demo.

A collection of essays by Raphael Salaja on interaction design and animations.

MDS recorded a Figma tutorial video dissecting why Anthropic’s Claude app icons feel so satisfying and explaining how to recreate these animated icon components in Figma using Smart Animate.

Emil Kowalski shares seven simple ideas you can use to improve your animations: scale your buttons, don’t animate from scale(0), don’t delay subsequent tooltips, choose the right easing, make your animations origin-aware, keep animations fast, and use blur when nothing else works. 

Motion designer Thibaut Crépelle reimagined the launch of the iconic iMac G3 with an animated video and an interactive page made in Framer. Really fun passion project executed with high quality and attention to detail.

My first Mac was a Mini G4 introduced in 2005, but soon after, I also got an iMac G3 because of its cool look. Watching this reel made me want to get another one again.

Emil Kowalski helps decide when and how to animate to provide a better user experience, starting with ensuring your animations have a purpose. I finished Emil’s course Animations on the Web this summer and highly recommend following his writing on motion and animation.

Unicorn Studio makes creating WebGL effects, motion, and interactivity easy for designers. Later, they can be embedded in Framer, Webflow, or any website.

I purchased Emil Kowalski​’s course on animation back in April, but started working through it only last week. Emil is a design engineer at Linear and previously worked at Vercel. The course is fairly technical and requires an understanding of CSS, JS, and React, but it does a really good job introducing Motion and explaining what separates good animations from great. It’s been very helpful as I’m working on a new personal website, so definitely recommend checking it out!