Motion System basics
The concepts behind Motion System — what a system, section, and item are, how lifecycle status works, and how this all fits together with the rest of the LottieFiles toolchain.
A motion system is a collection of items
A motion system is a named container of design elements specific to motion design. Think of it as a Figma library, but for time-based properties.
A motion system contains sections. Each section is a typed group of items.
Section types
The plugin supports five section types:
| Section type | Stores | Example items |
| Colors | Named brand or motion-specific colors | brand-primary, accent-warning, bg-surface |
| Easings | Named easing curves | ease-in-out-soft, bounce-strong, spring-quick |
| Fonts | Font references | display-bold, body-regular |
| Motion Presets | Pre-authored motion patterns | fade-in-up, scale-pulse, slide-from-right |
| Assets | Asset references (icon sets, illustrations) | success-icons, loading-states |
Draft and Published
Editing a system happens on a Draft revision. While a draft is open, the panel header shows Editing {system name} with Discard and Publish actions. Publishing makes the draft the live version; discarding throws the draft away. A system with no content cannot be published.
How Motion System fits into your workflow
The typical flow:
Author — create a system in your workspace on the LottieFiles web platform
Edit — fill in sections with the items your design needs, either from the AE plugin or from another LottieFiles surface like Lottie Creator or web.
Apply — select layers in an AE composition; use Smart Apply to assign items to those layers' properties.
Related
Editing sections — fill in items.
Render — themes/items require dotLottie format.