> ## Documentation Index
> Fetch the complete documentation index at: https://docs.uspec.design/llms.txt
> Use this file to discover all available pages before exploring further.
# Motion
> Generate motion specification annotations from After Effects timeline data directly in Figma
The motion skill documents a component's animation behavior — every animated property gets a timeline bar and an entry in a detail table showing easing, duration, and value transitions.
The motion spec currently only supports extraction from **After Effects**. Unlike other skills that work directly from a Figma link, this is a **two-step process**: first run the export script in After Effects to get the JSON data, then run the skill with that output.
## What you get
Color-coded bars for each animated property, positioned on a time ruler. Blue for Bezier easing, green for Linear, and teal for Hold.
A 7-column table with element, property, from/to values, duration, delay, and easing curve for every animation segment.
Millisecond tick marks aligned to the timeline bars, scaled to the composition duration.
Component name, duration, frame rate, and dimensions at the top of the annotation.
Bar labels show value transitions (e.g., "0% -> 115%") while easing type is communicated through bar color and detailed in the table. A color legend at the bottom maps Bezier, Linear, and Hold to their bar colors.
## What you need
* **After Effects** with the composition open
* The **`export-timeline.jsx`** script (included in the `motion/` folder)
* **Figma MCP** connected (Console MCP with Desktop Bridge, or native Figma MCP)
* Optionally, a **Figma destination link** to place the annotation on a specific page
## How to use
Open your composition in After Effects and run the export script:
**File > Scripts > Run Script** and select `motion/export-timeline.jsx`
The script extracts all animated properties, computes easing curves, filters out static segments, and copies the result to your clipboard as JSON.
Make sure **"Allow Scripts to Write Files and Access Network"** is enabled in After Effects preferences under Scripting & Expressions.
Reference the `create-motion` skill, provide the JSON data (pasted directly or as a file reference), and include a Figma link to the destination page:
```
@create-motion
https://www.figma.com/design/abc123/Specs?node-id=0-1
```
Or with a file reference:
```
@create-motion @motion-data.json
https://www.figma.com/design/abc123/Specs?node-id=0-1
```
```
/create-motion
https://www.figma.com/design/abc123/Specs?node-id=0-1
```
```
$create-motion
https://www.figma.com/design/abc123/Specs?node-id=0-1
```
## What it generates
| Output | Description |
| ------------------ | ------------------------------------------------------------------------------------------- |
| Composition header | Component name, "Motion Specification" label, and metadata (duration, fps, dimensions) |
| Time ruler | Tick marks at regular intervals scaled to the composition duration |
| Timeline layers | One row per animated layer, with sub-rows for each property (Scale, Opacity, etc.) |
| Timeline bars | Color-coded bars positioned on the time axis, labeled with value transitions |
| Color legend | Bezier, Linear, and Hold easing types mapped to their bar colors |
| Detail table | One row per animation segment with element, property, from, to, duration, delay, and easing |
Only layers with actual animation are included. The export script filters out segments where values don't change, so the output shows only meaningful transitions.
## How it works
The motion skill is primarily deterministic — the After Effects export script pre-computes all timing data, and rendering scripts handle layout and table generation, with AI reasoning limited to validation and error recovery.
75% Deterministic 25% AI Reasoning
```mermaid theme={null}
flowchart LR
AE[After Effects] -->|"export-timeline.jsx"| JSON[JSON data]
JSON -->|Paste or file ref| Skill[Agent Skill]
Skill -->|Render| MCP[Figma MCP]
MCP -->|Annotation frame| Figma[Figma Output]
```
The `export-timeline.jsx` script walks every layer in the active composition, pairs keyframes into segments, computes cubic-bezier easing values, formats display labels, and filters out no-change segments. The output is self-contained JSON with all display values pre-computed.
The agent validates the JSON structure: composition metadata, layer array, property segments, and required fields like `startMs`, `durationMs`, `barLabel`, and `easingType`.
Track width and tick spacing are computed from the composition duration. The time ruler and all track areas are resized to match.
The motion documentation template is imported from the library, instantiated, and detached into an editable frame.
For each animated layer, the skill clones a layer template, sets the layer name, then clones property rows with positioned and colored bars. Bar positions are computed from the pre-computed segment timing data.
One row is cloned per animation segment, filling in element name, property, from/to values, duration, delay, and easing curve.
A screenshot is captured and checked for completeness. Issues are fixed automatically for up to 3 iterations.
Unlike other skills that extract data from Figma, the motion skill reads pre-computed data from After Effects. The export script does all the heavy lifting — pairing keyframes, computing easing curves, and formatting labels. The agent reads the segments directly and only computes layout values.
## Tips for better output
* **Name your layers in After Effects**: Layer names become the element labels in the timeline and detail table. Descriptive names like "Check" or "Selected fill" produce much better documentation than "Layer 1" or "Shape Layer 3"
* **Ensure keyframes exist**: The export script only captures properties with keyframes. Static properties are excluded automatically
* **Check the composition duration**: The timeline scales to the full composition length. Trim your composition to the relevant animation range for a tighter, more readable spec
* **Re-export if validation fails**: If the agent reports missing fields, re-run `export-timeline.jsx` in After Effects. The script copies fresh JSON to your clipboard
* **One composition at a time**: The script exports the active composition. Switch compositions in After Effects before re-running the script