Skip to content
English
Sign in
Contact us
  • There are no suggestions because the search field is empty.

Motion System

Motion System is a design system that helps your team create reusable motion patterns—such as colors, easings, fonts, presets, and assets—so every project remains consistent and on-brand.

Motion Systems are created and managed primarily in the LottieFiles Workspace, under the Motion Systems tab.

Once published, a Motion System can be used across Creator as well as in the LottieFiles After Effects and Figma plugins.

Why use it

Without a Motion System, motion decisions are often scattered across files with no shared source of truth. Easing curves, brand colors, and presets get redefined from project to project, and consistency ends up relying on individuals remembering the “correct” values.

A Motion System solves this by centralizing everything into a single, reusable foundation for your team:

  • A single source of truth for colors, easings, fonts, presets, and assets
  • Built-in documentation that travels with the system, including principles, guidelines, and context—not just raw values
  • One place to update values, with changes automatically reflected wherever the system is used
  • A faster onboarding experience, helping new team members quickly understand and apply your motion standards

How to use it

Create your first Motion System

  1. Go to the Motion Systems tab in your workspace.

  2. If this is your first Motion System, you'll see a button to create one.

  3. Choose how you want to start:

    • Import a website link or PDF of your existing design system, and our AI will analyze it to generate a starting Motion System for you.

    • Start from scratch, starting with an empty system.

    • Start from samples, explore ready made samples that you can tweak.

Build out your Sections

  1. Inside your Motion System, create and manage Sections. A Section is a collection of related elements you can apply to your animations.

  2. Each Section can include:

    • Documentation

    • Colors

    • Easings

    • Fonts

    • Motion Presets

    • Assets (images and Lottie animations)

  3. Add Documentation alongside your Sections for notes and guidelines your team should follow.

Add Motion Presets

Motion Presets can be added to your Motion System from the workspace, but they can't be created here. Build them in Creator, using the Motion Presets plugin, then add them to your Motion System from the Platform.


Publish your system

When your Motion System is ready, click Publish to make it available to your team in Creator and the AE/Figma plugins.

 

FAQs

Can I create Motion Presets directly in the Platform?
No. Motion Presets are created in Creator using the Motion Presets plugin. Once created there, you can add them to your Motion Systems.

What's the difference between a Section and Documentation?
Sections hold the reusable elements (colors, easings, fonts, presets, assets) that get applied to animations.
Documentation holds the context around them — your team's motion philosophy, notes, and guidelines — and isn't something you apply directly.

Can I import an existing design system instead of building one from scratch?
Yes. When creating your first Motion System, you can import a PDF of your design system and have it analyzed automatically to generate a starting point.

Who can see my Motion System?
Once published, your Motion System becomes available to your team, including in Creator and the AE/Figma plugins.

Can I edit a Motion System after publishing it?
Yes. You can keep editing Sections and Documentation in the Platform at any time; publish again to push updates out.