# Motion System basics
Learn what systems, sections, and items are, and how drafts and publishing work across the Motion System workflow.

<Image src="https://assets.docs.lottiefiles.com/static/49169d8b70-640.webp" alt="After Effects with the LottieFiles System tab open in edit mode, showing color items and draft publishing controls" caption="A motion system stores reusable sections and items that can be edited, published, and applied from the AE plugin" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/49169d8b70-640.webp 640w, https://assets.docs.lottiefiles.com/static/49169d8b70-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/49169d8b70-1920.webp 1920w" width="3840" height="2160" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAAlUlEQVR4nD3OTQqCQACG4TmIkolIC/+ytEkmEozcRLQJV97DK7SaCwj9QBBtolO06kxvTEGLZ/V+i08k0xnZXBFP8q8ozYilIpAlst4hbNvGOB9PvC5PtNa4YYSTK8Ky/g0sy+Jxu/M+XOn7Hs/zGQYx0aJCmGi0bUvXdTRNg+N6DPwRiVwi0rzA/DDGWUG13v6tNns+WW9IrCS49HMAAAAASUVORK5CYII=" />

## 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 happens in a draft version. 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:

1. **Create the system** — choose **Create new** to open the [Motion System web dashboard](https://app.lottiefiles.com/motion-system). Create the Motion System and manage the system itself there.
2. **Add or edit items** — open an existing system in the AE plugin to add or update supported colors, easings, fonts, and collection assets. Use Lottie Creator when a motion preset needs more detailed editing.
3. **Publish and apply** — publish the draft, select layers or properties in an AE composition, and apply the system items you need.

<Image src="https://assets.docs.lottiefiles.com/static/97180dcaef-640.webp" alt="After Effects Motion System empty state with Create new connected to a populated Motion System after web creation" caption="Create new opens the web creation flow; return to the plugin to use the new Motion System" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/97180dcaef-640.webp 640w, https://assets.docs.lottiefiles.com/static/97180dcaef-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/97180dcaef-1920.webp 1920w" width="1920" height="1080" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAAkUlEQVR4nCWO3QqCMACFfYhABB0hheVY2cqrlbqySF1Ry36g6Kbe/xE6sXn5HT7OOU55vCHbn7DTTxweX9SXN/LqDNlcDf8cQhO44RBzWVthUWl4jIMIadkJ4gm8aAyebSH1C0y1cCkFWRWd0J+m8Is1ZlKhvH8gVIuQJQhS0QlmojcY2QYT8E0DP4oRLHP74Q+RQEVqdPILpgAAAABJRU5ErkJggg==" />

## Related

- [Editing sections](/en/integrations/after-effects/11_motion-system/editing-sections) — fill in items.
- [Render](/en/integrations/after-effects/05_render) — themes/items require dotLottie format.