Motion
The way your brand moves, governed like the rest of your system
One set of decisions that Figma, After Effects and code can all read.
The problem
Motion is made by more hands than ever, and none of them share a definition
It used to come from one or two people who had seen the brand's other work. Now it comes from six places at once.
Product designers
Figma
Engineers
Transitions in code
Motion designers
After Effects
A production company
The brand film
Two agencies
Different markets
Generation tools
Inside those same programmes
Everyone interprets adjectives differently. Nobody interprets 700ms differently.
“Confident and modern”
An adjective
- A component library cannot compile it
- After Effects cannot convert it to keyframes
- A production company cannot be handed it as a spec
- A model cannot generate against it
700ms, cubic-bezier(0.16, 0, 0.35, 1)
A value
- Compiles into a component library
- Converts to keyframes
- Ships as a spec a third party can hit
- Constrains what a model generates
The standards it has to pass
Accessibility built into the tokens, not bolted on after
Motion is now a regulated accessibility surface, and WCAG is a guideline rather than a law. What binds is the legislation pointing at it, and it now points from every major market.
The same tokens that make your motion recognisable are the ones that make it conformant, so consistency and compliance are not two workstreams. Handled as a review step, conformance depends on everyone remembering every time. Handled as a system property, it is paid for once, and the conformant version becomes the only version the tokens can produce.
What actually binds you
European Accessibility Act
Applicable since 28 June 2025
The harmonised standard it points at
ADA and Section 508
United States
Public procurement rules
Almost everywhere
Pause, Stop, Hide
Anything moving, blinking or scrolling automatically for more than five seconds must be pausable, stoppable or hideable.
Read the criterion(opens in a new tab)Three Flashes or Below Threshold
Nothing may flash more than three times per second. This is a seizure-safety line, not a style choice.
Read the criterion(opens in a new tab)Animation from Interactions
Honouring the operating system reduce-motion preference. It sits above the line as expected practice and is what users actually notice.
Read the criterion(opens in a new tab)The core decisions
A motion language is a set of decisions, made as values
Passing by default comes from a motion language: a core set of decisions, each written as a value rather than a guideline, so consistency, accessibility and brand character sit in the tokens rather than in whoever last touched the file.
None of these is an animation. That is precisely why it can be written down, handed over and enforced. Seven is the minimum; brands with more surfaces make more.
Duration scale
The fixed set of times any movement is allowed to take. Five or six named values, flexed by distance, so the same move across a card and across a full screen are not the same time.
175ms to 4000ms, scaled by distance
Curve family
The shape of the acceleration, written as a real bézier. One signature curve at several speeds, with a faster outgoing counterpart, because things should leave faster than they arrive.
cubic-bezier(0.16, 0, 0.35, 1)
Direction and path
Where elements enter from and the route they travel. Inward reads as focus, up as growth, down as settling, and routes follow the layout grid rather than cutting across it.
inward · up · down · along the grid
Element permissions
What each kind of element may do, and what it may never do. A modal, a toast and a nav item do not share a vocabulary, but elements doing the same job always move the same way.
by function, not by appearance
Choreography
How elements move in relation to one another: the stagger between them, and the order they enter and leave. Structure first, then content, then the controls that act on it.
stagger 133ms to 200ms
Density
How much motion belongs in each part of the product. A distribution rather than a dial: dense in onboarding, near-silent in a data table.
a distribution, not a dial
The reduced and stopped state
What all six become when motion is reduced or switched off. Most systems skip it, which is why reduced-motion modes usually feel broken.
Duration and curve
One curve, five speeds
One signature S-curve at five real durations. The values on screen are the values in the code.
Select a tier to plot its curve
Element permissions
The permitted vocabulary
Element permissions are a grammar, not a blacklist. Each element gets a permitted move and a forbidden one, and played together they read as one flow: save, confirm, update, done. Trigger any move on its own from the list.
With and without a language
The same interface, governed and ungoverned
Both sides carry the same amount of motion. Only one of them agrees with itself. Automated checks can enforce the scale, the stagger and the accessibility limits, but they cannot tell you whether a movement suits the thing it represents. That judgement is why the deliverable is a language and not a linter.
Without a motion language
900ms ease out, 180ms overshoot, 450ms linear, 700ms ease in. Four directions, no stagger.
With a motion language
700ms, one curve, rising, 150ms apart. One decision applied four times.
Reduced motion
The reduced state is a decision
Switching motion off is not the same as designing the calm state. One drops everything in at once, with no sense of what arrived or in what order. The other crossfades: no travel, no scale, order still legible. A change in opacity is not motion under the accessibility definition, so the calm version is still permitted.
Motion switched off
Reduced state, designed
Beyond the product
Most of the motion your customers see is made outside your product
Design systems document motion for the interface and stop at its edge. Everything past that edge is made by people who never open the system, and that is where a brand's movement comes apart. It starts in Figma as published variables, and it has to survive every tool after it.
The launch film
Made by a production company working from a brief, not a token set.
The campaign cut
Two agencies, two markets, two readings of the same brand.
The app store video
Shipped to millions, authored nowhere near the design system.
The conference reel
The brand on a stage, built the week before by whoever was free.
One language, several expressions
The same decision, in every form its consumers can read
The same decision has to be expressed differently depending on what is consuming it, including the consumers that only understand sentences.
| Consumer | What it needs | Form |
|---|---|---|
| Product code | Executable values | cubic-bezier(0.16, 0, 0.35, 1), 700ms, --motion-duration-transition |
| Figma | Variables, easing objects, motion on components | Timing and easing as published library variables, applied at component level |
| After Effects | Keyframe influence pairs, stagger in frames | The same curve expressed as influence values at the project frame rate |
| Lottie | Rendered vector motion carrying the same curves | Exported from After Effects, consumed by engineering |
| Native apps | Spring parameters | Springs do not convert cleanly from béziers. The mapping has to be stated. |
| AI video models | Natural language encoding the same decisions | Rises and settles with mechanical certainty. Slow departure, through speed, to slow arrival. No bounce, no overshoot. |
| AI UI generation and agents | Constraints and token names | Tokens plus a forbidden-move list the generator cannot violate |
Product code
Needs
Executable values
Form
cubic-bezier(0.16, 0, 0.35, 1), 700ms, --motion-duration-transition
Figma
Needs
Variables, easing objects, motion on components
Form
Timing and easing as published library variables, applied at component level
After Effects
Needs
Keyframe influence pairs, stagger in frames
Form
The same curve expressed as influence values at the project frame rate
Lottie
Needs
Rendered vector motion carrying the same curves
Form
Exported from After Effects, consumed by engineering
Native apps
Needs
Spring parameters
Form
Springs do not convert cleanly from béziers. The mapping has to be stated.
AI video models
Needs
Natural language encoding the same decisions
Form
Rises and settles with mechanical certainty. Slow departure, through speed, to slow arrival. No bounce, no overshoot.
AI UI generation and agents
Needs
Constraints and token names
Form
Tokens plus a forbidden-move list the generator cannot violate
The tools do not share files. They share rules.
Interface motion and set-piece motion are made by different people, in different tools, often by different agencies. Most consultancies serve one or the other. We serve both, from the same decisions.
Everyday motion
High frequency, low drama
Covers
- Transitions
- State changes
- Feedback
- Navigation
- Authored in
- Figma
- Delivered as
- Values and primitives, to engineering
Crafted moments
Low frequency, high production
Covers
- Onboarding
- Empty states
- Loaders
- Launch sequences
- Brand video
- Authored in
- After Effects
- Delivered as
- Lottie, or video
Governing what the models make
Do not ask a video model to invent your brand
Generation now sits inside the design tool itself. Ask it for an animation and it picks a duration and a curve, without knowing your brand has an opinion. So give it the brand as the first frame, exported from Figma as a still, and let the prompt carry only the motion. The prompt reduces the risk, the automated pass catches what it can measure, and a named reviewer approves what is left.
What the prompt specifies
Every clause traceable to a decision
- Subject and fixed elements
- Movement character
- Direction
- Pace
- Sequence
- Camera
- Forbidden moves
- Accessibility as generation instructions
- Duration under five seconds
What the model still gets wrong
Generated motion is not accessibility-aware
- Will not ship a reduced-motion variant
- Will not check a loop against the flash threshold
- Cannot judge whether a move suits what it represents
So an automated pass runs
- Flash detection on frame-to-frame luminance change
- Duration
- Motion conformance against the language
- Colour drift against the palette
What the motion discipline delivers
Five artefacts your team owns
These extend the design system you already have rather than replacing it. Motion tokens sit alongside your existing colour and type tokens, in your architecture and your naming, and hold across a product suite, its sub-brands and every market.
Motion language definition
All seven decisions, written as values
The decisions made and recorded as real values, so they can be handed over and enforced.
Includes
- Duration scale
- Curve family as real béziers
- Direction and path logic
- Element permissions
- Choreography and density
- The reduced state
Multi-surface translation
One language, every tool that makes motion
The same decision expressed in the form each tool can actually read.
Includes
- Design tokens
- Figma variables
- An After Effects specification
- Native spring parameters
- Prompt-level language for generative tools
Pattern library
Recipes, not guidelines
Reusable transition and micro-interaction recipes your team applies directly.
Includes
- Reusable transition recipes
- Micro-interaction recipes
- Documented for design and engineering
Coded primitives
Wired into the library you already have
Performant motion components on GPU-friendly transforms, ready to drop in.
Includes
- GPU-friendly transforms only
- Reduced motion at the primitive level
- Drops into your existing components
Conformance and governance
Checks that catch drift, and an owner who acts on them
How the language stays true after the engagement ends.
Includes
- Accessibility limits enforced in CI
- Consistency violations flagged
- A named owner and review cadence
- An onboarding path for new engineers
How we work
One engagement, start to finish
We audit what you have, define the language, and install it. It runs the same way whether you already have motion or none at all. The audit simply has less to find.
Audit
Evidence first, before anything changes. We count every duration and curve in use, and show you where the brand disagrees with itself.
Define
We make the seven decisions and write them as values, then translate them into every tool that produces motion.
Install
Figma variables, coded primitives, After Effects templates and checks in CI, with a named owner so it stays true after we leave.
Ready to govern how your brand moves?
Start with the audit and see what your own numbers say. Timelines depend on how many products, sub-brands and markets are in scope, and we size it on a first call.