Motion Path — Animate Along a Path Figma Plugin

About this plugin

Motion Path (extended) gives you that path-following animation right now — and goes far beyond a basic "move along a line." Best of all, it doesn't run its own engine: it writes real, native Figma Motion keyframes onto your layer, so everything inspects in Dev Mode and exports to CSS / React / JSON like any other Figma animation.Path animation is coming to Figma Motion — but it's still switched off.In the native Animations list, **Path** sits greyed out below Position, Scale, Rotation, Size and Opacity. Motion Path fills that gap today. And even once a basic native version lands, this plugin gives you the depth a simple "follow a line" never will — with zero lock-in, because your work is already native Motion data.Why it's different- Real keyframes, not a fake preview. Motion Path samples your path and writes native Position X/Y (+ Rotation, Scale, Opacity, Path Trim) keyframe tracks straight onto the layer's Motion timeline.- Constant speed, every time. Geometry is resampled by arc length, so keyframes are spaced evenly along the path with one on every corner — no bunching on curves.- Future-proof. It's built on Figma's Motion Plugin API, so the output is standard Figma Motion — edit it by hand, inspect it in Dev Mode, export it anywhere.Define the path your way- Vector — animate along any pen/line path.- Outline — trace the perimeter of any shape (rectangle, ellipse, polygon, star, boolean).- Procedural — generate a Circle, Wave, or Spiral with no path layer at all.- Set as path / Set as object pickers to choose the path and the animated layers independently of selection order.- Load from selection to re-open and re-edit motion you already applied.Control every detail- Rotate to path with auto-flip (keeps text/asymmetric objects upright on return legs), plus a constant rotation offset.- Scale along path and Fade along path (from → to).- Draw-on the path's own stroke — Reveal (draws on behind the object) orTrail (a moving window).- Direction: Forward · Reverse · Ping-pong, with Loops and Seamless, gapless repeats.- Path range to animate just a sub-section, plus a perpendicular normal offset.- Stagger multiple layers down the same path.Native easing & springsThe full Figma easing set — Hold, Linear, Ease in/out/in-and-out, the Back overshoots, Custom bezier, spring presets (Gentle / Quick / Bouncy / Slow) and Custom spring — plus bind easing to a variable. Curves apply as a time-warp so your sampled values stay exact; springs ride as Figma's native easing so overshoot/bounce render authentically.Presets, sync & a starter library- Save & reuse your animations locally.- GitHub sync to back up and share presets across files and teammates.- Examples — a built-in library of ready-made motion (loaders, spinners, orbits, pulses, progress rings…) you can preview, tweak and apply in a click.How to use1. Draw a vector path (or pick any shape / generate one).2. Select the path and the layer(s) you want to animate (inside a frame, so they have a Motion timeline).3. Open Motion Path, tune the sections, and hit Apply motion path.Then press play — or open the Motion panel and edit the keyframes it created.> Motion Path builds on Figma's Motion Plugin API (Beta). As Figma evolves> Motion, expect ongoing updates.