# Motion System basics
Understand systems, sections, primitives, workspace context, and the read-only VS Code workflow.

A **Motion System** is a named library of reusable design and motion decisions. It contains typed **sections**, and each section contains reusable **primitives**.

If you use a design-system library for colors and typography, Motion System extends the idea to timing, motion presets, and animation assets.

## Sections available in VS Code

| Section        | Contains                               | Example                             |
| -------------- | -------------------------------------- | ----------------------------------- |
| Brand Colors   | Solid colors and gradients             | `brand-primary`, `accent-success`   |
| Easing Curves  | Named cubic-bezier curves              | `ease-out-soft`, `spring-quick`     |
| Fonts          | Font family and style references       | `display-bold`, `body-regular`      |
| Motion Presets | Reusable keyframe motion               | `fade-up`, `scale-pulse`            |
| Collections    | Lottie, image, and other linked assets | `success-animation`, `loading-icon` |

Motion Systems can be accessed and used across LottieFiles integrations and authoring surfaces, including After Effects, Figma, Lottie Creator, and the web. VS Code presents the five section types above in a developer-focused, read-only view.

## Workspace relationship

System follows the workspace selected in the **Workspace** tab. It does not have a separate workspace picker.

If the selected workspace has:

- One system, its name appears directly.
- Several systems, use the system selector.
- No systems, the panel shows an empty state.

## Published and draft content

The extension prefers the current published revision. If necessary, it falls back to the newest published revision; a system with no published revision can display its latest draft content.

VS Code does not publish that draft or show a full editing lifecycle. Use **Open in browser** to manage revisions and publication.

## Read-only developer role

From VS Code you can search, preview, copy, insert, and download supported primitives. You cannot:

- Create a Motion System.
- Add or edit a section.
- Change or delete a primitive.
- Publish a revision.

Use the appropriate authoring surface, such as [After Effects](/en/integrations/after-effects/11_motion-system), [Figma](/en/integrations/figma/09_motion-system), [Lottie Creator](/en/creator), or LottieFiles on the web, to create and manage Motion System content according to the task.

## Related

- [Using Motion System primitives](/en/integrations/vscode/06_motion-system/using-motion-system-primitives)
- [Motion System panel controls](/en/integrations/vscode/06_motion-system/motion-system-panel-controls)