Figma Motion: Animate Any Layer Along a Path (Motion Path plugin)
Open Figma's new Motion → Animations panel and you'll see Position, Scale, Rotation, Size, Opacity… and then "Path" — greyed out and unavailable. Motion Path gives you that path-following animation right now.
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.
— What it does —
• Animate any layer along a vector path, shape outline, or a generated Circle / Wave / Spiral
• Constant speed by arc length — no bunching on curves, a keyframe on every corner
• Rotate-to-path with auto-flip, scale-along, and fade-along
• Draw-on the path's stroke — Reveal or Trail
• Direction: Forward · Reverse · Ping-pong, with Loops
• Full native easing: Hold, Linear, Ease in/out, Back overshoots, Custom bezier, and spring presets (Gentle / Quick / Bouncy / Slow)
• Stagger and Distribute multiple layers down one path (trains, comet trails, conveyors)
• Motion trail / echo ghosts, and Chain paths for multi-leg journeys
• Presets + GitHub sync, plus a built-in Examples library (loaders, spinners, orbits, pulses…)
— How to use —
1. 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 options, and hit "Apply motion path" — then press play
Built on Figma's Motion Plugin API (Beta). Feedback & requests welcome
📧 [email protected]
#Figma #FigmaMotion #UIAnimation