# 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
- [Sound Kit](https://systergon.com/products/figma-plugins/figma-sound-kit): The sound layer Figma never shipped
- [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.
- [Pop-in button](https://systergon.com/motion-path/examples/pop-in-button): A button dips to load, springs up into place, sails a hair past its mark and settles — anticipation and overshoot along the tangent.
- [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.
- [Comet heat](https://systergon.com/motion-path/examples/comet-heat): A comet warms from cool blue to hot orange as it accelerates along the arc, dragging a fading tail and smearing with speed — colour shift, trail and motion blur together.
- [Firefly swarm](https://systergon.com/motion-path/examples/firefly-swarm): One seed scatters a cloud of fireflies — each drifts the path at its own start time, offset, size and speed, breaking lock-step into an organic swarm. Select several layers, then apply.
- [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.
- [Liftoff](https://systergon.com/motion-path/examples/liftoff): Crouches to load, then blasts up the tangent with a speed-blur streak — anticipation winding into velocity-linked motion blur.
- [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, smearing with speed, shrinking and fading out — now with velocity-linked motion blur.
- [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
- [Hot lap](https://systergon.com/motion-path/examples/hot-lap): A racer laps an oval — flat out on the straights where the motion blur builds, braking sharp through the corners where it clears. Speed profile drives the blur.
- [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 add velocity-linked motion blur?](https://systergon.com/motion-path/help/motion-blur): Motion blur keys a layer-blur radius to the object’s speed — it smears where fast and stays crisp where slow.
- [How do I add anticipation & overshoot (wind-up and follow-through)?](https://systergon.com/motion-path/help/anticipation-overshoot): The object recoils backward before it launches and coasts past the end before settling — along the path’s own tangent.
- [How do I shift an object’s colour along the path?](https://systergon.com/motion-path/help/color-shift): Colour shift keys the object’s fill through a ramp of stops as it travels — a heat trail, a status change, a charging flow.
- [How do I scatter copies into an organic swarm?](https://systergon.com/motion-path/help/seeded-randomize): One seed deterministically jitters each object’s start time, offset, size and speed so identical layers read as an organic swarm.
- [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.

## Sound Kit — Features (the sound layer for Figma)

Design, audit and hand off the sound of your product without leaving Figma. Feature catalogue: https://systergon.com/sound-kit/features

### Find & preview
- [Built-in sound library](https://systergon.com/sound-kit/features/sound-library): Thousands of UI sounds, auditioned in place
- [Preview & A/B compare](https://systergon.com/sound-kit/features/preview-and-compare): Audition candidates back to back before you commit
- [Find similar sounds](https://systergon.com/sound-kit/features/find-similar): Start from a sound you like and get its neighbours
- [Family fit scoring](https://systergon.com/sound-kit/features/family-fit): Check a new sound belongs with the ones you already use
- [Sound mood board](https://systergon.com/sound-kit/features/mood-board): Collect the candidates before you decide
- [Suggestions from your selection](https://systergon.com/sound-kit/features/suggested-sounds): Select a layer, get sounds that suit what it does
- [Connect external libraries](https://systergon.com/sound-kit/features/connect-libraries): Search Freesound, Pixabay and your own catalogue in one place

### Make your own
- [AI sound generation](https://systergon.com/sound-kit/features/ai-generate): Describe the sound you need and generate it
- [AI variations](https://systergon.com/sound-kit/features/ai-variations): Several takes of one idea, then pick the best
- [Match a reference](https://systergon.com/sound-kit/features/ai-match-reference): Make a new sound fit the ones you already have
- [Upload your own sounds](https://systergon.com/sound-kit/features/upload-own): Bring your library in — and get told what is wrong with it
- [Sonify a selection](https://systergon.com/sound-kit/features/sonify-selection): Turn a shape or colour into a starting sound

### Edit & polish
- [Waveform editor](https://systergon.com/sound-kit/features/waveform-editor): Trim, fade and shape a sound without leaving Figma
- [Effects rack](https://systergon.com/sound-kit/features/effects-rack): EQ, reverb, echo and pitch — applied in place
- [Loudness targets (LUFS)](https://systergon.com/sound-kit/features/loudness-target): One consistent level across every sound you ship
- [Spectrum & spectrogram](https://systergon.com/sound-kit/features/spectrum-view): See what a sound is actually made of
- [Accessibility check](https://systergon.com/sound-kit/features/accessibility-check): Catch sounds that are startling, harsh or fatiguing
- [Multi-track mixer](https://systergon.com/sound-kit/features/mixer): Layer several sounds into one signature
- [Behaviour & state variations](https://systergon.com/sound-kit/features/behavior-and-states): One sound, correctly wired for hover, press and disabled

### Sound for Motion
- [Motion inspector](https://systergon.com/sound-kit/features/motion-inspect): Read a layer’s real interaction timing and easing
- [Animation Sync](https://systergon.com/sound-kit/features/sync-to-animation): Match the length, the curve and the moment
- [Motion audit](https://systergon.com/sound-kit/features/motion-audit): Find every animation on the page that has no sound

### Scale across the file
- [Canvas scan](https://systergon.com/sound-kit/features/canvas-scan): Find every sound in the file, on every page
- [Coverage graph](https://systergon.com/sound-kit/features/graph-view): See your sound coverage as a map, not a list
- [Consistency report](https://systergon.com/sound-kit/features/consistency-report): Three sounds for one job, and the volume drifting
- [Full audit report](https://systergon.com/sound-kit/features/audit-report): Every sound problem in the file, in one document
- [Flow preview](https://systergon.com/sound-kit/features/flow-preview): Play a whole journey and hear how it actually feels
- [Sound tokens](https://systergon.com/sound-kit/features/sound-tokens): Name a sound once and reuse it everywhere

### Hand off & track
- [Developer export](https://systergon.com/sound-kit/features/developer-export): Tokens, code snippets and a handoff doc engineers can build from
- [Figma Variables sync](https://systergon.com/sound-kit/features/figma-variables): Your sound tokens, living in Figma Variables
- [Git sync](https://systergon.com/sound-kit/features/git-sync): Push tokens straight to GitHub, GitLab or Bitbucket
- [Sound style guide](https://systergon.com/sound-kit/features/style-guide): The rules of your sound system, written down
- [Usage analytics](https://systergon.com/sound-kit/features/usage-analytics): Which sounds are everywhere, and which are used once
- [Tonal profile & loudness compliance](https://systergon.com/sound-kit/features/tonal-profile): What your whole sound system sounds like, measured
- [Bring your own storage](https://systergon.com/sound-kit/features/bring-your-own-storage): Full-quality audio, hosted on storage you control

## Sound Kit — Help & FAQ

Help centre: https://systergon.com/sound-kit/help

### Start here
- [What is Sound Kit?](https://systergon.com/sound-kit/help/what-is-sound-kit): Sound Kit helps you find, make, and add sounds to your Figma designs, then hand them to developers. You browse a sound library, create or edit your own sounds, save them as reusable tokens, add them to your canvas, and review how they are used.
- [How do I get around the plugin?](https://systergon.com/sound-kit/help/get-around): Use the tabs at the top to switch sections. Settings and Help live in the footer at the bottom.
- [What keyboard shortcuts can I use?](https://systergon.com/sound-kit/help/keyboard-shortcuts): Cmd (or Ctrl) plus 1 to 6 jumps between tabs. The editor, the comparison tray, and the Tokens tab each add a few of their own.
- [Do I need a paid plan to add sound?](https://systergon.com/sound-kit/help/do-i-need-paid-plan): Only for sound that actually plays. Browsing, previewing, and editing sounds are free on any plan. To get a node that plays in a prototype, Sound Kit turns the audio into a video — and Figma only lets you upload video on a paid plan.
- [Why does a playable sound come as a video?](https://systergon.com/sound-kit/help/why-video): Figma can only play audio through a video. So when you want a sound that actually plays, Sound Kit turns the audio into a small video node for you. Attaching a sound to a layer is different — that just tags the layer and stays silent.

### Add your first sound
- [How do I add my first sound to a screen?](https://systergon.com/sound-kit/help/add-first-sound): Pick a sound in Browse and click Add to Canvas. To get a sound you can actually hear in Present, choose Create a new video node.
- [How do I attach a sound to a button or component?](https://systergon.com/sound-kit/help/attach-to-button): Select the layer in Figma first, then use Add to Canvas in the Browse tab to attach a sound to it.
- [How do I change or remove a sound on a video node?](https://systergon.com/sound-kit/help/change-remove-sound): Replace Sound and Remove Sound live in the Canvas tab. They work on a scanned video node, so first scan the canvas, then select the node and use the actions in the details sidebar on the right.
- [How do I hear my sounds in a prototype?](https://systergon.com/sound-kit/help/hear-in-prototype): You can only hear a sound that lives on a video node. Make a playable node, then click Present on desktop.

### Find & preview sounds
- [Where do I find sounds to use?](https://systergon.com/sound-kit/help/where-find-sounds): The Browse tab has a built-in library plus sources like BBC, Freesound, and your own uploads.
- [How do I search for the right sound?](https://systergon.com/sound-kit/help/search-sounds): Type in the search box, or filter by category and intent like success or error.
- [How do I change the way sounds are listed?](https://systergon.com/sound-kit/help/browse-view-modes): The Browse toolbar switches between list and grid, and the Sort & Filter menu narrows the list by category, format, brightness, and sort order.
- [How do I preview a sound before using it?](https://systergon.com/sound-kit/help/preview-sound): Click a sound to play it. Use the player at the bottom to replay, seek, or loop.
- [How do I compare a few sounds side by side?](https://systergon.com/sound-kit/help/compare-sounds): Turn on comparison mode in Browse, tick up to four sounds, then flip between them with keys 1 to 4.
- [How do I find sounds similar to one I like?](https://systergon.com/sound-kit/help/find-similar-sounds): Each row in the Browse list has a Find similar sounds action. It ranks the sounds Browse has loaded by how close they actually sound to the one you picked.
- [How do I check whether a set of sounds belongs together?](https://systergon.com/sound-kit/help/family-fit-browse): Put your candidates in the comparison tray, then run the family fit check. It names the one that drifts, says what it drifts on, and by how much.
- [Why does Sound Kit suggest certain sounds?](https://systergon.com/sound-kit/help/suggested-sounds): Suggestions are read from the name of the layer you have selected in Figma. A layer called "Delete button" gets destructive sounds, "Success toast" gets confirmations.
- [How do I save sounds to a mood board?](https://systergon.com/sound-kit/help/mood-board): The Mood Board lives in the Browse tab. Create a group, then add candidate sounds to it so you can shortlist and compare a direction.
- [How do I connect Freesound or my own sound library?](https://systergon.com/sound-kit/help/connect-sound-libraries): Open Settings, then Sound Libraries. Freesound needs an API key, a Custom CDN needs a URL, and libraries like BBC and Mixkit need no setup at all.

### Make your own sounds
- [How do I set up AI sound generation?](https://systergon.com/sound-kit/help/setup-ai-keys): Add your own AI provider key in Settings, AI Providers, then test it.
- [How do I create a sound with AI?](https://systergon.com/sound-kit/help/generate-ai-sound): In Create, on the AI Generate tab, pick a provider, type a prompt, set the length, and click Generate Sound. Then save the result to your library.
- [How do I generate several takes of one AI sound?](https://systergon.com/sound-kit/help/ai-variations): After a generation, open Variation set, choose how many takes you want, and generate them as one batch. You see the cost of the whole set before anything is charged.
- [How do I check if we already have a sound like this?](https://systergon.com/sound-kit/help/ai-check-library): After a generation, open "Do we already have this?" It ranks your library against the new sound so you can reuse something instead of spending another credit.
- [How do I make an AI sound fit the rest of my sounds?](https://systergon.com/sound-kit/help/ai-match-reference): Use "Match to a reference" to balance a generation against a sound you already trust, and "Family fit" to check it sits inside a set you name.
- [Where do my AI generations go?](https://systergon.com/sound-kit/help/ai-history): Recent generations stay in the session history inside the AI Generate panel. From there you can replay one, regenerate its prompt, or save it to your library.
- [How do I upload my own sound files?](https://systergon.com/sound-kit/help/upload-own-sound): Open Create, pick Upload, and drag in your audio files. The upload window keeps each file under its own filename, so all you set is one shared Category and Tags.
- [What does Sound Kit check when I upload a sound?](https://systergon.com/sound-kit/help/import-checks): The upload window can trim leading silence, normalize, and repair clicks, and it warns you about near-duplicates and sounds loud enough to startle. Every change is off until you turn it on.
- [Where do my uploaded sounds live?](https://systergon.com/sound-kit/help/my-sounds): In Browse, on the My Sounds tab. Everything you have uploaded is listed there — play it, edit it, add it to the canvas, or add more with Add Sound.
- [How do I turn a shape or colour into a sound?](https://systergon.com/sound-kit/help/sonify-selection): Select something on the Figma canvas, then use Sonify Selection in the Canvas tab. Sound Kit reads its colours, gradient, and shape and synthesizes a sound from them.

### Edit & polish
- [How do I trim or edit a sound?](https://systergon.com/sound-kit/help/trim-edit-sound): Open a sound in the Edit tab, then select, trim, and undo as needed.
- [How do I make a sound louder or quieter?](https://systergon.com/sound-kit/help/change-volume): Use the loudness controls to match a target level, or adjust the volume in the editor.
- [How do I make all my sounds the same loudness?](https://systergon.com/sound-kit/help/loudness-target): Pick a Loudness Target in the editor — iOS Tap, Web UI, Modal Alert, Ambient, or your own number — and normalize the sound to it. Do that for every sound and the set stays even.
- [How do I add effects like echo or reverb?](https://systergon.com/sound-kit/help/add-effects): In the editor, add effects to the chain, like reverb, delay, or EQ.
- [How do I compare my edit against the original?](https://systergon.com/sound-kit/help/ab-compare): The editor keeps the untouched sound as A and your edited version as B. Press A or B to flip between them, with the levels matched so the comparison is fair.
- [How do I see what a sound is made of?](https://systergon.com/sound-kit/help/spectrum-view): The editor toolbar switches the display between Waveform, Spectrogram, and Spectrum — loudness over time, frequencies over time, and the overall tonal balance.
- [How do I check a sound is not startling or harsh?](https://systergon.com/sound-kit/help/accessibility-check): The Accessibility section in the editor analyses the loaded sound and flags anything likely to startle, clip, or grate — and offers a one-click fix for each.
- [How do I set how a sound behaves?](https://systergon.com/sound-kit/help/sound-behavior): Use the interaction panel to add a haptic, a trigger, looping, and more.
- [How do I reuse the same interaction settings?](https://systergon.com/sound-kit/help/interaction-templates): Apply an interaction template in the editor to stamp a whole set of behaviour defaults at once — or save your current settings as a template of your own.
- [How do I make hover, pressed, and disabled versions of a sound?](https://systergon.com/sound-kit/help/state-variations): Use State Variations in the editor. It generates related takes from your sound, and you can save the whole set as one token with the variants inside it.
- [How do I layer several sounds into one?](https://systergon.com/sound-kit/help/mix-sounds): Use the Mix tab in Create. Add up to four tracks, slide each one to where it should start, balance them, then export the result as a single sound.
- [How do I add effects to one track in a mix?](https://systergon.com/sound-kit/help/mix-track-effects): Each track in the Mix has its own effects button. It opens a small chain with gain, EQ, filter, and compressor that applies to that track only.
- [How do I swap one layer of a mix for a similar sound?](https://systergon.com/sound-kit/help/mix-swap-track): Use the swap button on a track. It ranks library sounds against what that track currently sounds like and replaces it in one click, keeping its timing and settings.
- [How do I tell whether my processing actually helped?](https://systergon.com/sound-kit/help/mix-ab-compare): Use the A/B button on a track. It plays the original against the processed version at matched loudness, so you judge the tone instead of whichever one is louder.

### Sound for Motion
- [What does the Motion tab do?](https://systergon.com/sound-kit/help/motion-overview): It is the sound layer for your Figma Motion animations. Select an animated layer and the Motion tab shows its real timing and easing, suggests sounds, and exports a handoff that names the exact animation.
- [How do I add sound to a Figma Motion animation?](https://systergon.com/sound-kit/help/motion-add-sound): Select the animated layer, open the Motion tab, preview a suggested sound against the animation, then open it in the editor to save it.
- [How do I match a sound to my animation’s timing?](https://systergon.com/sound-kit/help/sync-to-animation): Use Animation Sync in the editor. It matches a sound to an animation three ways: it stretches the sound to the animation’s length, shapes its envelope to follow the animation’s curve, and moves its attack onto the moment the animation peaks.
- [How do I find animations that have no sound?](https://systergon.com/sound-kit/help/motion-audit): The Motion tab includes a page-wide audit. It lists the animated layers on the page and shows which of them still have no sound attached.
- [How do I use a Motion JSON export?](https://systergon.com/sound-kit/help/motion-json): Copy the animation as JSON from Figma’s Dev Mode, then paste it into the Motion tab’s inspector — or into the editor, to turn its keyframes into sound events.

### Scale across your project
- [How do I preview a whole flow with sound?](https://systergon.com/sound-kit/help/preview-flow): Build a flow in the Canvas, Flows view and play the steps in order.
- [How do I see my sounds as a map?](https://systergon.com/sound-kit/help/canvas-graph-view): The Canvas tab has three views: a graph that lays your nodes out visually, the list, and Flows. Switch between them with the buttons at the top right.
- [How do I check my sounds are consistent?](https://systergon.com/sound-kit/help/check-sounds): Open the Consistency Report in the Canvas tab. It flags screens that use different sounds for the same role and volume that drifts from one screen to the next, then offers a one-click fix for each.
- [How do I fix an odd-sounding sound without replacing it?](https://systergon.com/sound-kit/help/match-tone): Use Match tone from the Consistency Report. It keeps the sound you chose but balances its tone and loudness toward the one the rest of that group uses.
- [How do I run a full audit of my sounds?](https://systergon.com/sound-kit/help/audit-report): Open the Full Audit Report from the Canvas toolbar. It checks consistency, accessibility, platform, and loudness across everything you scanned, and exports as Markdown or JSON.
- [What do the badges on a canvas node mean?](https://systergon.com/sound-kit/help/canvas-badges): They are quick warnings about the sound attached to that node — it peaks too hot, it drifts from its family in loudness, length, or brightness, or it has no haptic paired with it.
- [How do I quickly change the sound on a node?](https://systergon.com/sound-kit/help/quick-swap): Select the node in the Canvas tab and open Quick swap in the details sidebar. It offers sounds that match what the layer’s name says it does, and swaps in one click.
- [How do I work with lots of nodes at once?](https://systergon.com/sound-kit/help/batch-canvas-actions): The bar at the bottom of the Canvas tab selects everything you can see, exports a manifest of it, and can strip the sounds off the whole selection.
- [How do I hear the sound on the layer I select?](https://systergon.com/sound-kit/help/selection-preview): Turn on Canvas Preview in Settings → Editor. A small player then appears whenever you select a layer that has a sound attached.
- [How do I turn a sound into a reusable token?](https://systergon.com/sound-kit/help/save-as-token): Create a token from a sound so you can reuse it by name across your designs.
- [How do I version a sound token?](https://systergon.com/sound-kit/help/token-versions): Open a token and bump its version — patch, minor, or major. Each bump is recorded, so the token carries a history of what changed and when.
- [How do I switch between sound themes?](https://systergon.com/sound-kit/help/switch-themes): Pick a theme to swap every themed sound at once.

### Hand off & track
- [How do I give my sounds to developers?](https://systergon.com/sound-kit/help/handoff-developers): Use the Export tab to generate code snippets, a tokens file, and a handoff doc.
- [How do I export my sound tokens to a file?](https://systergon.com/sound-kit/help/export-tokens-file): In the Tokens tab, use the export action. Pick the tokens and the format, preview what will be written, then copy it or download it.
- [How do I import tokens from another file?](https://systergon.com/sound-kit/help/import-tokens): Use the import action in the Tokens tab. Drop a file in or paste the JSON, preview what was found, decide what happens to any clashes, and apply.
- [How do I sync my sounds to Figma Variables?](https://systergon.com/sound-kit/help/sync-figma-variables): Open Tokens → Export and use the Figma Variables panel. It previews how many variables and modes it will create, then writes them into your file.
- [How do I keep my tokens in sync with a Git repo?](https://systergon.com/sound-kit/help/git-sync-tokens): Open Tokens → Export → Git Sync, connect GitHub, GitLab, or Bitbucket, and push or pull the token file so design and code stay on the same source.
- [How do I share our sound rules with the team?](https://systergon.com/sound-kit/help/style-guide): Tokens → Export → Style Guide builds a document out of your naming, tokens, themes, loudness standards, platform choices, and known issues. Copy it or download it.
- [How do I see how my sounds are used?](https://systergon.com/sound-kit/help/track-usage): The Analyze tab shows coverage, usage, tonal balance, budget, and AI costs.
- [How do I see what my whole sound system sounds like?](https://systergon.com/sound-kit/help/tonal-profile): Open Analyze → Tonal and run the analysis. It scores how cohesive your sounds are, names the ones that drift, and shows how brightness is spread across the file.
- [How do I check my sounds hit the loudness my platform expects?](https://systergon.com/sound-kit/help/loudness-compliance): The loudness compliance report in Analyze → Tonal judges every measured sound against your Platform Palette’s target and lists the worst offenders first.

### Settings & plans
- [How do I change my settings?](https://systergon.com/sound-kit/help/configure-settings): Open Settings from the footer. The sidebar holds License, AI Providers, Storage, Sound Libraries, Editor, Platform Palette, and Privacy & Data.
- [How do I activate Sound Kit Pro?](https://systergon.com/sound-kit/help/activate-license): Open Settings → License, click the enter-license-key button, and paste the key from your purchase email. You can also move a key to another machine from the same screen.
- [How do I connect my own storage?](https://systergon.com/sound-kit/help/connect-storage): Open Settings → Storage and connect GitHub, S3 or Cloudflare R2, or Google Drive. Your sounds are then hosted by you, and the canvas just points at them.
- [How do I target iOS, Android, or Web?](https://systergon.com/sound-kit/help/platform-palette): Pick a Platform Palette in Settings. It biases loudness targets, haptic suggestions, and file formats toward the platform you are designing for.
- [How do I export or clear my Sound Kit data?](https://systergon.com/sound-kit/help/privacy-data): Settings → Privacy & Data exports everything Sound Kit has stored locally as a JSON file, and can clear it all out again.
- [What's free and what costs money?](https://systergon.com/sound-kit/help/whats-free): Browsing, searching, and previewing sounds are free, and so are your first few canvas sounds. Editing, AI, exports, and premium libraries need Sound Kit Pro — and a sound that actually plays also needs a paid Figma plan.

## Blog

- [Export Your Figma Motion as Video or Lottie](https://systergon.com/blog/motion-path-figma-video-lottie-export): You animate something in Figma, then someone asks for a GIF for the release email, an MP4 for Slack, a Lottie for the iOS build — and the workflow falls apart into screen recordings and conversions. Motion Path now exports all of them. Video (MP4, GIF, WebM) is encoded by Figma itself, so the file you get back is canvas playback rather than an approximation of it. Lottie is the format iOS, Android, React Native and the web all consume — and the one thing Figma’s own Copy as doesn’t give you.
- [Make a Pan, Zoom, and Rotate Path Animation with Figma Motion](https://systergon.com/blog/motion-path-figma-pan-zoom-rotate-camera-move): Figma Motion can keyframe position, scale, rotation and opacity — but it has no camera, the one move that carries a shot across a scene, pushes into a detail and tilts a few degrees on the way. Build one anyway: a clipped viewport, an oversized artwork, and a single path you draw. A step-by-step build of a four-second delivery-map move that pans across town, pushes in 1.55×, and rolls 7° as it lands — with a free Figma starter file, the two-shot method for measuring the path, and the one checkbox that ruins the whole thing if you leave it on.
- [Figma Shipped Motion. Nobody Shipped the Sound.](https://systergon.com/blog/sound-for-figma-motion-animations): A sheet rises and whooshes. A toggle slides and clicks. The animation is now designed in Figma — the sound is still decided months later by whoever implements the screen. How Sound Kit reads a layer’s real Figma Motion duration, delay and easing, fits a clip to that exact curve (length, transient and easing), finds every animation on the page that is still silent, and exports a handoff that names the animation each sound belongs to.
- [Why Your Prototype’s Sounds Feel Amateur (and the Fix Isn’t New Sounds)](https://systergon.com/blog/figma-prototype-sound-loudness-lufs): Someone picks a nice click. Someone else finds a lovely chime. A third person grabs an error buzz from another pack. Each choice is defensible; together they sound cheap. It is almost never the clips — it is that they are all at different levels. A practical guide to LUFS, why peak normalisation is the wrong tool, how to pick a target, and how to keep a growing sound set on it.
- [Sound Kit for Figma — Design the Sound of Your Product, Not Just the Pixels](https://systergon.com/blog/sound-kit-for-figma-sound-design-system): Colour has tokens. Spacing has tokens. Motion has a timeline. Sound has a folder of MP3s and a Slack message — so it gets decided last, by whoever implements the screen. A field guide to the whole Sound Kit workflow: find or generate a sound, shape it in a real editor with EQ and LUFS targets, score your Figma Motion animations, audit a whole file for drift and gaps, then hand engineering W3C design tokens plus Swift, Kotlin and React snippets.
- [Motion Path for Figma — Choose Where a Loop Starts (and Preview Your Real Object)](https://systergon.com/blog/motion-path-figma-start-point-object-preview): A small Motion Path update sparked by a Community review. Every path — closed loops and open curves alike — now has a draggable start dot (plus a Start point control) so you choose exactly where the object departs, with a live readout of its canvas X/Y, distance from the path start and end, and heading. And the preview can draw your actual layer riding the path at true size, not a placeholder marker. Still native Figma Motion keyframes.
- [Motion Path for Figma — Preview at 24 · 30 · 60 fps, Full-Screen, with Zoom & Pan](https://systergon.com/blog/motion-path-figma-preview-fps-theater-zoom): A preview upgrade for Motion Path, straight off the Figma forum. Check your timing at the frame rate you’ll ship at with a Smooth / 24 / 30 / 60 playback pill, open the preview into a full-screen theater with play / pause / stop transport, and zoom and pan like the Figma canvas — scroll to zoom toward your cursor, drag to pan. No exporting a video just to judge cadence. Still native Figma Motion keyframes.
- [Motion Path for Figma — Bring Objects to Life Along a Curve](https://systergon.com/blog/motion-path-figma-bring-objects-to-life): A field guide to Motion Path for Figma — every way to send a layer along a curve: rotate-to-path, easing and springs, a velocity graph, squash & stretch, colour shift, trails and draw-on, kinetic type and seeded swarms, plus the new velocity-linked motion blur and anticipation & overshoot. All baked as real, native Figma Motion keyframes, with a 2-minute tour, a dozen finished animations, and copy-as-code export.
- [Redesigning Motion Path — From a Wall of Controls to a Calm Panel](https://systergon.com/blog/motion-path-figma-ui-redesign-case-study): A design case study on rebuilding the Motion Path for Figma panel. Traction and feature requests had grown it into a ~3,000px scroll of ~105 controls that overwhelmed new users. Here is how research, an interactive Claude prototype and a phased Claude Code build turned it into a calm Setup → Essentials → Effects layout — without dropping a single one of its 70 fields.
- [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)