Motion is the last design-system primitive without an owner
Motion is the last design-system primitive without an owner
Color has tokens. Type has a scale. Components have a library. Motion still lives in scattered files, Slack threads and one-off exports.
Color has tokens. Type has a scale. Components have a library. Motion still lives in scattered files, Slack threads and one-off exports.
Motion System gives your team one place to define it, govern it, and ship it consistently across every surface.
Motion System gives your team one place to define it, govern it, and ship it consistently across every surface.
Live within your Workspace
Authored in Lottie Creator
Figma + After Effects plugins
Trusted by
16
million+ designers and
developers from over
280,000
companies worldwide
Trusted by
16
million+ designers and
developers from over
280,000
companies worldwide
Trusted by
16
million+ designers and
developers from over
280,000
companies worldwide
Every primitive earned its infrastructure. Except the one that moves
Every primitive earned its infrastructure. Except the one that moves
Every design decision at scale has a system behind it; a single source of truth that keeps it consistent and survives the handoff.
Motion is the exception: ungoverned, undocumented at the implementation layer, and re-interpreted by every person and every tool it passes through.
Every design decision at scale has a system behind it; a single source of truth that keeps it consistent and survives the handoff.
Motion is the exception: ungoverned, undocumented at the implementation layer, and re-interpreted by every person and every tool it passes through.
Every design decision at scale has a system behind it; a single source of truth that keeps it consistent and survives the handoff.
Motion is the exception: ungoverned, undocumented at the implementation layer, and re-interpreted by every person and every tool it passes through.
That's not a tooling problem. It's a governance gap.
That's not a tooling problem. It's a governance gap.
Rebuilt from scratch, every project
Rebuilt from scratch, every project
No shared library, no reusable presets; every animator starts from zero, with slightly different values each time.
Guidelines live where no one works
Guidelines live where no one works
The few teams that document motion bury it in static docs; outside the tools where animation actually happens.
Design says one thing, dev ships another
Design says one thing, dev ships another
With no canonical source, easing curves get approximated, durations get ignored, and motion is the first thing cut.
Teams document motion, but almost no one governs it
Teams document motion, but almost no one governs it
The best design systems already have motion guidelines. They tell you when to ease, which values to use, what physics to apply. What none of them govern is the animated assets themselves, which are the files that actually get built and shipped.
The best design systems already have motion guidelines. They tell you when to ease, which values to use, what physics to apply. What none of them govern is the animated assets themselves, which are the files that actually get built and shipped.
What teams have today
Documented
Documented
A motion page in the design-system site
Principles, do's and don'ts, a few example GIFs
Easing values pasted into a PDF or Figma comment
Knowledge that lives in one motion designer's head
Read once. Re-interpreted on every handoff.
What Motion System adds
Governed
Governed
Motion tokens, easings and presets applied on the canvas
One canonical source, shared across editors and consumers
The actual animated assets and not just the rules about them
One click from the tools where motion is made and shipped
Used every day. Consistent by default.
One workspace-level source of truth for how your product moves
One workspace-level source of truth for how your product moves
A Motion System bundles everything a team needs to define, share and govern its motion identity; the philosophy, building blocks and permissions, all in one place.
A Motion System bundles everything a team needs to define, share and govern its motion identity; the philosophy, building blocks and permissions, all in one place.
Document
Document
Motion philosophy, principles, personality, do's and don'ts, choreography rules, and accessibility requirements. These are the shared language for how your product should feel.
Systematize
Systematize
The consumables: easing curves, animation presets, fonts, images and animations. The building blocks teams reach for instead of rebuilding from scratch.
Govern
Govern
Workspace permissions for editors and consumers. One canonical system that's shared, not copies, so what's approved is what gets used.
From your brand's source of truth to a motion system in 3 steps
From your brand's source of truth to a motion system in 3 steps
1. Build your system
Add your easing curves, durations, colors, fonts and assets. You can also import a brand guide and let AI draft your motion identity for you to refine.
2. Define your tokens
3. Apply where you work
1. Build your system
Add your easing curves, durations, colors, fonts and assets. You can also import a brand guide and let AI draft your motion identity for you to refine.
Select any color, text, or transform in Lottie Creator. Mark it as a token and now that property becomes editable at runtime.
2. Define your tokens
Name every motion token your system needs (curves, durations, patterns) and write the context: when to use it, when not to. Publish to your workspace.
3. Apply where you work
Your motion system now lives where you work; Lottie Creator, After Effects and Figma. Just select a layer, pick a token and apply. No app-switching, no copying values and no guessing, as the system is where the decision happens.
Built where motion is actually made
Built where motion is actually made
Built where motion is actually made
Not a wiki bolted onto your design system. Motion System is created, edited and applied inside Lottie Creator and managed in your Workspace so the gap between knowing the rules and using them goes to near-zero.
Not a wiki bolted onto your design system. Motion System is created, edited and applied inside Lottie Creator and managed in your Workspace so the gap between knowing the rules and using them goes to near-zero.
Motion tokens
Easing library
Reusable presets
Colors, fonts & assets
Multiple systems per brand
Living documentation
Motion tokens
Easing library
Reusable presets
Colors, fonts & assets
Multiple systems per brand
Living documentation
Motion Tokens Manager
Motion Tokens Manager
Define motion tokens once, theme them across modes, apply them on the canvas.
Graph Editor
Author and name easing curves. Reuse them everywhere instead of eyeballing bezier values.
Motion Presets
Save the patterns your team rebuilds from scratch (fade, scale, draw, text entrance) as reusable presets.
Living documentation
Living documentation
Principles and personality live next to the assets they govern and not in a separate doc nobody opens.
From source of truth to
shipped product
From source of truth to
shipped product
From source of truth to
shipped product
Workspace
Source of truth
Store, view, and manage your Motion System, images, and animations in your workspace.
Lottie Creator
Author & apply
Figma + After Effects
Produce & consume
Code · roadmap
Ship to runtime
Workflow
Source of truth
Store, view, and manage your Motion System, images, and animations in your workspace.
Lottie Creator
Author & apply
Create, edit, and apply tokens, easing curves, and presets right on the canvas.
Figma + After Effects
Produce & consume
Plugins both push to and pull from the system, so production stays on-brand.
Code · roadmap
Ship to runtime
A developer library and API so the same system reaches production code.
The only motion system
that spans design, animation and production
The only motion system
that spans design, animation and production
The only motion system
that spans design, animation and production
Because Motion System lives across your Workspace, Lottie Creator and the Figma + After Effects plugins, the gap between "what the brand requires" and "what you actually use while animating" goes to near-zero.
The system is one click from the canvas, not buried in a doc. That's the difference between motion guidelines that exist and motion governance that actually changes what ships.
Because Motion System lives across your Workspace, Lottie Creator and the Figma + After Effects plugins, the gap between "what the brand requires" and "what you actually use while animating" goes to near-zero.
The system is one click from the canvas, not buried in a doc. That's the difference between motion guidelines that exist and motion governance that actually changes what ships.
Frequently asked questions
Frequently asked questions
What is a Motion System?
A Motion System is a centralized, governed set of motion primitives including easing curves, color tokens, typography, animation presets and brand assets that defines how a brand moves across every product surface. Just as color and typography have tokens and an owner, a motion system gives motion the same status: documented, versioned and shipped from the same place as the rest of your components.
What is a Motion System?
A motion system is a centralized, governed set of motion primitives including easing curves, color tokens, typography, animation presets and brand assets that defines how a brand moves across every product surface. Just as color and typography have tokens and an owner, a motion system gives motion the same status: documented, versioned and shipped from the same place as the rest of your components.
What is a Motion System?
A Motion System is a centralized, governed set of motion primitives including easing curves, color tokens, typography, animation presets and brand assets that defines how a brand moves across every product surface. Just as color and typography have tokens and an owner, a motion system gives motion the same status: documented, versioned and shipped from the same place as the rest of your components.
How is a motion system different from animation guidelines?
Animation guidelines are documentation, usually a PDF, Notion page or website that people can refer to and that describes how motion should work.
A motion system is infrastructure. It can include these guidelines, but it also lets you place approved primitives directly into the tools animators use such as After Effects, Lottie Creator or Figma. The standard becomes the default rather than something designers have to manually interpret and apply on every project.
How is a motion system different from animation guidelines?
Animation guidelines are documentation, usually a PDF, Notion page or website that people can refer to and that describes how motion should work.
A motion system is infrastructure. It can include these guidelines, but it also lets you place approved primitives directly into the tools animators use such as After Effects, Lottie Creator or Figma. The standard becomes the default rather than something designers have to manually interpret and apply on every project.
Will having Motion System slow us down with extra review or approval steps?
The opposite is the goal. The point isn't to add a "design police" layer, it's to build guardrails reliable enough that teams don't need manual review to stay on brand. If a color, easing or preset is baked into the component by default, there's nothing left to check.
Will having Motion System slow us down with extra review or approval steps?
The opposite is the goal. The point isn't to add a "design police" layer, it's to build guardrails reliable enough that teams don't need manual review to stay on brand. If a color, easing or preset is baked into the component by default, there's nothing left to check.
How do I build a motion system from scratch?
Three steps: first, audit what's already in use such as which easings, timing values and colors show up across your existing animations. Second, define your approved primitives including colors, easings, fonts, presets and assets. Third, publish to a shared workspace so you can access it across Lottie Creator, After Effects and Figma. If you already have a guideline, you can import it to automatically generate a first draft of your motion system.
How do I build a motion system from scratch?
Three steps: first, audit what's already in use such as which easings, timing values and colors show up across your existing animations. Second, define your approved primitives including colors, easings, fonts, presets and assets. Third, publish to a shared workspace so you can access it across Lottie Creator, After Effects and Figma. If you already have a guideline, you can import it to automatically generate a first draft of your motion system.
Does this replace our design system?
No, it extends it. Your design system probably already owns color, typography, spacing, components and other elements based on your product. Motion System gives motion the same status inside that system, not a separate one. It plugs into the tools your team already uses including After Effects, Lottie Creator and Figma. Think of it as filling the one gap your design system already has, not replacing the parts that work.
Does this replace our design system?
No, it extends it. Your design system probably already owns color, typography, spacing, components and other elements based on your product. Motion System gives motion the same status inside that system, not a separate one. It plugs into the tools your team already uses including After Effects, Lottie Creator and Figma. Think of it as filling the one gap your design system already has, not replacing the parts that work.
We don't have a dedicated motion designer. Does this still apply to us?
Yes. In orgs without a dedicated motion role, motion decisions usually fall to whichever designer or director is closest to a given project, which is exactly why those decisions drift over time. Motion system gives that person or director a default to work from, so consistency doesn't depend on one person remembering the standard.
We don't have a dedicated motion designer. Does this still apply to us?
Yes. In orgs without a dedicated motion role, motion decisions usually fall to whichever designer or director is closest to a given project, which is exactly why those decisions drift over time. Motion system gives that person or director a default to work from, so consistency doesn't depend on one person remembering the standard.
Govern the motion you already ship
Govern the motion you already ship
Motion System turns scattered animation work into a governed, reusable system within the tools your team already uses.
Motion System turns scattered animation work into a governed, reusable system within the tools your team already uses.
One workspace for your whole motion identity
One workspace for your whole motion identity