# Systergon

> Design and developer tools for Jira, Confluence, and Figma. Systergon builds focused, high-quality Figma plugins (charts, waves, icons, sounds, motion and more) and Atlassian apps for Figma integration, design systems, and diagrams. Used by 100,000+ designers.

Systergon (https://systergon.com) is an independent studio shipping small, sharp tools for designers and developers. This file lists the most useful pages for AI agents and language models.

## Figma Plugins

- [Motion Path](https://systergon.com/products/figma-plugins/motion-path): Animate along a path in Figma Motion
- [Figma Charts](https://systergon.com/products/figma-plugins/figma-charts): Chart plugin for Figma
- [WaveCraft](https://systergon.com/products/figma-plugins/wavecraft): Wave background generator for Figma
- [Figma UI Icon Set](https://systergon.com/products/figma-plugins/figma-ui-icon-set): Icon plugin for Figma
- [Figma Sound Kit](https://systergon.com/products/figma-plugins/figma-sound-kit): Sound effects plugin for Figma
- [Figma Duotones](https://systergon.com/products/figma-plugins/figma-duotones): Duotone effect plugin for Figma
- [Treejack](https://systergon.com/products/figma-plugins/treejack): Tree testing plugin for Figma
- [HTML Tags & Attributes](https://systergon.com/products/figma-plugins/html-tags-attributes): Figma to HTML for developer handoff
- [Old-school Prototyping](https://systergon.com/products/figma-plugins/old-school-prototyping): Export Figma to HTML pages

## Motion Path — Examples (300+ ready-made Figma Motion recipes)

Preview the exact motion and apply it as native Figma Motion keyframes. Gallery: https://systergon.com/motion-path/examples

### Loaders & spinners
- [Orbit spinner](https://systergon.com/motion-path/examples/orbit): Constant-speed loop around a circle, facing the direction of travel.
- [Infinity loop](https://systergon.com/motion-path/examples/infinity): Endless figure-eight — a classic “working…” indicator.
- [Ellipse orbit](https://systergon.com/motion-path/examples/ellipse-orbit): A flattened orbit — reads as a spinner seen in perspective.
- [Pulse dot](https://systergon.com/motion-path/examples/pulse): A dot that grows and fades in a heartbeat rhythm — a subtle busy state.
- [Progress ring](https://systergon.com/motion-path/examples/progress-ring): A circular progress ring fills up, then holds full.
- [Comet spinner](https://systergon.com/motion-path/examples/comet-spinner): A comet streaks around a ring at speed — an energetic spinner.
- [Elastic progress](https://systergon.com/motion-path/examples/elastic-progress): A progress bar springs across its track with a bouncy finish.
- [Typing dots](https://systergon.com/motion-path/examples/dots-typing): A dot bobs up and down — stagger three for a typing indicator.
- [Spinner chase](https://systergon.com/motion-path/examples/spinner-chase): A tail chases around a ring with a trailing band — a chasing spinner.
- [Radar sweep](https://systergon.com/motion-path/examples/radar-sweep): A sweep arm rotates around like radar, facing the direction of travel.
- [Skeleton shimmer](https://systergon.com/motion-path/examples/skeleton-shimmer): A highlight band sweeps across a placeholder — a loading skeleton.
- [Indeterminate bar](https://systergon.com/motion-path/examples/indeterminate-bar): A segment sweeps across a track on repeat — a Material linear loader.
- [Pulse ring](https://systergon.com/motion-path/examples/pulse-ring): A ring expands and fades on repeat — a sonar “please wait” loader.
- [Swing loader](https://systergon.com/motion-path/examples/swing-loader): A pendulum dot swings side to side — stagger a row for a cradle loader.
- [Fading orbit](https://systergon.com/motion-path/examples/orbit-fade): A dot circles a ring, brightening and dimming — a soft spinner.
- [Punch and glide](https://systergon.com/motion-path/examples/sp-punch-glide): A spinner that punches out fast on each pass, then coasts at a slow, even glide.
- [Loading dots ring](https://systergon.com/motion-path/examples/di-loading-dots-ring): Select N copies to distribute as loading dots evenly spaced around a ring, endlessly circling.
- [Ring echo pulses](https://systergon.com/motion-path/examples/tr-ring-pulse): Evenly spaced echoes chase each other continuously around a closed ring.
- [Data pipeline](https://systergon.com/motion-path/examples/ch-data-pipeline): A packet flows leg A at a steady rate and glides on to the next node; pick each connector vector and hit “Add leg” to pipe it through stages B, C… end to end.

### UI micro-interactions
- [Tethered label](https://systergon.com/motion-path/examples/scene-tether): A callout label stays pinned to an object as it travels the path — a moving annotation.
- [Notification shake](https://systergon.com/motion-path/examples/bell-shake): A quick side-to-side shake for a bell or alert icon.
- [Tab underline](https://systergon.com/motion-path/examples/tab-underline): An indicator sliding between tabs with a smooth ease.
- [Like pop](https://systergon.com/motion-path/examples/like-pop): A heart that pops up, grows, and fades — a reaction burst.
- [Toggle slide](https://systergon.com/motion-path/examples/toggle-slide): A switch knob gliding from off to on.
- [Ripple tap](https://systergon.com/motion-path/examples/ripple-tap): A Material ripple expands from the tap point and fades out.
- [Button press](https://systergon.com/motion-path/examples/button-press): A button dips on press and snaps back (0.96 → 1.0).
- [Toast slide-in](https://systergon.com/motion-path/examples/toast-slide): A toast slides up and settles with a spring, fading in.
- [Swipe to dismiss](https://systergon.com/motion-path/examples/swipe-dismiss): A card swipes off-screen and fades — swipe-to-dismiss feedback.
- [Checkbox tick](https://systergon.com/motion-path/examples/checkbox-tick): A checkbox tick draws on with a quick, confident stroke.
- [Radio select](https://systergon.com/motion-path/examples/radio-select): A radio dot springs into the ring when selected.
- [Tooltip pop](https://systergon.com/motion-path/examples/tooltip-pop): A tooltip pops up from its anchor, scaling and fading in.
- [Menu reveal](https://systergon.com/motion-path/examples/menu-reveal): A dropdown menu slides down and fades in beneath its trigger.
- [Snackbar slide](https://systergon.com/motion-path/examples/snackbar-slide): A snackbar slides up from the bottom edge and holds.
- [Segmented slide](https://systergon.com/motion-path/examples/segmented-slide): A segmented-control pill glides to the selected segment.
- [Badge count pop](https://systergon.com/motion-path/examples/badge-pop): A notification badge pops onto an icon with a springy overshoot.
- [Field focus line](https://systergon.com/motion-path/examples/field-focus): An underline draws across a text field on focus, then holds.
- [Chip add](https://systergon.com/motion-path/examples/chip-add): A chip / tag pops into a filter row with a quick spring.
- [Glide to settle](https://systergon.com/motion-path/examples/sp-glide-settle): A knob that enters fast and decelerates smoothly to a gentle stop.
- [Arrow nose on a guide](https://systergon.com/motion-path/examples/an-arrow-nose-guide): An arrow whose nose (right-centre anchor) rides a curving guide line, the tip always pointing the way ahead.
- [Ants marching](https://systergon.com/motion-path/examples/di-marching-ants-loop): Select N copies to distribute as ants marching shoulder-to-shoulder around a loop.

### Reveals & draw-on
- [Signature reveal](https://systergon.com/motion-path/examples/signature): Draws a stroke on as the object rides its tip. Use with a vector path.
- [Checkmark draw](https://systergon.com/motion-path/examples/checkmark): A success check that draws itself in one confident stroke.
- [Map route](https://systergon.com/motion-path/examples/map-route): A pin traces a route while the line draws on behind it.
- [Heartbeat line](https://systergon.com/motion-path/examples/heartbeat): An ECG pulse that sweeps across the screen.
- [Circle highlight](https://systergon.com/motion-path/examples/circle-highlight): A hand-drawn circle scribbles around an element to call it out.
- [Arrow draw](https://systergon.com/motion-path/examples/arrow-draw): An arrow draws itself to point something out, then holds.
- [Box outline reveal](https://systergon.com/motion-path/examples/box-reveal): A box outline draws on around content — a banner build-in.
- [Wipe reveal](https://systergon.com/motion-path/examples/wipe-reveal): A band wipes across to reveal content underneath (a moving trail).
- [Iris open](https://systergon.com/motion-path/examples/iris-open): A circular iris scales open to reveal the scene, then holds.
- [Blinds reveal](https://systergon.com/motion-path/examples/blinds-reveal): A zig-zag wipe rakes across content like opening venetian blinds.
- [Fade-up reveal](https://systergon.com/motion-path/examples/fade-up-reveal): Content fades in and slides up — the ubiquitous scroll-in reveal.
- [Zoom-in reveal](https://systergon.com/motion-path/examples/zoom-in-reveal): A hero image scales down into place from oversized, fading in.
- [Mask slide](https://systergon.com/motion-path/examples/mask-slide): A band slides down a column to reveal text from behind a mask.
- [List stagger-in](https://systergon.com/motion-path/examples/list-stagger): List rows fade and slide up one after another as the list loads.

### Text & typography
- [Typewriter cursor](https://systergon.com/motion-path/examples/typewriter): A cursor sweeps a baseline, revealing text as it goes, then holds.
- [Underline swipe](https://systergon.com/motion-path/examples/underline-swipe): An underline swipes in beneath a word.
- [Highlight sweep](https://systergon.com/motion-path/examples/highlight-sweep): A highlighter band sweeps across a phrase.
- [Wavy baseline](https://systergon.com/motion-path/examples/wavy-text): Letters ride a gentle wave — text on a wobbling baseline.
- [Bouncing letters](https://systergon.com/motion-path/examples/bouncing-letters): A mark bounces along the baseline — great for playful letter entrances.
- [Text around a circle](https://systergon.com/motion-path/examples/glyph-circle): Splits a text layer into glyphs and sweeps each letter onto a circle — kinetic type on a ring.
- [Wavy text sweep](https://systergon.com/motion-path/examples/glyph-wave): Letters ride a sine wave and settle into place one after another — legible spacing kept.
- [Spiral text](https://systergon.com/motion-path/examples/glyph-spiral): Type spirals inward — each glyph flies along the curl to its spot.
- [Type on a ring (fade)](https://systergon.com/motion-path/examples/glyph-ring-fade): Glyphs sit around a ring and fade up in sequence — a pure typographic reveal, no travel.
- [Marquee ticker](https://systergon.com/motion-path/examples/marquee): Text scrolls continuously like a news ticker (loop it).
- [Slide-up words](https://systergon.com/motion-path/examples/slide-up-words): Words slide up into place, staggered one after another.
- [Glitch jitter](https://systergon.com/motion-path/examples/glitch-jitter): A rapid horizontal jitter for a glitch text effect.
- [Letter drop](https://systergon.com/motion-path/examples/letter-drop): Letters drop in from above and bounce into place, one after another.
- [Number count-up](https://systergon.com/motion-path/examples/count-up): A number ticks up into place with a small pop, staggered per digit.
- [Split-flap board](https://systergon.com/motion-path/examples/split-flap): Characters flip on a fast vertical shuffle — a departure-board effect.
- [Text shine](https://systergon.com/motion-path/examples/text-shine): A light streak sweeps across the letters — a glossy shine pass.
- [Words fade in](https://systergon.com/motion-path/examples/word-fade-in): Words fade in one by one — a calm, readable headline reveal.
- [Type & delete](https://systergon.com/motion-path/examples/typewriter-delete): A cursor types a line on, then backspaces it away (ping-pong reveal).
- [Title scale-in](https://systergon.com/motion-path/examples/title-scale-in): A hero title scales up a touch and fades in — a confident entrance.
- [Character cascade](https://systergon.com/motion-path/examples/char-cascade): Characters cascade down into place, staggered one after another.
- [Headline onto an arch](https://systergon.com/motion-path/examples/gl-arch-headline): A headline sweeps letter by letter onto a rainbow arch and settles into place.
- [Straight-line ticker](https://systergon.com/motion-path/examples/gl-ticker-line): Lays type flat along a straight baseline — a stock ticker or status strip, no travel.
- [Caption fade-up](https://systergon.com/motion-path/examples/gl-caption-fade): A subtitle caption fades up in place, letter after letter, on a level baseline.
- [Title rise](https://systergon.com/motion-path/examples/gl-title-rise): A title lifts and fades in letter by letter, each glyph rising into its spot.
- [Badge text ring](https://systergon.com/motion-path/examples/gl-badge-ring): Wraps type all the way around a circular badge — a seal or stamp laid on the ring.
- [Wavy banner (fill)](https://systergon.com/motion-path/examples/gl-banner-wave): Letters spread across a big sine wave and bounce onto it — a playful banner headline.
- [Type spirals in](https://systergon.com/motion-path/examples/gl-spiral-in): Each glyph flies along a tight inward spiral and eases slowly into place.
- [Curved subtitle](https://systergon.com/motion-path/examples/gl-subtitle-curve): A subtitle fades up along a gentle downward smile curve beneath the title.
- [Credits crawl a curve](https://systergon.com/motion-path/examples/gl-credits-ellipse): Type rides slowly around an oval curve like end credits crawling on a bezel.
- [Price sweeps on](https://systergon.com/motion-path/examples/gl-price-sweep): A price or number sweeps quickly onto a short baseline — a snappy value reveal on a tag.

### Link hover lines
- [Metis — swipe in](https://systergon.com/motion-path/examples/lh-metis): An underline swipes in from the left on hover (origin-swap wipe).
- [Io — double swipe](https://systergon.com/motion-path/examples/lh-io): Two stacked underlines swipe in from opposite ends together.
- [Thebe — swipe & thicken](https://systergon.com/motion-path/examples/lh-thebe): A double underline swipes in from the left and thickens as it lands.
- [Leda — soft swipe](https://systergon.com/motion-path/examples/lh-leda): A bold underline swipes in from the left as the word slides across.
- [Ersa — strike-through](https://systergon.com/motion-path/examples/lh-ersa): A rule swipes across the middle of the word while it scales up.
- [Elara — grow from centre](https://systergon.com/motion-path/examples/lh-elara): A short underline pops out from the centre, thickening as it lands.
- [Dia — fade up](https://systergon.com/motion-path/examples/lh-dia): Two thin lines fade in and rise into place, one after the other.
- [Kale — roll up](https://systergon.com/motion-path/examples/lh-kale): A thick bar unfurls from the baseline, then rolls up and away.
- [Carpo — line swap](https://systergon.com/motion-path/examples/lh-carpo): One underline swipes in from the left as a second swipes away.
- [Helike — glitch](https://systergon.com/motion-path/examples/lh-helike): The underline stutters and jitters in a rapid glitch.
- [Mneme — cover sweep](https://systergon.com/motion-path/examples/lh-mneme): A highlight band sweeps across the word to cover it, then clears.
- [Herse — draw on](https://systergon.com/motion-path/examples/lh-herse): The underline draws itself on stroke-by-stroke (SVG line-draw).
- [Arc — draw on](https://systergon.com/motion-path/examples/lh-arc): A curved underline arcs on beneath the word (SVG line-draw).
- [Carme — scribble](https://systergon.com/motion-path/examples/lh-carme): A hand-drawn scribble underline draws on beneath the word.
- [Eirene — squash](https://systergon.com/motion-path/examples/lh-eirene): A rounded bar squashes down into a thin underline with a springy snap.
- [Iocaste — slide](https://systergon.com/motion-path/examples/lh-iocaste): A long rule slides sideways to reveal a fresh underline segment.
- [Themisto — swipe from right](https://systergon.com/motion-path/examples/lh-themisto): An underline swipes in from the right on hover (origin-swap wipe).
- [Pandia — box draw](https://systergon.com/motion-path/examples/lh-pandia): A box outline draws itself around the word on hover (SVG line-draw).
- [Sinope — grow from centre](https://systergon.com/motion-path/examples/lh-sinope): A double underline grows outward from the centre on hover.
- [Aitne — strike draw](https://systergon.com/motion-path/examples/lh-aitne): A strike-through rule draws itself across the word on hover.

### Logo reveals
- [Draw logo mark](https://systergon.com/motion-path/examples/draw-logo): A logo outline draws itself, then holds for a beat.
- [Monoline build](https://systergon.com/motion-path/examples/monoline-build): A one-line monogram builds in a single continuous stroke.
- [Swoosh](https://systergon.com/motion-path/examples/swoosh): A dynamic swoosh whips on, then settles.
- [Emblem spin-up](https://systergon.com/motion-path/examples/emblem-spin): An emblem orbits up and scales into place.
- [Spark burst](https://systergon.com/motion-path/examples/spark-burst): Sparks burst outward from the centre, growing and brightening.
- [Ribbon unfurl](https://systergon.com/motion-path/examples/ribbon-unfurl): A ribbon unfurls across the mark with a moving band.
- [Badge stamp](https://systergon.com/motion-path/examples/badge-stamp): A seal stamps down hard and holds — an approval stamp.
- [Logo pop](https://systergon.com/motion-path/examples/logo-pop): A mark springs in from nothing with an overshoot, then holds.
- [Particle converge](https://systergon.com/motion-path/examples/particle-converge): Sparks spiral inward and brighten to form the mark.
- [Logo shimmer](https://systergon.com/motion-path/examples/logo-shimmer): A light sweep glints across the logo once, then settles.
- [Logo fade-up](https://systergon.com/motion-path/examples/logo-fade-up): A logo fades in and rises gently into place — the safe default intro.
- [Wordmark wipe](https://systergon.com/motion-path/examples/wordmark-wipe): A wordmark reveals left-to-right behind a moving mask.
- [Logo drop](https://systergon.com/motion-path/examples/logo-drop): A mark drops in from above and settles with a spring.
- [Logo breathe](https://systergon.com/motion-path/examples/logo-pulse): A mark breathes with a slow scale pulse — a subtle idle loop.

### Data & charts
- [Connected beads](https://systergon.com/motion-path/examples/scene-connect-chain): Three objects ride one path a gap apart, joined by a chain of lines that stretch and turn as they move.
- [Line graph trace](https://systergon.com/motion-path/examples/line-graph): A dot traces a line graph, drawing the trend as it goes.
- [Sparkline](https://systergon.com/motion-path/examples/sparkline): A compact sparkline draws itself in one quick pass.
- [Trend up](https://systergon.com/motion-path/examples/trend-up): An upward trend line climbs and draws on, banking with the slope.
- [Bar climb](https://systergon.com/motion-path/examples/bar-climb): A marker climbs a bar-chart staircase as the steps build in.
- [Scatter connect](https://systergon.com/motion-path/examples/scatter-connect): Connects scattered data points one by one with a moving trail.
- [Donut progress](https://systergon.com/motion-path/examples/donut-progress): A donut chart segment sweeps in and holds.
- [Gauge sweep](https://systergon.com/motion-path/examples/gauge-sweep): A gauge needle sweeps from empty to full, then holds.
- [Area chart trace](https://systergon.com/motion-path/examples/area-trace): An area chart line traces with a moving highlight band.
- [Candlestick scan](https://systergon.com/motion-path/examples/candlestick-scan): A playhead scans a volatile price series with a moving band.
- [Live ticker](https://systergon.com/motion-path/examples/live-ticker): A live value line scrolls by seamlessly — a streaming metric.
- [Funnel step-down](https://systergon.com/motion-path/examples/funnel-step): A marker steps down a conversion funnel as each stage draws in.
- [Bar grow](https://systergon.com/motion-path/examples/bar-grow): A bar grows up from the axis — stagger a row for a bar-chart build.
- [Pie sweep](https://systergon.com/motion-path/examples/pie-sweep): A full pie slice sweeps in from twelve o’clock, then holds.
- [Radar chart draw](https://systergon.com/motion-path/examples/radar-chart): A radar / spider polygon draws itself edge by edge, then holds.
- [Waterfall trace](https://systergon.com/motion-path/examples/waterfall): A marker traces a waterfall chart’s up-and-down steps as it draws on.

### Physics & playful
- [Bouncing ball](https://systergon.com/motion-path/examples/bouncing-ball): A ball bouncing across with decaying hops.
- [Pendulum](https://systergon.com/motion-path/examples/pendulum): Swings back and forth over an arc, easing at each end.
- [Spring drop](https://systergon.com/motion-path/examples/spring-drop): Drops in and settles with a springy overshoot.
- [Ping-pong glide](https://systergon.com/motion-path/examples/pingpong-glide): Slides across and back forever, easing at both ends.
- [Squash & stretch](https://systergon.com/motion-path/examples/squash-stretch): A dot stretches as it speeds up and squashes as it slows — the classic principle.
- [Banking swim](https://systergon.com/motion-path/examples/banking-swim): Rides a wave, leaning into each curve and stretching on the fast dips.
- [Squash bounce](https://systergon.com/motion-path/examples/squash-bounce): A ball bounces with a hint of squash-and-stretch (12 principles).
- [Overshoot slide](https://systergon.com/motion-path/examples/overshoot-slide): Slides in and overshoots before settling (spring/anticipation).
- [Confetti fall](https://systergon.com/motion-path/examples/confetti-fall): A confetti piece flutters, tumbles, and fades on the way down.
- [Magnet snap](https://systergon.com/motion-path/examples/magnet-snap): An object creeps then snaps hard to its target (accelerating ease).
- [Elastic fling](https://systergon.com/motion-path/examples/elastic-fling): Flings out and snaps back past its origin — an elastic recoil.
- [Wrecking ball](https://systergon.com/motion-path/examples/wrecking-ball): A heavy weight swings slowly through a wide arc, banking as it goes.
- [Jelly settle](https://systergon.com/motion-path/examples/jelly-settle): An object lands and wobbles like jelly before settling (soft spring).
- [Swing in](https://systergon.com/motion-path/examples/swing-in): Slides in and overshoots past its mark before settling (ease-out back).
- [Anticipation pop](https://systergon.com/motion-path/examples/anticipation-pop): Winds back before it leaps up — anticipation (ease-in back).
- [Rubber band](https://systergon.com/motion-path/examples/rubber-band): Stretches out and snaps back past centre — an elastic rubber-band.

### Ambient & decorative
- [Comet](https://systergon.com/motion-path/examples/comet): Accelerates along a wave, growing and brightening as it goes.
- [Floating bubble](https://systergon.com/motion-path/examples/floating-bubble): Drifts gently upward with a lazy sway.
- [Falling leaf](https://systergon.com/motion-path/examples/falling-leaf): Zig-zags slowly to the ground, tumbling as it falls.
- [Wobble ring](https://systergon.com/motion-path/examples/wobble-ring): A circle with a perpendicular wobble layered on — organic and springy.
- [Parallax drift](https://systergon.com/motion-path/examples/parallax-drift): A slow horizontal drift back and forth for background layers.
- [Firefly wander](https://systergon.com/motion-path/examples/firefly): A firefly wanders a loose loop and flickers.
- [Ribbon wave](https://systergon.com/motion-path/examples/ribbon-wave): A ribbon undulates in the breeze with a layered wobble.
- [Aurora drift](https://systergon.com/motion-path/examples/aurora-drift): A slow wave of light drifts sideways with a lazy wobble.
- [Starfield drift](https://systergon.com/motion-path/examples/starfield-drift): A star drifts outward from the centre, growing and brightening.
- [Lava-lamp blob](https://systergon.com/motion-path/examples/lava-blob): A blob drifts around a slow loop, swelling and shrinking as it goes.
- [Particle rise](https://systergon.com/motion-path/examples/particle-rise): A particle drifts slowly upward and fades — stagger a field of them.
- [Breathing glow](https://systergon.com/motion-path/examples/breathing): A soft element swells and shrinks in a slow breathing rhythm.
- [Twinkle](https://systergon.com/motion-path/examples/twinkle): A star twinkles — a gentle opacity flicker on repeat.
- [Gentle sway](https://systergon.com/motion-path/examples/gentle-sway): A hanging element sways slowly back and forth, easing at each end.
- [Spiral wind-up](https://systergon.com/motion-path/examples/sp-spiral-windup): A decorative mark that steadily accelerates as it winds inward along the spiral.
- [Comet head streak](https://systergon.com/motion-path/examples/an-comet-head-streak): A comet whose bright head (right-centre anchor) leads across the arc, the tail of echoes streaming behind.
- [Drifting particles](https://systergon.com/motion-path/examples/di-wave-particles): Select N copies to distribute as particles drifting along a rolling wave.
- [Beads on a figure-eight](https://systergon.com/motion-path/examples/di-beads-figure8): Select N copies to distribute as beads gliding evenly around a figure-eight loop.
- [Treasure map](https://systergon.com/motion-path/examples/ch-treasure-map): A marker wanders the dashed leg A at one constant pace and drifts across to the next; pick each map-trail vector and hit “Add leg” to chart the route on through B, C… to the X.

### Illustration & motion graphics
- [Linked orbits](https://systergon.com/motion-path/examples/scene-link): Three objects each orbit their own little loop; a chain of lines links them into a flexing constellation.
- [Rocket launch](https://systergon.com/motion-path/examples/rocket-launch): Blasts off on a curved trajectory, shrinking into the distance.
- [Paper plane](https://systergon.com/motion-path/examples/paper-plane): Glides down and across, banking along the way.
- [Satellite orbit](https://systergon.com/motion-path/examples/satellite): A slow elliptical orbit — great for space or hero scenes.
- [Spiral in](https://systergon.com/motion-path/examples/spiral-in): Spirals toward the centre while shrinking and fading.
- [Sine cruise](https://systergon.com/motion-path/examples/sine-cruise): Cruises along a sine wave, banking into every curve.
- [Roller coaster](https://systergon.com/motion-path/examples/roller-coaster): A car rides a coaster track, banking over each hill.
- [Bird flight](https://systergon.com/motion-path/examples/bird-flight): A bird glides across with a gentle wing-flap wobble.
- [Balloon rise](https://systergon.com/motion-path/examples/balloon-rise): A hot-air balloon drifts slowly upward with a lazy sway.
- [Shooting star](https://systergon.com/motion-path/examples/shooting-star): A star streaks across on a diagonal, shrinking and fading out.
- [Loop-the-loop](https://systergon.com/motion-path/examples/plane-loop): A plane flies a loop-the-loop, banking all the way around.
- [Butterfly flutter](https://systergon.com/motion-path/examples/butterfly-flutter): A butterfly wanders a figure-eight, flickering as it flutters.
- [Wave surf](https://systergon.com/motion-path/examples/wave-surf): A surfer rides up and over a big wave crest, banking with it.
- [Car drive](https://systergon.com/motion-path/examples/car-drive): A car drives across a gently rolling road, banking over each rise.
- [Fish swim](https://systergon.com/motion-path/examples/fish-swim): A fish swims across with a swishing tail wobble, banking with the wave.
- [Walk cycle bob](https://systergon.com/motion-path/examples/walk-bob): A character bobs along the ground — the up-down of a walk cycle.
- [Map pin drop](https://systergon.com/motion-path/examples/pin-drop): A map pin drops from above and bounces to a stop, then holds.
- [Speech-bubble tail pop](https://systergon.com/motion-path/examples/an-speech-tail-pop): A speech bubble whose tail tip (custom lower-left anchor) stays pinned at the target as the bubble pops open.
- [Planets on an orbit](https://systergon.com/motion-path/examples/di-planet-orbit): Select N copies to distribute as planets spaced around a shared elliptical orbit.
- [Trailing cursor](https://systergon.com/motion-path/examples/tr-cursor): A pointer wanders a squiggle leaving a soft trail of fading cursor ghosts.
- [Story beats](https://systergon.com/motion-path/examples/ch-story-beats): Each path plays as an equal-length beat with an instant cut between them — pick the next scene vector and hit “Add leg” to add beat B, C… to the sequence.

### Animated icons
- [Refresh spin](https://systergon.com/motion-path/examples/icon-refresh): A refresh arrow spins one quick lap and keeps looping — a sync icon.
- [Bell ring](https://systergon.com/motion-path/examples/icon-bell-ring): A bell swings left and right at its pivot — a ringing notification.
- [Download drop](https://systergon.com/motion-path/examples/icon-download): A download arrow accelerates down into a tray, then holds.
- [Heart beat](https://systergon.com/motion-path/examples/icon-heart-beat): A heart icon pulses with a soft scale throb — a favourite toggle.
- [Trash toss](https://systergon.com/motion-path/examples/icon-trash-toss): An item arcs into the bin, tumbling and fading as it drops in.
- [Chevron nudge](https://systergon.com/motion-path/examples/icon-chevron-nudge): A chevron draws on to hint “expand / scroll”, then holds.
- [Upload lift](https://systergon.com/motion-path/examples/icon-upload): An upload arrow lifts up and fades out as the file sends.
- [Search scan](https://systergon.com/motion-path/examples/icon-search): A magnifier circles as it scans — a searching state.
- [Settings gear](https://systergon.com/motion-path/examples/icon-gear): A settings gear turns slowly and steadily — a processing state.
- [Arrow nudge](https://systergon.com/motion-path/examples/icon-arrow-nudge): A CTA arrow nudges right and back to draw the eye forward.
- [Location pin bob](https://systergon.com/motion-path/examples/icon-pin-bob): A location pin bobs up and down to mark the spot.
- [Snap to rest](https://systergon.com/motion-path/examples/sp-snap-rest): An icon that flies in at speed, then snaps to a crisp, sudden rest at the end.
- [Clock hand sweep](https://systergon.com/motion-path/examples/an-clock-hand-sweep): A clock hand whose base (bottom-centre anchor) pivots around the dial, the hand rotating to stay on the ring.

### Nature & weather
- [Rain streak](https://systergon.com/motion-path/examples/rain-streak): A raindrop streaks down on a slight diagonal, fading as it falls.
- [Snow drift](https://systergon.com/motion-path/examples/snow-drift): A snowflake sways side to side with a lazy wobble as it settles.
- [Sun rays](https://systergon.com/motion-path/examples/sun-rays): Rays sweep slowly around the sun, shimmering a touch as they turn.
- [Cloud drift](https://systergon.com/motion-path/examples/cloud-drift): A cloud drifts slowly across the sky — a calm, seamless background loop.
- [Water ripple](https://systergon.com/motion-path/examples/water-ripple): A ripple ring expands and fades on the surface of the water.
- [Fire flicker](https://systergon.com/motion-path/examples/fire-flicker): A flame licks up and down with a fast flicker — a candle or torch.
- [Meteor](https://systergon.com/motion-path/examples/meteor): Streaks across the sky trailing a tail of fading echoes — a Motion trail demo.
- [Sunrise](https://systergon.com/motion-path/examples/sunrise): The sun rises along an arc and brightens as it climbs.
- [Wind sway](https://systergon.com/motion-path/examples/wind-sway): Grass or a branch sways in the wind, easing at each end.
- [Lightning strike](https://systergon.com/motion-path/examples/lightning): A lightning bolt cracks on fast and holds for a beat.
- [Ocean wave](https://systergon.com/motion-path/examples/ocean-wave): A swell rolls along a wave crest, banking with the water.
- [Gust whip](https://systergon.com/motion-path/examples/sp-gust-whip): A leaf that drifts slowly on the breeze, then gets whipped forward by a sudden gust.
- [Raindrop tip trail](https://systergon.com/motion-path/examples/an-raindrop-tip-trail): A raindrop whose lower tip (bottom-centre anchor) slides down a meandering track on the glass, staying upright.
- [Comet dot trail](https://systergon.com/motion-path/examples/di-comet-trail): Select N copies to distribute as a comet’s dotted tail trailing its head across an arc.
- [Comet tail](https://systergon.com/motion-path/examples/tr-comet): A comet arcs across the sky trailing a tail of fading echoes behind its head.
- [Shooting spark](https://systergon.com/motion-path/examples/tr-shooting-spark): A spark spirals outward trailing a fading tail that dims as it flies off.
- [Road trip](https://systergon.com/motion-path/examples/ch-road-trip): A car follows winding leg A at a constant speed; pick each waypoint’s road vector and hit “Add leg” to drive on through B, C… across the map.

### Commerce & finance
- [Add to cart](https://systergon.com/motion-path/examples/add-to-cart): A product arcs up and into the cart, shrinking as it lands.
- [Coin drop](https://systergon.com/motion-path/examples/coin-drop): A coin drops in and settles with a couple of small bounces.
- [Price count-up](https://systergon.com/motion-path/examples/price-countup): A value pops up into place with a springy overshoot as it lands.
- [Card swipe](https://systergon.com/motion-path/examples/card-swipe): A card swipes across the reader, easing in and out of the slot.
- [Receipt unroll](https://systergon.com/motion-path/examples/receipt-unroll): A receipt prints and unrolls downward, drawing on as it goes.
- [Coin spin](https://systergon.com/motion-path/examples/coin-spin): A coin spins on its edge — a flattened orbit that reads as a turning disc.
- [Order confirmed](https://systergon.com/motion-path/examples/order-confirmed): A success check draws on and pops — order placed / payment done.
- [Contactless pay](https://systergon.com/motion-path/examples/contactless-pay): Waves ripple out from a tap — a contactless payment ping.
- [Sale tag pop](https://systergon.com/motion-path/examples/sale-tag-pop): A discount tag pops in with a springy overshoot, then holds.
- [Slide to pay](https://systergon.com/motion-path/examples/slide-to-pay): A slider glides across to confirm — a slide-to-pay control.
- [Heavy launch](https://systergon.com/motion-path/examples/sp-heavy-launch): A weighty item that starts sluggish off the line and lightens into a fast lob.
- [Map pin on route](https://systergon.com/motion-path/examples/an-map-pin-route): A map pin whose point tip (bottom-centre anchor) traces the delivery route while the pin body stays upright.
- [Sale badge corner](https://systergon.com/motion-path/examples/an-badge-corner-lob): A sale badge whose top-right corner (custom anchor) is the point that lands on the path as it lobs into frame.
- [Conveyor belt](https://systergon.com/motion-path/examples/di-conveyor-belt): Select N copies to distribute as items on a looping conveyor belt, all circling together.
- [Delivery route](https://systergon.com/motion-path/examples/ch-delivery-route): A delivery van drives leg A at one constant speed; pick each next street vector and hit “Add leg” to route it on through B, C… as one continuous trip.
- [Parcel sorting](https://systergon.com/motion-path/examples/ch-parcel-sort): A parcel rides leg A at one constant belt speed and slides on to the next chute; pick each conveyor vector and hit “Add leg” to sort it through B, C… to the bin.

### Game & arcade
- [Power-up float](https://systergon.com/motion-path/examples/power-up-float): A power-up bobs gently up and down, waiting to be grabbed.
- [Coin hop](https://systergon.com/motion-path/examples/coin-hop): A coin hops up with a scale pop and fades as it’s collected.
- [Projectile lob](https://systergon.com/motion-path/examples/projectile-lob): A projectile arcs across under gravity, banking along its path.
- [Star burst](https://systergon.com/motion-path/examples/star-burst): A star outline draws on and pops — a collect / achievement flash.
- [Gem shine](https://systergon.com/motion-path/examples/gem-shine): A gem’s facet catches the light with a quick shine sweep, then holds.
- [Level up](https://systergon.com/motion-path/examples/level-up): A banner springs up into place and holds — a level-up flourish.
- [Health refill](https://systergon.com/motion-path/examples/health-refill): A health bar fills up across its track and holds full.
- [Combo pop](https://systergon.com/motion-path/examples/combo-pop): A combo counter pops up big and settles — a hit-streak callout.
- [Spawn in](https://systergon.com/motion-path/examples/spawn-in): An entity spawns in from nothing with a springy scale.
- [Dash](https://systergon.com/motion-path/examples/dash-move): A quick dash across with a fading motion-blur streak.
- [Corner brake](https://systergon.com/motion-path/examples/sp-corner-brake): A patrol marker races the straights and brakes hard into every corner of the square.
- [Rocket tip leads](https://systergon.com/motion-path/examples/an-rocket-tip-arc): A rocket whose nose tip (right-centre anchor) leads its launch arc, facing travel as it shrinks away.
- [Train on a track](https://systergon.com/motion-path/examples/di-train-on-track): Select N copies to distribute as train cars riding a curved track nose-to-tail at a fixed gap.
- [Caterpillar crawl](https://systergon.com/motion-path/examples/di-caterpillar): Select N copies to distribute as a caterpillar’s body segments wriggling along a wave.
- [Onion-skin ball](https://systergon.com/motion-path/examples/tr-onion-ball): A ball lobs over an arch leaving onion-skin frames of its flight, ping-ponging back and forth.
- [Rocket after-image](https://systergon.com/motion-path/examples/tr-rocket-afterimage): A rocket accelerates upward, its nose pointed along the path, leaving after-images below.
- [Relay hand-off](https://systergon.com/motion-path/examples/ch-relay-baton): A baton holds one constant speed down leg A; pick each runner’s lane vector and hit “Add leg” to hand it off through B, C… without breaking stride.
- [Board-game hop](https://systergon.com/motion-path/examples/ch-board-hop): A token hops each path as an equal beat with a hard cut between squares; pick the next square vector and hit “Add leg” to hop on through B, C… around the board.

### Gestures & cursor
- [Tap hint](https://systergon.com/motion-path/examples/tap-hint): A press pulse that dips and returns — a “tap here” affordance.
- [Swipe hint](https://systergon.com/motion-path/examples/swipe-hint): A hand glides across and fades in — a repeatable swipe cue.
- [Drag along path](https://systergon.com/motion-path/examples/drag-track): An object is dragged smoothly along a freeform track.
- [Scroll nudge](https://systergon.com/motion-path/examples/scroll-nudge): Content lifts a touch and settles — a hint that there’s more below.
- [Pull to refresh](https://systergon.com/motion-path/examples/pull-refresh): A pull down that springs back past its origin — pull-to-refresh.
- [Pinch zoom](https://systergon.com/motion-path/examples/pinch-zoom): A target scales up and back down — a pinch-to-zoom gesture.
- [Long press](https://systergon.com/motion-path/examples/long-press): A ring swells under a held finger — a press-and-hold affordance.
- [Double tap](https://systergon.com/motion-path/examples/double-tap): Two quick press pulses in a row — a double-tap affordance.
- [Swipe up hint](https://systergon.com/motion-path/examples/swipe-up-hint): A hand glides up and fades in — a repeatable swipe-up cue.
- [Drag & drop](https://systergon.com/motion-path/examples/drag-and-drop): An item lifts, arcs across, and drops into a new slot.
- [Hesitate then dart](https://systergon.com/motion-path/examples/sp-hesitate-dart): A cursor that crawls hesitantly, then darts across the arc before easing off.
- [Pencil tip sketch](https://systergon.com/motion-path/examples/an-pencil-tip-sketch): A pencil whose graphite tip (bottom-left anchor) rides the stroke, so the line grows exactly from the point.

### Social & reactions
- [Heart burst](https://systergon.com/motion-path/examples/heart-burst): A heart draws itself on and pops — a like / reaction burst.
- [Star rating fill](https://systergon.com/motion-path/examples/star-rating): Stars fill in left to right as a band sweeps across the rating.
- [Thumbs up](https://systergon.com/motion-path/examples/thumbs-up): A thumb pops up with a springy overshoot, then holds.
- [Emoji float](https://systergon.com/motion-path/examples/emoji-float): A reaction floats up and drifts sideways as it fades — live hearts.
- [Share swoosh](https://systergon.com/motion-path/examples/share-swoosh): Content swooshes up and away off-screen — a share / send action.
- [Badge unlock](https://systergon.com/motion-path/examples/badge-unlock): An achievement badge springs in from nothing and holds.
- [Story progress](https://systergon.com/motion-path/examples/story-progress): A story progress bar fills across the top, then holds full.
- [Follow success](https://systergon.com/motion-path/examples/follow-success): A follow button confirms with a check that draws on and pops.
- [Reaction tray](https://systergon.com/motion-path/examples/reaction-tray): Reaction emoji pop up in a row, staggered one after another.
- [Celebrate burst](https://systergon.com/motion-path/examples/celebrate-burst): A celebratory burst spirals outward, growing and brightening.
- [Wand sparkles](https://systergon.com/motion-path/examples/tr-wand-sparkles): Sparkles stream off a wand tip along a wave, echoing in a dense glittering tail.

### Audio & music
- [Equalizer bars](https://systergon.com/motion-path/examples/equalizer-bar): A bar bobs to the beat — stagger several to build an equalizer.
- [Vinyl spin](https://systergon.com/motion-path/examples/vinyl-spin): A record spins at a steady pace — a now-playing turntable.
- [Waveform scan](https://systergon.com/motion-path/examples/waveform-scan): A playhead sweeps a waveform with a moving highlight band.
- [Sound pulse](https://systergon.com/motion-path/examples/sound-pulse): A ring pulses out to the beat — an audio level indicator.
- [Now-playing bob](https://systergon.com/motion-path/examples/now-playing-bob): Album art bobs ever so gently — a subtle now-playing idle.
- [DJ scratch](https://systergon.com/motion-path/examples/dj-scratch): A quick back-and-forth jog along an arc — a turntable scratch.
- [Seek progress](https://systergon.com/motion-path/examples/seek-progress): A playhead fills across the seek bar as the track plays.
- [Volume slide](https://systergon.com/motion-path/examples/volume-slide): A volume knob slides up its track and settles.
- [Beat bounce](https://systergon.com/motion-path/examples/beat-bounce): A dot bounces on the beat — a steady, seamless rhythm loop.
- [Recording blink](https://systergon.com/motion-path/examples/rec-blink): A record dot blinks on and off — an active-recording indicator.
- [Beat pulse](https://systergon.com/motion-path/examples/sp-beat-pulse): A marker that alternates fast and slow around the loop, pulsing to a steady beat.

### Transitions & navigation
- [Path morph (A→B)](https://systergon.com/motion-path/examples/scene-morph): One object rides a trajectory that blends from a wave into an arc — a shape-tween of the motion path itself.
- [Modal rise](https://systergon.com/motion-path/examples/modal-rise): A modal rises from the bottom and settles with a spring, fading in.
- [Drawer slide](https://systergon.com/motion-path/examples/drawer-slide): A side drawer slides in from the left and eases to a stop.
- [Sheet snap](https://systergon.com/motion-path/examples/sheet-snap): A bottom sheet snaps up to its detent with a soft overshoot.
- [Carousel swipe](https://systergon.com/motion-path/examples/carousel-swipe): A slide swipes off to the left as the next one takes its place.
- [Page turn](https://systergon.com/motion-path/examples/page-turn): A page slides across and shrinks away as it leaves the screen.
- [FAB expand](https://systergon.com/motion-path/examples/fab-expand): A floating button scales up into a surface — a container transform.
- [Panel slide-in](https://systergon.com/motion-path/examples/panel-slide-right): A side panel slides in from the right and eases to a stop.
- [Fade through](https://systergon.com/motion-path/examples/fade-through): A cross-fade that scales up slightly — Material fade-through.
- [Banner drop](https://systergon.com/motion-path/examples/banner-drop): A banner drops in from the top edge and settles, fading in.
- [Accordion expand](https://systergon.com/motion-path/examples/accordion-expand): A panel expands downward, its content revealing as it opens.
- [Waypoint pause](https://systergon.com/motion-path/examples/sp-waypoint-pause): A slide that eases almost to a standstill at the halfway waypoint, then carries on.
- [Paper-plane nose](https://systergon.com/motion-path/examples/an-paper-plane-nose): A paper plane whose nose (right-centre anchor) leads the glide, banking to face its heading between screens.
- [Flowing dashed border](https://systergon.com/motion-path/examples/di-dashed-border-flow): Select N copies to distribute as dashes flowing around a rectangular border, marching-ants style.
- [Speed dash](https://systergon.com/motion-path/examples/tr-speed-dash): A fast linear dart leaves a tight speed-blur streak of ghost copies in its wake.
- [Motion-blur swipe](https://systergon.com/motion-path/examples/tr-swipe): A card swipes diagonally off-screen with a motion-blur smear of trailing echoes.
- [Whoosh streak](https://systergon.com/motion-path/examples/tr-whoosh): A quick swept curve fires across with a dense whoosh of oriented ghost copies.
- [Metro line](https://systergon.com/motion-path/examples/ch-metro-line): A train glides leg A at one steady speed and slides across the gap to the next; pick each track segment vector and hit “Add leg” to extend the line to stops B, C…
- [Onboarding tour](https://systergon.com/motion-path/examples/ch-onboarding-tour): A spotlight holds each path as an equal beat then cuts to the next; pick each UI target vector and hit “Add leg” to guide the tour through steps B, C…

## Motion Path — Help & FAQ

Help centre: https://systergon.com/motion-path/help

- [How do I animate a layer along a path?](https://systergon.com/motion-path/help/animate-along-path): Pick a path and a layer, then Apply — the plugin writes native Motion keyframes.
- [What do Vector, Outline, and Procedural mean?](https://systergon.com/motion-path/help/path-sources): The three ways the plugin resolves the path under From.
- [How do I choose which layer is the path vs. the object?](https://systergon.com/motion-path/help/set-path-object): Use Set as path / Set as object to pin them explicitly.
- [How do I make one object travel several paths in a row?](https://systergon.com/motion-path/help/chain-paths): Chain paths into an A → B → C journey on one timeline.
- [How do I draw a motion path point by point?](https://systergon.com/motion-path/help/waypoints): Switch From to Waypoints, then place, drag, and shape points right in the preview.
- [Can I edit an animation I already applied?](https://systergon.com/motion-path/help/load-from-selection): Load from selection reconstructs a best-effort config from a layer’s Motion.
- [How do duration, hold, and samples work?](https://systergon.com/motion-path/help/timing-samples): Control how long the motion runs, pauses at the ends, and its keyframe density.
- [How do direction, loops, and seamless work?](https://systergon.com/motion-path/help/direction-loops): Choose forward / reverse / ping-pong, repeat, and close the loop.
- [How do I rotate, scale, fade, or draw the path on?](https://systergon.com/motion-path/help/motion-effects): Layer extra tracks on top of the position animation.
- [Which point of my object follows the path?](https://systergon.com/motion-path/help/anchor-point): Anchor point picks the spot on the object that rides the path — a nose, a baseline, or a custom %.
- [How do I animate only part of the path, or add wobble?](https://systergon.com/motion-path/help/path-range): Use Path range, Normal offset, and Wobble to reshape the travel.
- [What easing and spring options are there?](https://systergon.com/motion-path/help/easing-springs): The full native easing set, custom bezier / spring, and variable binding.
- [How do I slow into corners and speed up on straights?](https://systergon.com/motion-path/help/speed-profile): Shape a speed graph along the path — same shape, warped timing — or auto-ease at corners.
- [How do I add squash & stretch (make motion feel alive)?](https://systergon.com/motion-path/help/squash-stretch): Velocity-driven squash & stretch elongates the object where it moves fast and squashes it where it slows.
- [How do I give one leg its own timing?](https://systergon.com/motion-path/help/segment-timing): Open a leg to override its pace, easing, pause, and shape on its own.
- [How do I animate text letter-by-letter along a path?](https://systergon.com/motion-path/help/glyph-along-path): Glyph mode splits a text layer into letters and sweeps each one along the curve.
- [How do I morph one shape into another (A → B)?](https://systergon.com/motion-path/help/path-morph): Path morph blends the object between two paths as it travels — a shape-tween feel.
- [How do I keep a label or line attached to a moving object?](https://systergon.com/motion-path/help/connector-tether): Connector rigging tethers a label to a mover, or stretches a line between two moving objects.
- [How do I make an animated link / underline hover effect?](https://systergon.com/motion-path/help/link-hover): Link-hover examples generate a text link + animated underline, optionally as Default / Hover states.
- [How do I use the Examples gallery?](https://systergon.com/motion-path/help/examples-gallery): Ready-made animations you can tweak and apply in one click.
- [What does “Add example to canvas” do?](https://systergon.com/motion-path/help/add-to-canvas): Drops a ready-made, self-contained demo (frame + object + path) so you can see the animation with no setup.
- [How do I search or browse examples?](https://systergon.com/motion-path/help/browse-examples): Open the picker to search and filter by category.
- [How do I save and reuse my own animations?](https://systergon.com/motion-path/help/presets): Save the current setup as a preset, then apply or edit it later.
- [How do I sync presets to GitHub?](https://systergon.com/motion-path/help/github-sync): Connect a repository to back up and share presets across files.
- [Why is “Apply motion path” greyed out?](https://systergon.com/motion-path/help/apply-disabled): You need both a path and at least one layer to animate.
- [It says the layer isn’t on a Motion timeline](https://systergon.com/motion-path/help/no-timeline): Keyframes need a timeline — place the layer inside a frame.

## Blog

- [Motion Path for Figma — Animate Any Layer Along a Path](https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin): 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.

## Company

- [Products](https://systergon.com/products): All Systergon products
- [Figma plugins](https://systergon.com/products/figma-plugins): The full Figma plugin catalog
- [About](https://systergon.com/about): About Systergon
- [Support](https://systergon.com/support): Help center and product support
- [Contact](https://systergon.com/contact): Get in touch

## Optional

- [Privacy Policy](https://systergon.com/privacy)
- [Terms of Service](https://systergon.com/terms)
- [Service Level Agreement](https://systergon.com/sla)