# Motion Path for Figma — Animate Any Layer Along a Path
_July 11, 2026 · 12 min read · by Systergon_
> Motion Path is a Figma plugin that animates any layer along a path — a line, a shape outline, or a circle, wave or spiral — as real, native Figma Motion keyframes. A full walkthrough with 300+ live examples, from spinners to kinetic typography.
Tags: Figma, Motion, Plugin, Animation
URL: https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin
---
**Motion Path is a Figma plugin that makes any layer follow a path — a line you draw, the outline of a shape, or a circle, wave, or spiral — and writes the result as real, native Figma Motion keyframes.** This guide explains what the plugin does, shows every feature with a live example, and opens a library of **300+ ready-made path animations** for Figma — spinners, draw-on reveals, kinetic typography, charts, and more.

[Install Motion Path — it's free →](https://www.figma.com/community/plugin/1654530170219655744) [See the product page](https://systergon.com/products/figma-plugins/motion-path)

Figma added a real animation tool called **Motion**. Open the **Motion → Animations** panel on any layer and you can keyframe **Position, Scale, Rotation, Size, and Opacity**. Then you see one more option — **Path** — and it is greyed out. You cannot use it yet.

**Motion Path** is a plugin that gives you that missing piece today. It lets any layer follow a path: a line you draw, the edge of a shape, or a circle, wave, or spiral it makes for you. A dot can orbit a ring. An arrow can fly along a curve. A pin can drive down a road. A word can wrap around a circle.

The best part is what happens under the hood. Motion Path does **not** run its own little animation engine. It writes **real, native Figma Motion keyframes** onto your layer. So after you press _Apply_, the animation lives inside Figma like any other Motion animation. You can open the Motion panel and edit the keyframes by hand. You can inspect it in Dev Mode. You can export it to CSS, React, or JSON. Nothing is locked inside the plugin.

![Orbit spinner](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/orbit.svg) ![Comet](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/comet.svg) ![Spiral in](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/spiral-in.svg) ![Rocket launch](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/rocket-launch.svg)

This article walks through what the plugin does, shows every feature with a small moving example, and then opens the full **example library** — more than **300** ready-made animations you can preview and apply in one click. Every picture in this post is a tiny animated SVG, and each one shows the same kind of motion the plugin writes into Figma.

## Why "along a path" is hard in native Motion

Native Motion is great at moving a layer from point A to point B in a straight line, or scaling and fading it. But it has no idea about **curves**. There is no built-in way to say "follow this exact shape." That is the gap. Designers have wanted path motion for years — a marker that traces a route, a planet that circles a sun, a label that rides a wave.

Motion Path fills that gap by doing the math for you. It takes your path, measures it, and places keyframes evenly along it. The layer then moves through those keyframes, so it follows the shape closely and at a steady speed.

## What makes it different

**Real keyframes, not a fake preview.** Many plugins show you a nice preview and then export a video or a GIF. Motion Path is different. It samples your path and writes native **Position X / Y** keyframe tracks (plus Rotation, Scale, Opacity, and Path-Trim when you turn them on) straight onto the layer's Motion timeline. What you preview is what Figma plays.

**Steady speed, every time.** The plugin measures the path by **arc length** — the real distance along the curve. That means the keyframes are spaced evenly, with one on every corner. Your object moves at a constant speed and does not slow down or bunch up on tight bends (unless you _want_ it to — see the speed profile below).

**Future-proof.** Because the result is standard Figma Motion, it keeps working as Figma grows. Even if Figma turns on its own basic "Path" one day, your work is already native Motion data — there is nothing to move or convert.

## How it works — four steps

1. **Make a path.** Draw a vector line with the pen, pick any shape to trace, or let the plugin generate a circle, wave, or spiral.
2. **Select the path and the layer(s)** you want to animate. Put them inside a frame, so they have a Motion timeline.
3. **Set the options** — direction, rotation, easing, loops, and anything else — in the plugin panel.
4. **Press _Apply motion path_.** Then hit play, or open the Motion panel and fine-tune the keyframes it made.

That is the whole loop. Now let's look at what you can control.

## Choose your path three ways

You are never stuck drawing a shape by hand. Motion Path can read a path from three sources:

- **Vector** — animate along any pen or line path you draw.
- **Outline** — trace the edge of any shape: a rectangle, an ellipse, a polygon, a star, or a boolean shape. The object rides the outline.
- **Procedural** — the plugin builds a **Circle**, **Wave**, or **Spiral** for you, with no path layer at all. This is perfect for spinners and orbits.

If the plugin picks the wrong layer as the path, use **Set as path** and **Set as object** to choose them yourself. And **Load from selection** reads an animation you already applied, so you can re-open and edit it.

![Ellipse orbit](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/ellipse-orbit.svg) ![Sine cruise](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/sine-cruise.svg) ![Infinity loop](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/infinity.svg)

## Rotate to face the path

Turn on **Rotate to path** and the layer turns to face the direction it is moving. A paper plane points where it flies. An arrow aims down the curve. A little car steers around the bends.

**Auto-flip** keeps text and one-sided shapes the right way up when the path doubles back, so your object never ends up upside-down. You can also add a fixed rotation on top if you need a small tilt.

![Satellite orbit](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/satellite.svg) ![Roller coaster](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/roller-coaster.svg) ![Rocket launch](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/rocket-launch.svg)

## Scale and fade along the path

Two more tracks ride along with the motion:

- **Scale along path** grows or shrinks the layer from a start size to an end size.
- **Fade along path** changes the opacity from a start value to an end value.

Together they make things feel real. A product can shrink and fade as it flies into a cart. A dot can grow and glow as it moves. A "like" heart can pop up, grow, and fade away.

![Pulse dot](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/pulse.svg) ![Like pop](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/like-pop.svg) ![Add to cart](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/add-to-cart.svg)

## Draw the path on

Turn on **Draw path on** and the plugin animates the **stroke of the path itself**, in sync with the moving object. There are two styles:

- **Reveal** — the line draws on behind the object, like a pen leaving ink.
- **Trail** — a short band of stroke follows the object like a comet tail.

This is the effect behind signatures that write themselves, routes that draw across a map, and charts whose lines grow in as a dot leads the way.

![Signature reveal](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/signature.svg) ![Map route](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/map-route.svg) ![Line graph trace](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/line-graph.svg)

## Direction, loops, and range

**Direction** decides how the path is travelled inside the animation's time:

- **Forward** — start to end.
- **Reverse** — end to start.
- **Ping-pong** — out and back within the same time.

**Loops** repeat the trip as many times as you like, and you can make the loops seamless so there is no jump. The **Range** slider animates only a part of the path (say from 20% to 80%), and a **Normal offset** shifts the whole path sideways.

![Progress ring](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/progress-ring.svg) ![Bouncing ball](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/bouncing-ball.svg) ![Falling leaf](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/falling-leaf.svg)

## Native easing and springs

Easing is how the speed changes over time. Motion Path gives you the **full Figma easing set**: Hold, Linear, Ease in, Ease out, Ease in-and-out, the three **Back** overshoots, a **Custom bezier** you can drag, and the spring presets **Gentle, Quick, Bouncy, and Slow** — plus a **Custom spring**.

The smooth curves are applied as a **time warp**: the plugin keeps the sampled positions exact and only changes the _timing_, so the shape never distorts. Springs ride on the keyframes as Figma's own native easing, so their bounce and overshoot look real. You can even **bind easing to a variable** to reuse one motion feel across a file.

## Many objects at once

Select more than one layer and you get choreography:

- **Stagger** starts each layer a little later than the last, so they follow one another down the path.
- **Distribute** spaces the layers evenly along the _same_ path and moves them together, holding the gap — great for trains, comet trails, and conveyor belts.
- **Motion trail** bakes faded ghost copies behind an object for a speed-blur or onion-skin echo.

![Comet](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/comet.svg) ![Equalizer bars](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/equalizer-bar.svg) ![Heart burst](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/heart-burst.svg)

## Chain several paths together

Turn on **Chain paths** to send one object across several path pieces in a row — leg **A → B → C** on a single timeline. Add each path in the order you want it travelled. Choose **Constant speed** for one steady pace across the whole journey, or **Equal per leg** to give each path the same slice of time. This is how you build multi-step journeys and story sequences.

## Text on a path

Native Motion treats a text layer as one box. Motion Path can go further and animate **each letter**. It splits your text into one layer per character (keeping the font and style), lays the letters out along the curve, and writes motion for each one. So a word can sweep onto a **circle**, a **ring**, a **wave**, or a **spiral**, one letter at a time.

![Text around a circle](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/glyph-circle.svg) ![Bouncing letters](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/bouncing-letters.svg)

## Speed along the path

By default everything moves at a steady speed. But real motion often slows into corners and speeds up on the straights. The **Speed** section lets you draw a velocity graph, or turn on **Ease at corners** to slow into every bend automatically. It only changes the _timing_ of the keyframes — the positions stay exact — so the path shape is never bent out of place.

## Presets, sharing, and a starter library

Give a setup a name and **Save** it, and it is stored on your device for next time. Turn on **GitHub sync** to back up your presets and share them with your team across files. And the **Examples** tab is a whole library of ready-made motion you can preview, tweak, and apply in one click — which brings us to the best part.

---

## Practical examples: real product UI

Paths are not only for spinners and decoration — they solve everyday interface problems too. Here are six real app screens, each with the motion Motion Path writes into Figma. In every scene a named **Object** layer rides a named **Path** layer, so the animation is easy to read and easy to edit. These are real, drag-into-Figma mockups: pick the object and the path, apply a recipe, and press play.

![Delivery tracking animation in Figma — a courier pin drives along a route while the line draws on](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/scene-delivery.svg) ![Add to cart animation in Figma — a product flies along a curved path into the cart](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/scene-cart.svg) ![Music player animation in Figma — a playhead orbits the circular progress ring](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/scene-music.svg)

![Notification toast sliding in along a path in Figma](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/scene-toast.svg) ![Fitness progress ring animation in Figma — a marker sweeps around the ring](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/scene-fitness.svg) ![Analytics sparkline drawing on in Figma as a tracer moves along the chart line](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/scene-sparkline.svg)

- **Delivery tracking** — the courier pin drives the route with **rotate to path** and a **draw-on** reveal.
- **Add to cart** — the product **scales** down and **fades** as it flies into the cart.
- **Music player** — the playhead **orbits** the ring at a steady, linear speed.
- **Notification toast** — the card **slides** in along a short curve with a spring.
- **Fitness ring** — the marker **sweeps** around the progress ring.
- **Analytics sparkline** — the tracer **draws the chart line on** as it moves.

Every one of these is native Figma Motion, so it plays in prototypes, inspects in Dev Mode, and hands off to engineers as real code.

---

## The example library — 300+ ready-made animations

You do not have to start from a blank canvas. Motion Path ships with a large **Examples** library, sorted into clear categories. Each one is a real, editable setup: pick it, change the size or speed if you want, and apply. Below is **every example**, grouped by category, each shown as a small looping animation. Find one that fits, and you are one click from having it in your file — as native Figma Motion keyframes.

### Loaders & spinners — 19 examples

Busy states that never sit still — orbits, pulses, progress rings and chasing dots you can drop into any loading screen.

| ![Orbit spinner](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/orbit.svg) **Orbit spinner** | ![Infinity loop](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/infinity.svg) **Infinity loop** | ![Ellipse orbit](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/ellipse-orbit.svg) **Ellipse orbit** | ![Pulse dot](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/pulse.svg) **Pulse dot** |
| --- | --- | --- | --- |
| ![Progress ring](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/progress-ring.svg) **Progress ring** | ![Comet spinner](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/comet-spinner.svg) **Comet spinner** | ![Elastic progress](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/elastic-progress.svg) **Elastic progress** | ![Typing dots](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/dots-typing.svg) **Typing dots** |
| ![Spinner chase](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/spinner-chase.svg) **Spinner chase** | ![Radar sweep](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/radar-sweep.svg) **Radar sweep** | ![Skeleton shimmer](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/skeleton-shimmer.svg) **Skeleton shimmer** | ![Indeterminate bar](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/indeterminate-bar.svg) **Indeterminate bar** |
| ![Pulse ring](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/pulse-ring.svg) **Pulse ring** | ![Swing loader](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/swing-loader.svg) **Swing loader** | ![Fading orbit](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/orbit-fade.svg) **Fading orbit** | ![Punch and glide](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/sp-punch-glide.svg) **Punch and glide** |
| ![Loading dots ring](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/di-loading-dots-ring.svg) **Loading dots ring** | ![Ring echo pulses](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/tr-ring-pulse.svg) **Ring echo pulses** | ![Data pipeline](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/ch-data-pipeline.svg) **Data pipeline** |  |

### UI micro-interactions — 20 examples

The tiny movements that make an interface feel alive: shakes, slides, pops and toggles.

| ![Notification shake](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/bell-shake.svg) **Notification shake** | ![Tab underline](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/tab-underline.svg) **Tab underline** | ![Like pop](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/like-pop.svg) **Like pop** | ![Toggle slide](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/toggle-slide.svg) **Toggle slide** |
| --- | --- | --- | --- |
| ![Ripple tap](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/ripple-tap.svg) **Ripple tap** | ![Button press](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/button-press.svg) **Button press** | ![Toast slide-in](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/toast-slide.svg) **Toast slide-in** | ![Swipe to dismiss](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/swipe-dismiss.svg) **Swipe to dismiss** |
| ![Checkbox tick](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/checkbox-tick.svg) **Checkbox tick** | ![Radio select](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/radio-select.svg) **Radio select** | ![Tooltip pop](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/tooltip-pop.svg) **Tooltip pop** | ![Menu reveal](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/menu-reveal.svg) **Menu reveal** |
| ![Snackbar slide](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/snackbar-slide.svg) **Snackbar slide** | ![Segmented slide](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/segmented-slide.svg) **Segmented slide** | ![Badge count pop](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/badge-pop.svg) **Badge count pop** | ![Field focus line](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/field-focus.svg) **Field focus line** |
| ![Chip add](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/chip-add.svg) **Chip add** | ![Glide to settle](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/sp-glide-settle.svg) **Glide to settle** | ![Arrow nose on a guide](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/an-arrow-nose-guide.svg) **Arrow nose on a guide** | ![Ants marching](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/di-marching-ants-loop.svg) **Ants marching** |

### Reveals & draw-on — 14 examples

Lines and shapes that draw themselves on, plus content that wipes and zooms into view.

| ![Signature reveal](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/signature.svg) **Signature reveal** | ![Checkmark draw](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/checkmark.svg) **Checkmark draw** | ![Map route](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/map-route.svg) **Map route** | ![Heartbeat line](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/heartbeat.svg) **Heartbeat line** |
| --- | --- | --- | --- |
| ![Circle highlight](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/circle-highlight.svg) **Circle highlight** | ![Arrow draw](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/arrow-draw.svg) **Arrow draw** | ![Box outline reveal](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/box-reveal.svg) **Box outline reveal** | ![Wipe reveal](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/wipe-reveal.svg) **Wipe reveal** |
| ![Iris open](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/iris-open.svg) **Iris open** | ![Blinds reveal](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/blinds-reveal.svg) **Blinds reveal** | ![Fade-up reveal](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/fade-up-reveal.svg) **Fade-up reveal** | ![Zoom-in reveal](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/zoom-in-reveal.svg) **Zoom-in reveal** |
| ![Mask slide](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/mask-slide.svg) **Mask slide** | ![List stagger-in](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/list-stagger.svg) **List stagger-in** |  |  |

### Text & typography — 30 examples

Kinetic type — words on a ring, along a wave, spiralling in, or one letter at a time.

| ![Typewriter cursor](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/typewriter.svg) **Typewriter cursor** | ![Underline swipe](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/underline-swipe.svg) **Underline swipe** | ![Highlight sweep](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/highlight-sweep.svg) **Highlight sweep** | ![Wavy baseline](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/wavy-text.svg) **Wavy baseline** |
| --- | --- | --- | --- |
| ![Bouncing letters](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/bouncing-letters.svg) **Bouncing letters** | ![Text around a circle](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/glyph-circle.svg) **Text around a circle** | ![Wavy text sweep](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/glyph-wave.svg) **Wavy text sweep** | ![Spiral text](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/glyph-spiral.svg) **Spiral text** |
| ![Type on a ring (fade)](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/glyph-ring-fade.svg) **Type on a ring (fade)** | ![Marquee ticker](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/marquee.svg) **Marquee ticker** | ![Slide-up words](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/slide-up-words.svg) **Slide-up words** | ![Glitch jitter](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/glitch-jitter.svg) **Glitch jitter** |
| ![Letter drop](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/letter-drop.svg) **Letter drop** | ![Number count-up](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/count-up.svg) **Number count-up** | ![Split-flap board](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/split-flap.svg) **Split-flap board** | ![Text shine](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/text-shine.svg) **Text shine** |
| ![Words fade in](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/word-fade-in.svg) **Words fade in** | ![Type & delete](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/typewriter-delete.svg) **Type & delete** | ![Title scale-in](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/title-scale-in.svg) **Title scale-in** | ![Character cascade](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/char-cascade.svg) **Character cascade** |
| ![Headline onto an arch](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/gl-arch-headline.svg) **Headline onto an arch** | ![Straight-line ticker](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/gl-ticker-line.svg) **Straight-line ticker** | ![Caption fade-up](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/gl-caption-fade.svg) **Caption fade-up** | ![Title rise](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/gl-title-rise.svg) **Title rise** |
| ![Badge text ring](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/gl-badge-ring.svg) **Badge text ring** | ![Wavy banner (fill)](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/gl-banner-wave.svg) **Wavy banner (fill)** | ![Type spirals in](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/gl-spiral-in.svg) **Type spirals in** | ![Curved subtitle](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/gl-subtitle-curve.svg) **Curved subtitle** |
| ![Credits crawl a curve](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/gl-credits-ellipse.svg) **Credits crawl a curve** | ![Price sweeps on](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/gl-price-sweep.svg) **Price sweeps on** |  |  |

### Logo reveals — 14 examples

Give a logo an entrance: draw its outline, build it monoline, stamp it, or let it breathe.

| ![Draw logo mark](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/draw-logo.svg) **Draw logo mark** | ![Monoline build](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/monoline-build.svg) **Monoline build** | ![Swoosh](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/swoosh.svg) **Swoosh** | ![Emblem spin-up](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/emblem-spin.svg) **Emblem spin-up** |
| --- | --- | --- | --- |
| ![Spark burst](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/spark-burst.svg) **Spark burst** | ![Ribbon unfurl](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/ribbon-unfurl.svg) **Ribbon unfurl** | ![Badge stamp](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/badge-stamp.svg) **Badge stamp** | ![Logo pop](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/logo-pop.svg) **Logo pop** |
| ![Particle converge](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/particle-converge.svg) **Particle converge** | ![Logo shimmer](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/logo-shimmer.svg) **Logo shimmer** | ![Logo fade-up](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/logo-fade-up.svg) **Logo fade-up** | ![Wordmark wipe](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/wordmark-wipe.svg) **Wordmark wipe** |
| ![Logo drop](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/logo-drop.svg) **Logo drop** | ![Logo breathe](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/logo-pulse.svg) **Logo breathe** |  |  |

### Data & charts — 15 examples

Make numbers move — line traces, sparklines, gauge sweeps and bars that climb.

| ![Line graph trace](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/line-graph.svg) **Line graph trace** | ![Sparkline](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/sparkline.svg) **Sparkline** | ![Trend up](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/trend-up.svg) **Trend up** | ![Bar climb](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/bar-climb.svg) **Bar climb** |
| --- | --- | --- | --- |
| ![Scatter connect](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/scatter-connect.svg) **Scatter connect** | ![Donut progress](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/donut-progress.svg) **Donut progress** | ![Gauge sweep](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/gauge-sweep.svg) **Gauge sweep** | ![Area chart trace](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/area-trace.svg) **Area chart trace** |
| ![Candlestick scan](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/candlestick-scan.svg) **Candlestick scan** | ![Live ticker](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/live-ticker.svg) **Live ticker** | ![Funnel step-down](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/funnel-step.svg) **Funnel step-down** | ![Bar grow](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/bar-grow.svg) **Bar grow** |
| ![Pie sweep](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/pie-sweep.svg) **Pie sweep** | ![Radar chart draw](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/radar-chart.svg) **Radar chart draw** | ![Waterfall trace](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/waterfall.svg) **Waterfall trace** |  |

### Animated icons — 13 examples

Small icon states with big personality: a ringing bell, a spinning refresh, a nudging chevron.

| ![Refresh spin](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/icon-refresh.svg) **Refresh spin** | ![Bell ring](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/icon-bell-ring.svg) **Bell ring** | ![Download drop](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/icon-download.svg) **Download drop** | ![Heart beat](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/icon-heart-beat.svg) **Heart beat** |
| --- | --- | --- | --- |
| ![Trash toss](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/icon-trash-toss.svg) **Trash toss** | ![Chevron nudge](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/icon-chevron-nudge.svg) **Chevron nudge** | ![Upload lift](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/icon-upload.svg) **Upload lift** | ![Search scan](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/icon-search.svg) **Search scan** |
| ![Settings gear](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/icon-gear.svg) **Settings gear** | ![Arrow nudge](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/icon-arrow-nudge.svg) **Arrow nudge** | ![Location pin bob](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/icon-pin-bob.svg) **Location pin bob** | ![Snap to rest](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/sp-snap-rest.svg) **Snap to rest** |
| ![Clock hand sweep](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/an-clock-hand-sweep.svg) **Clock hand sweep** |  |  |  |

### Transitions & navigation — 18 examples

Screen-level motion — modals rising, drawers sliding, sheets snapping, pages turning.

| ![Modal rise](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/modal-rise.svg) **Modal rise** | ![Drawer slide](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/drawer-slide.svg) **Drawer slide** | ![Sheet snap](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/sheet-snap.svg) **Sheet snap** | ![Carousel swipe](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/carousel-swipe.svg) **Carousel swipe** |
| --- | --- | --- | --- |
| ![Page turn](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/page-turn.svg) **Page turn** | ![FAB expand](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/fab-expand.svg) **FAB expand** | ![Panel slide-in](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/panel-slide-right.svg) **Panel slide-in** | ![Fade through](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/fade-through.svg) **Fade through** |
| ![Banner drop](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/banner-drop.svg) **Banner drop** | ![Accordion expand](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/accordion-expand.svg) **Accordion expand** | ![Waypoint pause](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/sp-waypoint-pause.svg) **Waypoint pause** | ![Paper-plane nose](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/an-paper-plane-nose.svg) **Paper-plane nose** |
| ![Flowing dashed border](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/di-dashed-border-flow.svg) **Flowing dashed border** | ![Speed dash](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/tr-speed-dash.svg) **Speed dash** | ![Motion-blur swipe](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/tr-swipe.svg) **Motion-blur swipe** | ![Whoosh streak](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/tr-whoosh.svg) **Whoosh streak** |
| ![Metro line](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/ch-metro-line.svg) **Metro line** | ![Onboarding tour](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/ch-onboarding-tour.svg) **Onboarding tour** |  |  |

### Gestures & cursor — 12 examples

On-screen hints that teach a gesture: tap, swipe, drag, pinch and pull-to-refresh.

| ![Tap hint](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/tap-hint.svg) **Tap hint** | ![Swipe hint](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/swipe-hint.svg) **Swipe hint** | ![Drag along path](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/drag-track.svg) **Drag along path** | ![Scroll nudge](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/scroll-nudge.svg) **Scroll nudge** |
| --- | --- | --- | --- |
| ![Pull to refresh](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/pull-refresh.svg) **Pull to refresh** | ![Pinch zoom](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/pinch-zoom.svg) **Pinch zoom** | ![Long press](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/long-press.svg) **Long press** | ![Double tap](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/double-tap.svg) **Double tap** |
| ![Swipe up hint](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/swipe-up-hint.svg) **Swipe up hint** | ![Drag & drop](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/drag-and-drop.svg) **Drag & drop** | ![Hesitate then dart](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/sp-hesitate-dart.svg) **Hesitate then dart** | ![Pencil tip sketch](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/an-pencil-tip-sketch.svg) **Pencil tip sketch** |

### Social & reactions — 11 examples

Reactions worth double-tapping for — heart bursts, star ratings, thumbs up and floating emoji.

| ![Heart burst](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/heart-burst.svg) **Heart burst** | ![Star rating fill](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/star-rating.svg) **Star rating fill** | ![Thumbs up](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/thumbs-up.svg) **Thumbs up** | ![Emoji float](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/emoji-float.svg) **Emoji float** |
| --- | --- | --- | --- |
| ![Share swoosh](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/share-swoosh.svg) **Share swoosh** | ![Badge unlock](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/badge-unlock.svg) **Badge unlock** | ![Story progress](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/story-progress.svg) **Story progress** | ![Follow success](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/follow-success.svg) **Follow success** |
| ![Reaction tray](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/reaction-tray.svg) **Reaction tray** | ![Celebrate burst](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/celebrate-burst.svg) **Celebrate burst** | ![Wand sparkles](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/tr-wand-sparkles.svg) **Wand sparkles** |  |

### Commerce & finance — 16 examples

Shopping and money moments: add-to-cart throws, coin drops, price count-ups and card swipes.

| ![Add to cart](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/add-to-cart.svg) **Add to cart** | ![Coin drop](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/coin-drop.svg) **Coin drop** | ![Price count-up](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/price-countup.svg) **Price count-up** | ![Card swipe](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/card-swipe.svg) **Card swipe** |
| --- | --- | --- | --- |
| ![Receipt unroll](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/receipt-unroll.svg) **Receipt unroll** | ![Coin spin](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/coin-spin.svg) **Coin spin** | ![Order confirmed](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/order-confirmed.svg) **Order confirmed** | ![Contactless pay](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/contactless-pay.svg) **Contactless pay** |
| ![Sale tag pop](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/sale-tag-pop.svg) **Sale tag pop** | ![Slide to pay](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/slide-to-pay.svg) **Slide to pay** | ![Heavy launch](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/sp-heavy-launch.svg) **Heavy launch** | ![Map pin on route](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/an-map-pin-route.svg) **Map pin on route** |
| ![Sale badge corner](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/an-badge-corner-lob.svg) **Sale badge corner** | ![Conveyor belt](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/di-conveyor-belt.svg) **Conveyor belt** | ![Delivery route](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/ch-delivery-route.svg) **Delivery route** | ![Parcel sorting](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/ch-parcel-sort.svg) **Parcel sorting** |

### Game & arcade — 18 examples

Playful, punchy motion — power-ups, coin hops, projectile lobs and level-ups.

| ![Power-up float](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/power-up-float.svg) **Power-up float** | ![Coin hop](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/coin-hop.svg) **Coin hop** | ![Projectile lob](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/projectile-lob.svg) **Projectile lob** | ![Star burst](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/star-burst.svg) **Star burst** |
| --- | --- | --- | --- |
| ![Gem shine](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/gem-shine.svg) **Gem shine** | ![Level up](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/level-up.svg) **Level up** | ![Health refill](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/health-refill.svg) **Health refill** | ![Combo pop](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/combo-pop.svg) **Combo pop** |
| ![Spawn in](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/spawn-in.svg) **Spawn in** | ![Dash](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/dash-move.svg) **Dash** | ![Corner brake](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/sp-corner-brake.svg) **Corner brake** | ![Rocket tip leads](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/an-rocket-tip-arc.svg) **Rocket tip leads** |
| ![Train on a track](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/di-train-on-track.svg) **Train on a track** | ![Caterpillar crawl](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/di-caterpillar.svg) **Caterpillar crawl** | ![Onion-skin ball](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/tr-onion-ball.svg) **Onion-skin ball** | ![Rocket after-image](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/tr-rocket-afterimage.svg) **Rocket after-image** |
| ![Relay hand-off](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/ch-relay-baton.svg) **Relay hand-off** | ![Board-game hop](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/ch-board-hop.svg) **Board-game hop** |  |  |

### Audio & music — 11 examples

Sound made visible: equalizer bars, a spinning vinyl, a scanning waveform, a bobbing now-playing bar.

| ![Equalizer bars](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/equalizer-bar.svg) **Equalizer bars** | ![Vinyl spin](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/vinyl-spin.svg) **Vinyl spin** | ![Waveform scan](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/waveform-scan.svg) **Waveform scan** | ![Sound pulse](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/sound-pulse.svg) **Sound pulse** |
| --- | --- | --- | --- |
| ![Now-playing bob](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/now-playing-bob.svg) **Now-playing bob** | ![DJ scratch](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/dj-scratch.svg) **DJ scratch** | ![Seek progress](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/seek-progress.svg) **Seek progress** | ![Volume slide](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/volume-slide.svg) **Volume slide** |
| ![Beat bounce](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/beat-bounce.svg) **Beat bounce** | ![Recording blink](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/rec-blink.svg) **Recording blink** | ![Beat pulse](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/sp-beat-pulse.svg) **Beat pulse** |  |

### Physics & playful — 14 examples

Motion with weight — bounces, springs, pendulums, squash-and-stretch and elastic flings.

| ![Bouncing ball](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/bouncing-ball.svg) **Bouncing ball** | ![Pendulum](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/pendulum.svg) **Pendulum** | ![Spring drop](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/spring-drop.svg) **Spring drop** | ![Ping-pong glide](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/pingpong-glide.svg) **Ping-pong glide** |
| --- | --- | --- | --- |
| ![Squash bounce](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/squash-bounce.svg) **Squash bounce** | ![Overshoot slide](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/overshoot-slide.svg) **Overshoot slide** | ![Confetti fall](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/confetti-fall.svg) **Confetti fall** | ![Magnet snap](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/magnet-snap.svg) **Magnet snap** |
| ![Elastic fling](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/elastic-fling.svg) **Elastic fling** | ![Wrecking ball](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/wrecking-ball.svg) **Wrecking ball** | ![Jelly settle](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/jelly-settle.svg) **Jelly settle** | ![Swing in](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/swing-in.svg) **Swing in** |
| ![Anticipation pop](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/anticipation-pop.svg) **Anticipation pop** | ![Rubber band](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/rubber-band.svg) **Rubber band** |  |  |

### Ambient & decorative — 19 examples

Slow, calm background motion: comets, bubbles, fireflies, drifting ribbons and aurora.

| ![Comet](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/comet.svg) **Comet** | ![Floating bubble](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/floating-bubble.svg) **Floating bubble** | ![Falling leaf](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/falling-leaf.svg) **Falling leaf** | ![Wobble ring](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/wobble-ring.svg) **Wobble ring** |
| --- | --- | --- | --- |
| ![Parallax drift](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/parallax-drift.svg) **Parallax drift** | ![Firefly wander](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/firefly.svg) **Firefly wander** | ![Ribbon wave](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/ribbon-wave.svg) **Ribbon wave** | ![Aurora drift](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/aurora-drift.svg) **Aurora drift** |
| ![Starfield drift](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/starfield-drift.svg) **Starfield drift** | ![Lava-lamp blob](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/lava-blob.svg) **Lava-lamp blob** | ![Particle rise](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/particle-rise.svg) **Particle rise** | ![Breathing glow](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/breathing.svg) **Breathing glow** |
| ![Twinkle](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/twinkle.svg) **Twinkle** | ![Gentle sway](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/gentle-sway.svg) **Gentle sway** | ![Spiral wind-up](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/sp-spiral-windup.svg) **Spiral wind-up** | ![Comet head streak](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/an-comet-head-streak.svg) **Comet head streak** |
| ![Drifting particles](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/di-wave-particles.svg) **Drifting particles** | ![Beads on a figure-eight](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/di-beads-figure8.svg) **Beads on a figure-eight** | ![Treasure map](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/ch-treasure-map.svg) **Treasure map** |  |

### Illustration & motion graphics — 20 examples

Story-sized paths — rockets, paper planes, birds, butterflies and loop-the-loops.

| ![Rocket launch](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/rocket-launch.svg) **Rocket launch** | ![Paper plane](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/paper-plane.svg) **Paper plane** | ![Satellite orbit](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/satellite.svg) **Satellite orbit** | ![Spiral in](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/spiral-in.svg) **Spiral in** |
| --- | --- | --- | --- |
| ![Sine cruise](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/sine-cruise.svg) **Sine cruise** | ![Roller coaster](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/roller-coaster.svg) **Roller coaster** | ![Bird flight](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/bird-flight.svg) **Bird flight** | ![Balloon rise](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/balloon-rise.svg) **Balloon rise** |
| ![Shooting star](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/shooting-star.svg) **Shooting star** | ![Loop-the-loop](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/plane-loop.svg) **Loop-the-loop** | ![Butterfly flutter](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/butterfly-flutter.svg) **Butterfly flutter** | ![Wave surf](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/wave-surf.svg) **Wave surf** |
| ![Car drive](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/car-drive.svg) **Car drive** | ![Fish swim](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/fish-swim.svg) **Fish swim** | ![Walk cycle bob](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/walk-bob.svg) **Walk cycle bob** | ![Map pin drop](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/pin-drop.svg) **Map pin drop** |
| ![Speech-bubble tail pop](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/an-speech-tail-pop.svg) **Speech-bubble tail pop** | ![Planets on an orbit](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/di-planet-orbit.svg) **Planets on an orbit** | ![Trailing cursor](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/tr-cursor.svg) **Trailing cursor** | ![Story beats](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/ch-story-beats.svg) **Story beats** |

### Nature & weather — 17 examples

The weather, animated: rain streaks, drifting snow, sun rays, ripples and meteors.

| ![Rain streak](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/rain-streak.svg) **Rain streak** | ![Snow drift](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/snow-drift.svg) **Snow drift** | ![Sun rays](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/sun-rays.svg) **Sun rays** | ![Cloud drift](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/cloud-drift.svg) **Cloud drift** |
| --- | --- | --- | --- |
| ![Water ripple](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/water-ripple.svg) **Water ripple** | ![Fire flicker](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/fire-flicker.svg) **Fire flicker** | ![Meteor](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/meteor.svg) **Meteor** | ![Sunrise](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/sunrise.svg) **Sunrise** |
| ![Wind sway](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/wind-sway.svg) **Wind sway** | ![Lightning strike](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/lightning.svg) **Lightning strike** | ![Ocean wave](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/ocean-wave.svg) **Ocean wave** | ![Gust whip](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/sp-gust-whip.svg) **Gust whip** |
| ![Raindrop tip trail](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/an-raindrop-tip-trail.svg) **Raindrop tip trail** | ![Comet dot trail](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/di-comet-trail.svg) **Comet dot trail** | ![Comet tail](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/tr-comet.svg) **Comet tail** | ![Shooting spark](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/tr-shooting-spark.svg) **Shooting spark** |
| ![Road trip](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/ch-road-trip.svg) **Road trip** |  |  |  |

### Link hover lines — 20 examples

Underline effects for links and buttons — swipes, strikes, draws and glitches, ready for hover.

| ![Metis — swipe in](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/lh-metis.svg) **Metis — swipe in** | ![Io — double swipe](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/lh-io.svg) **Io — double swipe** | ![Thebe — swipe & thicken](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/lh-thebe.svg) **Thebe — swipe & thicken** | ![Leda — soft swipe](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/lh-leda.svg) **Leda — soft swipe** |
| --- | --- | --- | --- |
| ![Ersa — strike-through](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/lh-ersa.svg) **Ersa — strike-through** | ![Elara — grow from centre](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/lh-elara.svg) **Elara — grow from centre** | ![Dia — fade up](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/lh-dia.svg) **Dia — fade up** | ![Kale — roll up](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/lh-kale.svg) **Kale — roll up** |
| ![Carpo — line swap](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/lh-carpo.svg) **Carpo — line swap** | ![Helike — glitch](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/lh-helike.svg) **Helike — glitch** | ![Mneme — cover sweep](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/lh-mneme.svg) **Mneme — cover sweep** | ![Herse — draw on](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/lh-herse.svg) **Herse — draw on** |
| ![Arc — draw on](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/lh-arc.svg) **Arc — draw on** | ![Carme — scribble](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/lh-carme.svg) **Carme — scribble** | ![Eirene — squash](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/lh-eirene.svg) **Eirene — squash** | ![Iocaste — slide](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/lh-iocaste.svg) **Iocaste — slide** |
| ![Themisto — swipe from right](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/lh-themisto.svg) **Themisto — swipe from right** | ![Pandia — box draw](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/lh-pandia.svg) **Pandia — box draw** | ![Sinope — grow from centre](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/lh-sinope.svg) **Sinope — grow from centre** | ![Aitne — strike draw](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin/images/lh-aitne.svg) **Aitne — strike draw** |

---

## Real things you can build

The examples are fun on their own, but they map to everyday design work:

- **Loading and empty states.** Drop in an orbit spinner, a pulse dot, or a progress ring instead of a flat placeholder.
- **Delight and feedback.** A heart burst on a like, a checkmark that draws itself on a success screen, a toast that slides in.
- **Onboarding hints.** A tap or swipe hint that teaches a gesture, a chevron that nudges people to scroll.
- **Data that moves.** A sparkline that traces itself, a gauge that sweeps, bars that climb — motion helps numbers land.
- **Brand and logo moments.** Draw a logo mark on, stamp a badge, or let a wordmark wipe into view.
- **Product storytelling.** A pin that drives a delivery route, a plane that flies a journey, a rocket that launches.

Because everything is native Motion, these are not throwaway mockups. They travel with the file, they play in prototypes, and they hand off cleanly to engineers.

## Built for a clean developer handoff

This is worth repeating, because it is the quiet superpower of the plugin. The animation you make is **native Figma Motion**, so:

- It shows up in the **Motion panel** and can be edited by anyone, with or without the plugin.
- It **inspects in Dev Mode** like any other animation.
- It **exports to CSS, React, or JSON**, so engineers get real code, not a video to copy by eye.

Design and code stay in sync. That is the whole point.

## Getting started

1. **[Install Motion Path from the Figma Community](https://www.figma.com/community/plugin/1654530170219655744)** — it is free.
2. Draw a path, or pick a shape, or choose a procedural circle / wave / spiral.
3. Select the path and the layer(s) you want to move — inside a frame.
4. Open the plugin, pick an example or set your own options, and press **Apply motion path**.
5. Press play. Then open the Motion panel and make it yours.

A few small tips that save time:

- Your layers need to sit **inside a frame** to get a Motion timeline.
- Use **Set as path** and **Set as object** when you want to choose them by hand.
- Start from an **Example** — it is the fastest way to learn what each option does. Change one setting at a time and watch how the motion changes.

## Frequently asked questions

**Does Motion Path write real Figma keyframes?**
Yes. It does not run a separate animation engine. It writes native Figma Motion keyframe tracks (Position, Rotation, Scale, Opacity, and Path-Trim) onto your layer, so you can edit them by hand, inspect them in Dev Mode, and export them to CSS, React, or JSON.

**Can I animate text along a path in Figma?**
Yes. Motion Path can move a whole text layer along a path, or split a word into single letters and animate each one — so you can wrap text around a circle or a ring, run it along a wave, spiral it in, or type it on one letter at a time.

**Do I have to draw a path first?**
No. You can draw a vector path with the pen, trace the outline of any shape, or let the plugin generate a circle, wave, or spiral with no path layer at all.

**Will my work still make sense once Figma turns on its own "Path"?**
Yes. Because the output is standard native Figma Motion, there is nothing to convert. Your animations keep working as Figma's Motion tools grow.

**How do I get a smooth, constant speed?**
Motion Path measures the path by arc length and spaces the keyframes evenly, so movement is steady by default. When you want easing, corner slow-downs, or a custom speed graph, you can add them without bending the path's shape.

## Wrapping up

Native Figma Motion gave us keyframes for position, scale, rotation, size, and opacity — but not for paths. Motion Path adds the missing piece and then goes well beyond it: rotate-to-path, draw-on strokes, scale and fade, springs, loops, chained journeys, kinetic type, multi-object choreography, and a library of **300+** ready-made animations to start from.

And it does all of this the right way — by writing **real, native Motion keyframes** you fully own. Preview one of the examples above, apply it, open the Motion panel, and you will see exactly what it made. From there, it is just Figma.

## Get Motion Path

Ready to animate along a path? **Motion Path** is free on the Figma Community — install it, pick an example, and press play.

[Install Motion Path — free →](https://www.figma.com/community/plugin/1654530170219655744) [See the product page](https://systergon.com/products/figma-plugins/motion-path)

- **Install the plugin:** [Motion Path on the Figma Community](https://www.figma.com/community/plugin/1654530170219655744)
- **Product page & more information:** [systergon.com/products/figma-plugins/motion-path](https://systergon.com/products/figma-plugins/motion-path)
- **Questions or feedback:** [info@systergon.com](mailto:info@systergon.com)

_Every animation in this article is a small SVG generated from the plugin's own example data, so what you see here is the same motion Motion Path writes into Figma._