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, Figma, Lottie Creator, or LottieFiles on the web, to create and manage Motion System content according to the task.