Figma saves an ease curve the way it saves a color
Motion in Figma can now keep an easing, a duration, and variable-backed properties as a named style, publish it to a library, and hand it to coding agents over MCP.
Five styles, the kind a team can now save and share in Figma Motion. Press play on any row.
Sample motion styles with easing curve, duration, animated properties, and a live preview
Style
Token and curve value
Curve
Animates
Duration
Preview
EnterPanels and cards arriving
motion/entercubic-bezier(.2, .7, .2, 1)
Opacity and ycubic-bezier(.2,.7,.2,1)
Opacity, y
240 ms
ExitDismissals and closes
motion/exitcubic-bezier(.4, 0, 1, 1)
Opacity and scalecubic-bezier(.4,0,1,1)
Opacity, scale
160 ms
SettleA toggle or badge landing
motion/settlecubic-bezier(.34, 1.56, .64, 1)
Scalecubic-bezier(.34,1.56,.64,1)
Scale
420 ms
EmphasisDrawing the eye to a change
motion/emphasiscubic-bezier(.65, 0, .35, 1)
Scale and fillcubic-bezier(.65,0,.35,1)
Scale, fill
320 ms
Text revealPer character, 40 ms apart
motion/text-incubic-bezier(.16, 1, .3, 1)
Opacity and y per charactercubic-bezier(.16,1,.3,1)
Opacity, y, per character
360 ms
motion
These values are this page's own, not Figma defaults. Every preview runs on the exact curve and duration in its row.
Today's art direction
The Motion Table
A motion style library page built as a live data table, set on an airbrushed clay ground.
A design-system token table, the kind that documents color and spacing, extended to motion. Each style is a row: a name a client can say out loud, the token a developer types, the curve drawn as a picture, the duration in tabular figures, and a preview that plays the real thing.
The airbrush plate above does the same job at poster scale. Copies of one sphere spaced wide and then bunched are what an ease-out looks like when you stop time.
Token table
Drawn curve cell
Tabular figures
Play-in-row preview
Group header row
Airbrush ground
Tooling
1 itemShipped 30 Sep
01figma/motion-styles
Figma Motion turns animation into styles you can publish
Figma's September 30 release note adds custom animation styles to Motion. A style keeps an easing, a duration, and variable-backed properties so you can apply it across designs, combine several into one richer pattern, and publish it to a library like any other style.
The same release brings audio on the timeline, character-level text animation, and export to Lottie or dotLottie. Figma says the styles can be applied automatically by its own agents or passed to coding agents through MCP or Skills.
When Motion launched in June we covered prompting the timeline on the canvas. Styles are the step that makes it a system: the ease a team agreed on becomes the ease an agent reaches for.
Ships in
Figma Motion, open beta
Date
2026-09-30
Exports
Lottie, dotLottie
A curve nobody can name gets retyped by hand. A curve with a name gets reused, by people and by agents.
Technique
2 itemsShipped 29 Sep
02firefox/at-rule
@supports can now ask whether an at-rule exists
Firefox 157 adds the at-rule() function to @supports, so a stylesheet can check for something like @scope before leaning on it. Feature detection used to stop at properties and selectors; now a fallback can be written for a whole block of rules.
The same release adds the chain value for overscroll-behavior, which gives nested scroll areas finer control over when scrolling passes to the page behind them.
Ships in
Firefox 157
Date
2026-09-29
Area
CSS
03firefox/color-scheme
Browser dialogs now follow the page into dark mode
In Firefox 157, alert, confirm, and prompt dialogs, plus the color and date pickers and form autocomplete lists, match the page's light or dark color scheme. A dark site no longer flashes a bright system box the moment someone opens a date field.
Ships in
Firefox 157
Date
2026-09-29
Area
Forms, color scheme
Workflow
1 itemReleased 1 Oct
04shadcn/registry
shadcn splits its registry engine into its own package
shadcn 4.21.1 introduces @shadcn/registry, the engine behind the CLI, as a separate package. The CLI now depends on it and re-exports it, so nothing changes for existing projects, but tools that read and install registry components have a cleaner piece to build on.
The same release fixes how the shimmer component handles reduced motion when it is used with a variant, a small reminder that every motion style needs its still version.
Ships in
shadcn 4.21.1
Date
2026-10-01
Package
@shadcn/registry 0.1.0
Borrow this pattern
Design move
The last few frames of an ease-out are where it bunches. That is the part a drawn curve shows and a number hides.
Document motion the way you document color: one table row per style, with the curve drawn, the duration in tabular figures, and a preview that plays the real thing.
What it is
A token table where each motion row carries a small SVG of its cubic-bezier and a play button that runs the exact easing and duration on a sample element.
Where to use it
Design-system docs, client style guides, and handoff pages, anywhere a client has to approve how something moves without reading code.
What keeps it honest
The preview reads its timing from the same values the row prints, and a reduced-motion setting turns every preview into a jump cut.
Prompt Lab
1 prompt
Motion style library pageWorks in Lovable, v0, Claude Code, Beaver Builder AI, Framer AI, and Claude Design.
Build a product page for a motion style library, the kind a freelancer ships for a design-system or SaaS client. It is a real web page whose hero is a live data table of animation styles.
Layout: a slim top nav floating over a full-bleed hero illustration whose left half is calm empty ground. In that empty space: a nameplate (issue or product number large in Funnel Display 700, two short mono lines beside it, a 2px ink rule under both), a mono kicker, a Funnel Display headline (700, 42-70px, max 13 characters per line), a one-sentence deck in Piazzolla, and one solid button. A paper-coloured table sheet then rises over the bottom of the hero.
The table: columns Style (name plus a one-line use case), Token (mono), Curve (a 120x70 SVG of the cubic-bezier with its two handles dotted), Animates, Duration (right-aligned tabular mono), Preview (a track with a dot and a Play button). Each row's preview must run with that row's exact duration and timing function via CSS custom properties. Include one per-character text row. A Play all button sits in the sheet header.
Below: an art direction block; then content sections as grouped table rows, each opened by a deep umber group header row holding the h2, a mono count, and one filled magenta status label; items are rows with prose left and a 200px dl of mono metadata right. One italic pullquote in a tinted row. A borrow-this row with a square image crop and labelled rule rows. Sources as a real table.
Palette: airbrushed clay ground #C47A52 with fine SVG noise grain at low opacity; paper #F6EEE6 sheets; ink #24150F; umber #3B2219 headers; muted #6C4E3F; one magenta accent #A3164F for curves, dots, status labels, and buttons, with a quieter #7E2448 for italics. Type: Funnel Display for headings and labels, Piazzolla for reading, Azeret Mono for tokens, durations, and metadata.
Image: one airbrush illustration (1970s airbrush technique, soft sprayed gradients) of a single magenta sphere as a multiple exposure along an arc, spaced wide then bunched as it settles, on a matching clay field with the left half empty. No text in the image.
Guardrails: body at least 18px with 1.65 to 1.7 line height and 60-75 character lines, never justified; WCAG AA on every label against its real surface; radius 14px on sheets, 6-8px on buttons and labels, no pill shapes; one shadow, on the hero table only; no fake sort arrows or filters; hover and focus states at 150ms; a prefers-reduced-motion rule that makes every preview jump instead of animate; on mobile each table row becomes a two-line card with the curve and preview below the name.
Field note
For years easing lived in someone's head or in a CSS file nobody opened. Once it is a style with a name, it can be reviewed, versioned, and handed to whatever builds the page next.
