# Motion Path

> Animate along a path in Figma Motion

The "Path" animation Figma greyed out — available today as real, native Figma Motion keyframes. Animate any layer along a vector path with rotate-to-path, draw-on, springs, and loops.

**Open in Figma:** https://www.figma.com/community/plugin/1654530170219655744

## Features

### Real Native Keyframes
Samples your path and writes native Position X/Y (plus Rotation, Scale, Opacity, and Path Trim) keyframe tracks straight onto the layer's Motion timeline — not a fake preview.

### Constant Speed by Arc Length
Geometry is resampled by arc length, so keyframes are spaced evenly along the path with one on every corner — no bunching on curves.

### Any Path Source
Animate along a vector, trace the outline of any shape (rectangle, ellipse, polygon, star, boolean), or generate a Circle, Wave, or Spiral with no path layer at all.

### Rotate to Path
Keyframes rotation so the layer faces along the tangent, with auto-flip to keep text and asymmetric objects upright on return legs, plus a constant rotation offset.

### Scale & Fade Along Path
Interpolate uniform scale and opacity from a start value to an end value across the path, emitted as their own keyframe tracks alongside translation.

### Draw-On Strokes
Animate the path's own stroke via Path Trim — Reveal draws the line on behind the object, or Trail runs a fixed-width window along it.

### Direction, Loops & Range
Forward, Reverse, or Ping-pong traversal with seamless loops, a range slider to animate only a sub-section, and a perpendicular normal offset.

### Native Easing & Springs
The full Figma easing set — Hold, Linear, Ease in/out, Back overshoots, Custom bezier, spring presets and Custom spring — plus bind easing to a variable.

### Stagger, Distribute & Trails
Send multiple layers down the same path offset in time (Stagger) or space (Distribute follow-the-leader), and bake faded echo ghosts for motion trails.

### Presets & GitHub Sync
Save and reuse animations locally, and optionally sync presets to a GitHub repository to share them across files and teammates.

## Use cases

- **Loaders & Spinners** — Build orbiting dots, progress rings, and looping spinners that ride a circle or spiral at perfectly constant speed.
- **Micro-interactions** — Send icons, cursors, and UI elements gliding along a curve with authentic native spring and easing feel.
- **Kinetic Illustration** — Animate characters, vehicles, or particles following a hand-drawn route, rotating to face the direction of travel.
- **Dev-Ready Handoff** — Because the output is native Figma Motion, animations inspect in Dev Mode and export to CSS / React / JSON.

## How to use

1. **Draw a Path** — Draw a vector pen/line path, pick any shape to trace its outline, or generate a Circle, Wave, or Spiral.
2. **Select Path + Layers** — Select the path and the layer(s) you want to animate — inside a frame, so they have a Motion timeline.
3. **Tune the Motion** — Set direction, rotation, easing, loops, and any other options in the plugin panel.
4. **Apply Motion Path** — Hit Apply and press play — or open the Motion panel and edit the keyframes it created.

Page: https://systergon.com/products/figma-plugins/motion-path