Motion System panel controls

A UI reference for the Motion System tab in the Figma plugin.

System selector

At the top of the tab:

Control	What it does
System name	The current system. With one system, the name shows directly; with several, it becomes a dropdown.
System dropdown	Switches between the workspace's systems. Systems are ordered by lifecycle status: published, draft, then archived.
Create new	Opens the create modal. You can create a named system or generate one from a brand URL, but the plugin does not create new sections from an empty system.
Edit (pencil) icon	Opens the system in edit mode (a Draft revision).
View draft	Appears when a draft exists and you're viewing the published revision. Opens the draft for editing.
Open in browser	Opens the current system in LottieFiles Workflow on the web.

Edit mode header

While editing, a bar appears above the system:

Control	What it does
Editing	Indicates which system is in edit mode and shows a draft label.
View published	Leaves draft view and returns to the published revision, when one exists.
Publish	Makes the draft the live version. Publishing is blocked until the system has content.

Sections

Each section that has content is shown as an accordion with an item count:

Section	Controls
Documentation	Read-only motion vibe, description, personality, and principles.
Brand Colors	Solid and gradient color rows. Copy solid hex values, choose Fill, Stroke, or Both when the selection supports it, then apply. + Add, edit, and delete are available in edit mode.
Easing Curves	Cubic-bezier curve rows. Copy the curve value, apply it to an eligible frame export, or add/edit/delete curves in edit mode.
Typography & Fonts	Font rows with preview, family, weight, size, line-height, and letter-spacing. Apply works on selected text layers.
Motion Presets	Preset preview cards with frame duration and keyframe count. Apply uses the selected frame to generate a preset animation preview/export.
Collections	Asset rows with preview, copy-link, and insert actions. Lottie assets can be inserted as SVG or GIF; image assets insert as the supported image format.

In edit mode, a section title can be renamed from its header. Existing rows show edit and delete controls where that item type is editable.

Selection-aware actions

The System tab listens to the current Figma canvas selection and adjusts apply behavior:

Colors apply to selected paint targets. If the selection has both fill and stroke, choose Fill, Stroke, or Both before applying.
Fonts apply only to selected text layers. If no text layer is selected, the plugin prompts you to select one.
Easings can be used when you select two or more frames, or a frame that has a prototype flow.
Motion presets require a selected frame.

Easing interaction picker

When an easing curve is applied to a prototype flow with multiple Smart Animate interactions, the plugin asks which interactions should use the curve. If there is zero or one interaction to disambiguate, it applies directly and opens the animation preview/export flow.

Empty system

When a system has no content, the panel explains that the system is empty and offers Refresh. Use Open in browser from the header to set up sections or manage the system in the web Motion System dashboard.

Motion System basics — concepts behind systems, sections, and drafts.
Editing sections — add and organize section items.