Motion System basics
The concepts behind Motion System — what a system, section, and item are, how draft publishing works, and how the Figma plugin uses those items.
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 in the Figma plugin
The System tab renders these content sections when a motion system has items:
| Section type | Stores | Example items |
| Brand Colors | Solid colors and linear gradients | brand-primary, accent-warning, bg-surface |
| Easing Curves | Named cubic-bezier curves | ease-in-out-soft, bounce-strong, spring-quick |
| Typography & Fonts | Font family, weight, size, line-height, and letter-spacing references | display-bold, body-regular |
| Motion Presets | Pre-authored animation patterns | fade-in-up, scale-pulse, slide-from-right |
| Collections | Workspace, URL, or uploaded image/Lottie assets | success-icons, loading-states |
The tab also shows a Documentation section when the system includes motion vibe, description, personality, or principles content.
Draft and Published
Editing happens on a Draft revision. Click the edit (pencil) icon to create or open the draft. While a draft is open, the panel header shows Editing {system name}, a draft label, Publish, and View published when a published revision exists. Publishing makes the draft the live version. A system with no values or assets cannot be published.
How Motion System fits into your workflow
The typical flow:
Create the library — create a named system in the Figma plugin, or generate one from a brand URL. The Figma plugin does not create new sections from an empty system.
Set up sections — add or organize system sections in the web Motion System dashboard. Basic motion presets can be added and edited there; more detailed preset creation is supported in Lottie Creator.
Use it in Figma — in sections that already exist, add, edit, rename, or delete colors, easing curves, font styles, and collection assets. Apply colors to selected fills or strokes, apply fonts to selected text layers, prepare frame/prototype flows with an easing or preset, and insert collection assets into the canvas.
Related
Editing sections — fill in items.
Choosing an output format — Motion System work can still use the plugin's existing download formats.