# Systergon — Full Site Guide

> Design and developer tools for Jira, Confluence, and Figma. Systergon builds focused, high-quality Figma plugins and Atlassian apps used by 100,000+ designers.

This document inlines the key content of https://systergon.com for language models and AI agents.

## Figma Plugins

### Motion Path
URL: https://systergon.com/products/figma-plugins/motion-path
Figma: https://www.figma.com/community/plugin/1654530170219655744

The "Path" animation Figma greyed out — available today as real, native Figma Motion keyframes. Animate any layer along a vector path with rotate-to-path, draw-on, springs, and loops.

Key features:
- Real Native Keyframes: Samples your path and writes native Position X/Y (plus Rotation, Scale, Opacity, and Path Trim) keyframe tracks straight onto the layer's Motion timeline — not a fake preview.
- Constant Speed by Arc Length: Geometry is resampled by arc length, so keyframes are spaced evenly along the path with one on every corner — no bunching on curves.
- Any Path Source: Animate along a vector, trace the outline of any shape (rectangle, ellipse, polygon, star, boolean), or generate a Circle, Wave, or Spiral with no path layer at all.
- Rotate to Path: Keyframes rotation so the layer faces along the tangent, with auto-flip to keep text and asymmetric objects upright on return legs, plus a constant rotation offset.
- Scale & Fade Along Path: Interpolate uniform scale and opacity from a start value to an end value across the path, emitted as their own keyframe tracks alongside translation.
- Draw-On Strokes: Animate the path's own stroke via Path Trim — Reveal draws the line on behind the object, or Trail runs a fixed-width window along it.
- Direction, Loops & Range: Forward, Reverse, or Ping-pong traversal with seamless loops, a range slider to animate only a sub-section, and a perpendicular normal offset.
- Native Easing & Springs: The full Figma easing set — Hold, Linear, Ease in/out, Back overshoots, Custom bezier, spring presets and Custom spring — plus bind easing to a variable.
- Stagger, Distribute & Trails: Send multiple layers down the same path offset in time (Stagger) or space (Distribute follow-the-leader), and bake faded echo ghosts for motion trails.
- Presets & GitHub Sync: Save and reuse animations locally, and optionally sync presets to a GitHub repository to share them across files and teammates.

### Figma Charts
URL: https://systergon.com/products/figma-plugins/figma-charts
Figma: https://www.figma.com/community/plugin/1345221583582136577/figma-charts

Design with the same JavaScript charting libraries your engineers build with — Highcharts, ECharts, ApexCharts, D3-based Nivo and Google Charts, running inside Figma. 588 examples across 45 chart types. Insert the result as native Figma layers, then hand developers the same chart as working React, Vue, Angular or Svelte code, so design and build stop diverging.

Key features:
- Five Charting Libraries: Google Charts, Highcharts, ApexCharts, D3-based Nivo and ECharts all ship today — 588 example charts across 45 chart types, each drawn by the real library rather than redrawn by the plugin.
- Specialised Data Editors: A table for ordinary data, and purpose-built editors where a table does not fit — an indented tree for hierarchies, paired node and link tables for Sankey and network charts, and a grid for matrices.
- Live Data Connectors: Connect a Google Sheet, Airtable base, Supabase table or REST API and refresh the chart in place. Your styling survives the refresh; only the numbers change.
- Design System Styling: Build palettes from your own Figma colour variables and styles, bind chart text to your Figma text styles, and save both as presets that every chart in the file can use.
- Element Inspector: Click a bar, an axis or the legend in the preview and the configuration panel filters to the options that affect it — faster than knowing what the library calls that option. Highcharts and ApexCharts.
- Native Figma Layers: Insert as SVG and the chart becomes real vector and text layers with the correct fonts loaded first, or as PNG for a flat image. Select an inserted chart later and it reopens for editing.
- Animation Timeline: Build a sequence of chart states and export it as a GIF or video, driven by the data changing between snapshots rather than by hand-keyframing.
- Code & Token Export: SVG, PNG, PDF, embed, data, config, W3C design tokens, and component code for React, Vue 3, Angular, Svelte or plain JavaScript — so engineering builds what you designed.
- AI Chart Generation: Describe the chart you want, or ask for an edit in plain language, using your own API key — your account, your usage.
- MCP Server & Skills: An AI assistant that speaks MCP can create charts, recommend a type, connect data, build dashboards and place the result on your canvas. Agent-built charts are ordinary charts you can reopen.
- GitHub Sync: Save charts to a repository and browse them back out, so a team shares one set of charts instead of passing files around.
- Accurate By Construction: Because the real library lays the chart out, the axis, scale and label collisions you see at design time are the ones the built product will have.

### WaveCraft
URL: https://systergon.com/products/figma-plugins/wavecraft
Figma: https://www.figma.com/community/plugin/1352253313088318254/wavecraft-beautiful-backgrounds-banners-and-headers

Generate beautiful wave backgrounds, banners, and headers. SVG wave generator inspired by macOS Big Sur. Export waves as SVG for web projects.

Key features:
- Generative SVG Waves: Produce waves inspired by the iconic macOS Big Sur design with algorithmic generation.
- Extensive Customization: Change size, colors, and wave shapes to suit your style and brand.
- Gradient Control: Fine-tune gradients for depth and visual appeal with custom color stops.
- Dynamic Configuration: Access a wide array of configuration values for personalized designs.
- Seamless Figma Integration: Add generated SVG waves directly to your Figma canvas with one click.
- Editable SVG Files: Customize your waves within Figma after import for further refinement.
- User-Friendly Interface: Designed for ease of use, making customization intuitive for all skill levels.

### Figma UI Icon Set
URL: https://systergon.com/products/figma-plugins/figma-ui-icon-set
Figma: https://www.figma.com/community/plugin/1349302373670864083/figma-ui-icon-set

180+ minimalist UI icons for Figma. Clean icon set designed for plugin development and interface design. SVG-ready icons you can customize.

Key features:
- Search Icons: Quickly find the icon you need with built-in search functionality.
- Drag and Drop: Simply drag and drop icons directly onto your Figma canvas.
- Create Icon Components: Turn icons into reusable Figma components for your design system.
- Download SVG Icons: Download all SVG icons or select specific ones for your project.
- Update Components: Edit or delete icon variants directly from the plugin interface.
- Consistent Design: 180+ icons with consistent sizing and stroke width for visual harmony.

### Sound Kit
URL: https://systergon.com/products/figma-plugins/figma-sound-kit
Figma: https://www.figma.com/community/plugin/1398310751744117050

Design, audit and hand off the sound of your product without leaving Figma. Browse and preview UI sounds, generate them with AI, trim and normalise them in a real editor, score Figma Motion animations, audit a whole file for consistency, and export tokens and code for developers.

Key features:
- Searchable Sound Library: A curated library of UI sounds — taps, toggles, sends, successes, errors, notifications and system audio — with waveform and LUFS readings rendered on every result row.
- Find Similar & Family Fit: Start from a sound you like and get its acoustic neighbours, then score any candidate against the sounds you already ship so a new one joins the family instead of breaking it.
- AI Sound Generation: Generate sounds from a text description with OpenAI, ElevenLabs or Replicate using your own API key — including batches of variations and generations matched to a reference sound.
- Waveform Editor & Effects: Trim, fade, EQ, reverb, echo, pitch and speed, rendered offline against the real buffer so the preview is the deliverable. A/B any edit against the original.
- Loudness Targets (LUFS): Normalise every sound to one perceptual loudness target, with presets matching what iOS, Android and web expect — the single biggest fix for a set that feels amateur.
- Spectrogram & Accessibility Check: Read a sound as a spectrogram to find the band that makes it harsh, and flag clips that startle or fatigue before they end up on a screen users see forty times a day.
- Multi-Track Mixer: Layer several sounds into one signature with per-track effects, time offsets and swap-a-layer, then bounce the result down to a single attachable clip.
- Behaviour & State Variations: Record how a sound behaves — trigger, interrupt, loop, delay — and derive hover, pressed and disabled variants from one base so a component set stays coherent.
- Sound for Figma Motion: Read a layer’s real duration, easing and trigger, stretch a sound to that length, shape it with the same curve, align its attack to the motion’s peak, and scan a page to find every animation that is still silent.
- Canvas Scan, Graph & Flows: Inventory every sound across every page, see coverage as a map so silent flows are visible, and play a whole journey in order to hear how the sequence actually feels.
- Consistency & Audit Reports: Catch duplicate roles, missing sounds and loudness drift with one-click fixes, then run the full categorised audit across coverage, loudness, accessibility and handoff readiness.
- Sound Tokens (W3C DTCG): Name a sound once and reuse it everywhere, with versioning and per-theme variants, in the same $type / $value / $extensions shape as your colour and spacing tokens.
- Developer Export & Git Sync: Export a tokens file plus Swift, Kotlin, React and web snippets with behaviour and loudness attached, and push tokens to GitHub, GitLab or Bitbucket as a reviewable diff.
- Figma Variables Sync: Push sound tokens into Figma Variables so audio sits alongside colour, spacing and typography, resolving per mode like every other variable.
- Generated Style Guide: Produce a style guide from your real tokens — what each sound is for, when it fires, how loud it sits — so the next designer does not invent a fourth success chime.
- Bring Your Own Storage: Full-quality audio is uploaded to storage you connect and control — GitHub, an S3-compatible bucket, Cloudflare R2, Drive or your own CDN. Systergon never hosts your files.

### Figma Duotones
URL: https://systergon.com/products/figma-plugins/figma-duotones
Figma: https://www.figma.com/community/plugin/1372742379695402242/figma-duotones-add-duotone-effects-to-your-images-and-elements

Apply duotone effects to images in Figma. One-click color transformations with custom two-color combinations. Image filter plugin for striking visuals.

Key features:
- Blending Mode: Apply custom light and dark colors to blend your images seamlessly with your design.
- Overlay Mode: Enhance your images with overlay effects using predefined or custom color overlays.
- Intensity Control: Adjust the intensity of the duotone effect to achieve the perfect balance.
- Swap Colors: Easily swap the light and dark colors with a single click to explore variations.
- Save Presets: Save your custom duotone settings as presets for quick access across projects.
- Load Presets: Load previously saved presets to apply your favorite duotone effects instantly.
- Download Options: Download duotone images in PNG or JPG format at 1x or 2x resolution.
- Insert Image: Insert duotone images directly into your Figma project or replace existing images.

### Treejack
URL: https://systergon.com/products/figma-plugins/treejack
Figma: https://www.figma.com/community/plugin/1377209627759118249/treejack-tree-test-effortless-information-architecture-testing

Information architecture testing in Figma. Validate navigation structure with tree tests. IA testing plugin for UX research and navigation validation.

Key features:
- Easy Setup: Quickly create and set up tree tests with an intuitive interface.
- Customizable Tasks: Define specific tasks for users to perform during tests.
- Detailed Reporting: Generate detailed reports on user behavior and task completion.
- Interactive Visualization: Visualize navigation paths and user choices interactively.
- Multi-Project Support: Manage and test multiple projects within Figma.
- Exportable Data: Export test data for further analysis and presentation.

### HTML Tags & Attributes
URL: https://systergon.com/products/figma-plugins/html-tags-attributes
Figma: https://www.figma.com/community/plugin/1356693808932392729/html-tags-attributes-attach-semantic-data-to-your-design-and-ensure-a-seamless-dev-handoff

Add semantic HTML tags and ARIA attributes to Figma designs. Developer handoff plugin for accessibility. Export designs with proper HTML structure.

Key features:
- Semantic Tagging: Attach HTML tags (h1, h2, header, footer, span, menu) to design elements.
- Attribute Assignment: Assign common and tag-specific attributes (class, id, href) to elements.
- ARIA Support: Enhance accessibility with ARIA attribute integration (role, aria-describedby).
- Interoperability: Share data across plugins with setSharedPluginData for collaborative workflows.
- Dual Inspect Modes: Visualize HTML semantics on canvas overlay or in the Layers panel.
- Multi Edit: Simultaneously edit tags and attributes across multiple elements.
- Component Inheritance: Tags and attributes automatically propagate to all component instances.

### Old-school Prototyping
URL: https://systergon.com/products/figma-plugins/old-school-prototyping
Figma: https://www.figma.com/community/plugin/1359134923989415074/old-school-prototyping

Convert Figma frames to simple HTML pages. Quick prototype to HTML export with background images and colors. No frameworks needed.

Key features:
- Retro-styled Presentation: Classic mockup presentation style for a nostalgic prototyping experience.
- Repeating Backgrounds: Easy replication of horizontal backgrounds with 1px repeating background images.
- Organized Export: Downloaded zip file includes a collection of mockup pages with links to individual pages.
- Lightweight Output: Lightweight and efficient, ensuring smooth integration into modern workflows.
- No Framework Dependencies: Pure HTML output without any framework dependencies.

## Figma Motion — export guides

Ten task-shaped pages covering every way an animation leaves Figma Motion: video
(MP4, GIF, WebM) encoded by Figma itself, Lottie for iOS / Android / React Native
/ web, CSS and SVG for the browser, and the plugin config that reproduces a setup.
Each URL is the question it answers, and each has a `.md` twin.

### Figma Motion Export to Lottie
URL: https://systergon.com/figma-motion-export-to-lottie
Markdown: https://systergon.com/figma-motion-export-to-lottie.md
Answers: "figma motion export to lottie"

The complete guide to turning a Figma Motion animation into a Lottie file with the Motion Path plugin — what Lottie is, where the export lives, every field in the panel, the structure of the emitted Lottie 5.9 document, which properties survive the conversion and which cannot, and how to hand the file to iOS, Android, React Native or web developers.

Steps:
1. Animate the layer — Select the layer and the path, set the timing on the Animate tab, and press Apply motion path so the native Figma Motion keyframes exist.
2. Open the overflow menu — Click the ⋯ button in the Motion Path titlebar.
3. Choose Copy as code — Pick Copy as code from the menu. The panel opens on the CSS tab.
4. Switch to the Lottie tab — Select Lottie in the format toggle. The Lottie document is generated from the resolved path and timing.
5. Copy or download the file — Use the copy icon to put the JSON on the clipboard, or the download icon to save motion-path.json to disk.
6. Read the notes — Check the notes printed under the snippet - they list anything in your animation that Lottie cannot carry.
7. Hand it over with context — Send the JSON with an MP4 of the same animation, and say that the shape is a placeholder, that looping is a player setting, and what did not cross over.

### How to Export Figma Motion
URL: https://systergon.com/how-to-export-figma-motion
Markdown: https://systergon.com/how-to-export-figma-motion.md
Answers: "how to export figma motion"

The hub page for exporting Figma Motion: compares every available route — MP4, GIF, WebM, Lottie, CSS, SVG, HTML, Figma’s native Copy as, and Config JSON — and says which to pick for a given destination.

Steps:
1. Decide where the animation is going — A chat message, an email, a web page or an app build each want a different format.
2. Apply the motion so keyframes exist — Every export reads the applied timeline, not the preview.
3. Open the ⋯ menu — Copy as code, Export video and Config JSON are the three routes out.
4. Pick the route — Export video for MP4, GIF or WebM; Copy as code for Lottie, CSS, SVG or a demo page; Config JSON to reproduce the setup.
5. Copy, download or encode — Code formats copy or download instantly; video is encoded by Figma and downloads when it finishes.

### Figma Motion Export Video
URL: https://systergon.com/figma-motion-export-video
Markdown: https://systergon.com/figma-motion-export-video.md
Answers: "figma motion export video"

How to export a Figma Motion animation as video — MP4, GIF or WebM — using Figma’s own encoder: every setting in the panel, the top-level-frame rule that governs what can be encoded, the file-size maths behind frame rate and size, and when each format is the wrong choice.

Steps:
1. Apply the motion path — Press Apply motion path so the frame has a timeline to record.
2. Put the animation in a top-level frame — Figma encodes frames that sit directly on the page. Nested frames are rejected.
3. Open Export video — Click the ⋯ button in the titlebar and choose Export video.
4. Pick a format — Choose MP4, GIF or WebM. The fields below change to match - MP4 and WebM get Quality, GIF gets Loops.
5. Set frame rate and size — Choose a frame rate from the list the format allows, and a size multiplier between 50% and 4×.
6. Check the summary and export — The summary line states the format, rate, size and quality. Press Export and Figma encodes the file.

### Figma Motion to JSON
URL: https://systergon.com/figma-motion-to-json
Markdown: https://systergon.com/figma-motion-to-json.md
Answers: "figma motion to json"

Explains the three JSON outputs available from a Figma Motion animation — Lottie JSON, Figma’s own Copy as JSON, and Motion Path’s Config JSON — which one to use for playback, inspection or reproducing a setup, how to download the file, and the code that loads it in lottie-web, lottie-ios, lottie-android and React Native.

Steps:
1. Decide which JSON you need — Lottie JSON plays, Figma’s Copy as JSON describes the keyframes, and Config JSON reproduces the plugin setup.
2. Apply the motion path — The exports read the applied timeline rather than the live preview.
3. Open Copy as code — Click ⋯ in the titlebar and choose Copy as code.
4. Select the Lottie tab — Lottie is the JSON that plays. The other tabs emit CSS, SVG and a demo page.
5. Download the file — The download icon saves motion-path.json with an application/json MIME type.
6. Load it in a player — Point lottie-web, lottie-ios, lottie-android or lottie-react-native at the file.

## 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.

## Figma Charts — Help & FAQ

588 chart examples across five libraries (Google Charts, Highcharts, D3 Nivo, ApexCharts, ECharts), rendered live inside Figma and inserted as editable vectors. Help centre: https://systergon.com/figma-charts/help

### Getting started
_What the plugin does, why it runs real chart libraries, and how to make your first chart._

- [What is FigmaCharts and what can it do?](https://systergon.com/figma-charts/help/what-is-figmacharts): FigmaCharts runs the same JavaScript charting libraries your engineers use — Google Charts, HighCharts, ApexCharts, D3 - Nivo and ECharts — and puts their real output on your canvas as native Figma layers. There are 588 charts to start from, you replace the sample numbers with your own, and the code you export renders that same chart from that same library.
- [Why does FigmaCharts use real chart libraries?](https://systergon.com/figma-charts/help/real-chart-libraries): Because it closes the gap between what you design and what gets built. The plugin runs the same JavaScript charting libraries your engineers already use, so the chart on your canvas is the library's own output — and the code you hand over renders that same chart, from the same library, at the same version.
- [How do I create my first chart?](https://systergon.com/figma-charts/help/create-first-chart): Pick a chart from the gallery, put your numbers in the Data tab, then press + SVG to place it on the canvas. Nothing needs setting up first.
- [How do I get around the plugin?](https://systergon.com/figma-charts/help/get-around): There are really only two screens: the gallery where you choose a chart, and the editor where you change it. The footer sits under both and holds Settings and Help.
- [How do I resize or maximise the plugin window?](https://systergon.com/figma-charts/help/resize-plugin-window): The plugin opens at 850 by 800. Press the button in the top-right corner to fill the Figma window, or drag the grip in the bottom-right corner to any size in between — whatever you leave it at is what it opens at next time.
- [How do I edit a chart I already inserted?](https://systergon.com/figma-charts/help/edit-existing-chart): Select the chart on the canvas with the plugin open and it reopens in the editor with your data and settings intact. Press Update SVG when you are done and it replaces the one already on the canvas.
- [What happens to my work if I close the plugin?](https://systergon.com/figma-charts/help/restore-session): While you are in the editor the plugin keeps saving the chart you are building. If the window closes before you have inserted anything, it offers to bring that chart back the next time you open it.
- [What's free and what needs a paid plan?](https://systergon.com/figma-charts/help/free-vs-pro): Google and HighCharts give you one free chart in every category — the first tile in the grid. The other three libraries, the data connectors, AI, animation and export all need the paid plan, which is $38 a year.

### Choosing a chart
_Five real JavaScript charting libraries, 45 chart types — how to pick._

- [Which chart library should I pick?](https://systergon.com/figma-charts/help/choose-chart-library): If your engineers already use one of the five, pick that one — you are choosing the library your product will actually ship, not just a look. Otherwise pick on range: ECharts has by far the most charts, HighCharts and Nivo the widest spread of types, and Google is the plainest. All five insert the same kind of Figma layers.
- [How do I find the chart type I need?](https://systergon.com/figma-charts/help/browse-chart-gallery): The gallery filters in two steps: pick a library tab, then pick a category chip below it. You see one category at a time, and every tile is a live chart rather than a picture.
- [What do the category filters mean?](https://systergon.com/figma-charts/help/chart-categories): Each chip is a family of related charts, not a single chart. There are 45 families in all, and any given library shows only the ones it actually ships.
- [Which chart type fits my data?](https://systergon.com/figma-charts/help/chart-type-guide): Work from the shape of your data rather than the name of the chart. The plugin sorts chart types by the shape they need, and only a handful of shapes exist.
- [What are Essential, Common and Advanced?](https://systergon.com/figma-charts/help/complexity-modes): They are three levels of chart furniture — titles, legends, axes, labels. Essential strips it all away, Common is the standard chart, Advanced turns everything on.
- [Why is a chart type locked?](https://systergon.com/figma-charts/help/locked-charts): Under Google and HighCharts only the first chart in each category is free — everything after it is PRO. D3 - Nivo, ApexCharts and ECharts are PRO from top to bottom.
- [What does the ECharts "beta" label mean?](https://systergon.com/figma-charts/help/echarts-beta): ECharts is the newest of the five libraries, and the chip on its tab says so. Everything in it renders, configures and inserts like the other four — it just has more rough edges around data editing.
- [Can I move a chart to a different library?](https://systergon.com/figma-charts/help/switch-library): Not in one click — there is no library switcher. You carry the data across yourself: export it, open the equivalent chart under the other tab, and paste it back in.

### Getting your data in
_Type it, paste it, import it, or connect a live source._

- [How do I type my own data in?](https://systergon.com/figma-charts/help/enter-data-manually): Open the Data tab and type straight into the table — the first column holds your labels and every other column is a series. The preview redraws as you type.
- [How do I paste from Excel or Google Sheets?](https://systergon.com/figma-charts/help/paste-from-spreadsheet): Copy the cells in your spreadsheet, then either paste them straight into the data table or drop them into the Import tab and press Parse & Apply Data.
- [How do I import a CSV or Excel file?](https://systergon.com/figma-charts/help/import-csv): CSV and JSON files go through the Import tab in the editor. Excel workbooks come in a different way — as a connected data source — because the plugin has to unpack the workbook first.
- [How do I use sample data and shuffle it?](https://systergon.com/figma-charts/help/sample-data): The Sample Data sub-tab holds ready-made datasets for the chart you are on, and the shuffle button in the tab bar re-rolls the numbers without touching your labels.
- [How does the data table work?](https://systergon.com/figma-charts/help/data-table-basics): It behaves like a small spreadsheet: sort columns, drag rows, select cells, find and replace, undo — with a toolbar above it and a right-click menu on almost everything.
- [Why does my chart show a different data editor?](https://systergon.com/figma-charts/help/special-data-editors): Because a table cannot describe every chart. Nested, connected and grid-shaped charts get an editor built for that shape, and a few unusual types fall back to raw JSON.
- [How do I enter data for a tree, treemap or sunburst?](https://systergon.com/figma-charts/help/hierarchy-data): These charts read nested data, so the Data tab shows an indented tree instead of a table. You add children to a node rather than rows to a list.
- [How do I enter data for a Sankey, chord or network chart?](https://systergon.com/figma-charts/help/node-link-data): These charts need two lists, so the Data tab gives you two tables: the things being connected, and the connections between them.
- [How do I enter data for a heatmap or calendar chart?](https://systergon.com/figma-charts/help/matrix-calendar-data): A heatmap is edited as a grid with named rows and columns; a calendar is edited as a list of dates and values. Both live in the Data tab and swap in automatically.
- [How do I connect a Google Sheet?](https://systergon.com/figma-charts/help/connect-google-sheets): Share the sheet so anyone with the link can view it, then paste its URL into the Google Sheets wizard. No API key and no Google sign-in are involved.
- [How do I connect an API, Airtable or Supabase?](https://systergon.com/figma-charts/help/connect-api-airtable-supabase): All three use the same flow: press Connect Source, pick the type, hand over a key, then point the wizard at the rows you want.
- [How do I keep a chart's data up to date?](https://systergon.com/figma-charts/help/live-data-refresh): Once a chart is linked to a source, a strip at the top of the Data tab shows where the data came from and when — press Refresh to pull the latest.

### Styling & presets
_Colours, type and presets — including your own design system._

- [How do I find a specific chart option?](https://systergon.com/figma-charts/help/configuration-panel): Use the search box at the top of the Configuration tab. Options are also grouped by what they affect — title, legend, axes, tooltip, colours and so on.
- [How do I change my chart's colours?](https://systergon.com/figma-charts/help/change-colors): Pick a Colour palette in the Appearance group to recolour the whole chart at once, or open the Colors group to set individual series colours by hand.
- [What are colour palettes and how do I use them?](https://systergon.com/figma-charts/help/color-palettes): A palette is an ordered set of colours applied to your series in turn. FigmaCharts ships 28 — nine of its own and 19 that match design systems and charting libraries you may already use — and you can build your own.
- [How do I use my Figma variables and styles as chart colours?](https://systergon.com/figma-charts/help/figma-variables-colors): Mostly you do not have to. The plugin reads the colour variables already in your file and offers a palette built from them, under Figma in the palette list. When you want to choose the collection yourself — or bring a text style across at the same time — use Import from Figma in the Chart Style picker.
- [What are chart style presets?](https://systergon.com/figma-charts/help/chart-style-presets): A chart style is a saved look — gridlines, labels, spacing, typography and sometimes a palette — applied in one click. A colour palette only changes colours; a chart style can change everything.
- [Why did my colours change when I picked a chart style?](https://systergon.com/figma-charts/help/color-vs-style-precedence): Because that style carried its own palette. There are two colour controls and a clear order between them: a palette you pick yourself always wins, then the chart style, then the library default.
- [How do I save my own preset?](https://systergon.com/figma-charts/help/save-custom-preset): Style a chart the way you want it, then save it as a chart style or as a colour palette. Both then appear in the pickers alongside the built-in ones.
- [How do I set the font on a chart?](https://systergon.com/figma-charts/help/typography-fonts): Use Typography in the Appearance group. Pick a font and the preview loads it, so what you see is what Figma will draw when you insert.
- [How do I bind a chart to my Figma text styles?](https://systergon.com/figma-charts/help/text-styles): Pick a Figma text style instead of a font. The chart then uses the family, size and weight your design system already defines, so it matches the rest of your work without you retyping anything.
- [How do I set my chart's width and height?](https://systergon.com/figma-charts/help/chart-size): Use the Dimensions fields in the Appearance group. These set the size the chart is inserted at — they are not the same as zooming the preview.
- [How do I edit just one part of a chart?](https://systergon.com/figma-charts/help/inspector): Turn on the Inspector, then click that part of the chart in the preview. The Configuration tab filters down to the options that affect what you clicked.

### Putting charts in Figma
_Inserting, updating and navigating the preview._

- [How do I put a chart on the canvas?](https://systergon.com/figma-charts/help/insert-chart): Press + SVG in the editor header. The chart lands in the middle of your viewport as a real Figma layer, already selected, and the plugin stays open so you can keep working on it.
- [Should I insert as SVG or PNG?](https://systergon.com/figma-charts/help/insert-svg-vs-png): SVG almost always. It gives you a real Figma frame of vector and text layers you can recolour, restyle and put in components. PNG gives you one flat picture — pick it only when you want the chart frozen exactly as it is.
- [How do I update a chart after inserting it?](https://systergon.com/figma-charts/help/update-inserted-chart): Select the chart on the canvas, change what you need in the editor, then press Update SVG. It replaces the chart in place — same position, size, rotation, name and frame — rather than adding a second one.
- [What does the Auto-update checkbox do?](https://systergon.com/figma-charts/help/auto-update): It pushes every change you make straight to the chart on the canvas, so you stop pressing Update SVG. It appears only when you are editing a chart that is already in the file.
- [How do I pan and zoom the chart preview?](https://systergon.com/figma-charts/help/preview-navigation): The preview behaves like the Figma canvas: two-finger scroll to pan, pinch or ⌘-scroll to zoom where your cursor is, and drag to move it around. None of it changes the chart — it is just how you are looking at it.
- [Why does my inserted chart differ from the preview?](https://systergon.com/figma-charts/help/preview-vs-output): It should not — the plugin copies exactly what the preview has drawn. What differs is everything that only exists while a chart is live: tooltips, hover effects, and the zoom you were viewing it at.
- [How do I add a KPI card?](https://systergon.com/figma-charts/help/kpi-cards): KPI cards are not built by hand in the plugin — they come with a dashboard. Ask Claude or another agent connected to FigmaCharts for a dashboard, and it draws a row of metric cards above your charts.
- [How do I fill a community template with charts?](https://systergon.com/figma-charts/help/fill-template): Run Fill Community Template. It finds every frame on the page whose name starts with [INSERT], builds the chart named after it, and drops it into that exact spot at that exact size.

### Export & handoff
_Hand engineering the same library you designed in — code, tokens, data, PDF, embeds and GitHub._

- [What can I export?](https://systergon.com/figma-charts/help/export-formats): Eight formats, from the Export tab: SVG, PNG, PDF, chart code, your data, the chart config, an embeddable snippet, and design tokens. Code and Config are the handoff ones — they carry the real chart library your developer will build with.
- [How do I export chart code for React, Vue, Svelte or Angular?](https://systergon.com/figma-charts/help/export-code): Choose Code in the Export tab and pick a framework. You get a working component that renders the chart you designed, using the same chart library, so your engineers build from your file rather than from a screenshot.
- [How do I export design tokens?](https://systergon.com/figma-charts/help/export-tokens): Choose Tokens in the Export tab. Your chart's colours and typography come out as CSS custom properties, SCSS variables, a Tailwind config, W3C design tokens, or plain JSON.
- [How do I export my data back out?](https://systergon.com/figma-charts/help/export-data): Choose Data in the Export tab and pick CSV, JSON or Excel. It exports the chart's current numbers, including anything you pasted, imported or pulled from a connected source.
- [How do I export a PDF or an embeddable chart?](https://systergon.com/figma-charts/help/export-pdf-embed): Choose PDF for a print-ready page, or Embed for a snippet you can paste into a web page — either interactive, or a static SVG with no dependencies.
- [How do I save a chart and open it again later?](https://systergon.com/figma-charts/help/save-load-charts): Save the chart as a file from the Export tab, then open it again with Import on the home screen. The file holds your data, your styling and your chart settings together.
- [How do I sync charts with GitHub?](https://systergon.com/figma-charts/help/github-sync): Add a personal access token in Settings, then save charts straight to a repository and browse them back out — so a team shares one set of charts instead of passing files around.

### AI & automation
_Generate and edit charts by asking, plus animation and agents._

- [How do I set up AI with my own API key?](https://systergon.com/figma-charts/help/ai-setup): Open AI settings, pick Claude, OpenAI or Gemini, and paste a key from that provider. The plugin has no AI of its own — it talks to your account, so you keep control of the cost and the data.
- [How do I generate a chart by describing it?](https://systergon.com/figma-charts/help/ai-generate-chart): Press AI Generate on the home screen and describe the chart you want in plain language. You get a real chart in the editor, with data, which you can then edit like any other.
- [How do I edit a chart by asking for changes?](https://systergon.com/figma-charts/help/ai-edit-chart): Open the AI tab inside the editor and describe the change — "make the bars thinner", "move the legend to the bottom", "use our brand blue". It rewrites the chart settings for you.
- [How do I get a chart type recommended for my data?](https://systergon.com/figma-charts/help/ai-recommend): Ask the AI what to use and describe your data. It suggests a chart type and says why, which is useful when you know what you want to show but not how to show it.
- [How do I animate a chart as a Figma prototype?](https://systergon.com/figma-charts/help/animation-basics): Capture two or more snapshots of your chart on the Animation tab, choose how each one transitions to the next, and insert. You get a Figma component set whose variants are wired together as a prototype — not a video.
- [Can I use FigmaCharts from Claude or another agent?](https://systergon.com/figma-charts/help/mcp-and-skills): Yes. FigmaCharts ships an MCP server, so an AI assistant that speaks MCP can create charts, connect data, build dashboards and place the result in your Figma file.

### Plan, licence & account
_What is free, how to upgrade, and where your data lives._

- [How do I upgrade to Pro?](https://systergon.com/figma-charts/help/upgrade-to-pro): Press Upgrade in the footer, or Get FigmaCharts Pro in any upgrade dialog. Checkout opens in your browser, and the licence key that arrives by email is what you paste back into the plugin.
- [How do I activate my licence key?](https://systergon.com/figma-charts/help/activate-license): Open Settings, choose License & Subscription, press Enter License Key and paste the key from your purchase email. It unlocks straight away — there is no account to create and nothing to sign in to.
- [My licence key isn't working](https://systergon.com/figma-charts/help/license-troubleshoot): The red message under the field says which of five things went wrong — a mistyped key, a key already in use, a key for another product, a lapsed subscription, or no connection. Each one has a different fix.
- [How do the early-bird discounts work?](https://systergon.com/figma-charts/help/discount-codes): New users get 50% off for their first 48 hours, then 20% for the day after that. The banner at the bottom of the plugin shows the code and the time left, and its button carries the code into checkout for you.
- [What data does the plugin store, and where?](https://systergon.com/figma-charts/help/account-privacy): Three places: your own machine, the Figma file itself, and — only when a feature needs it — the internet. Nothing is gathered for analytics, and the plugin never phones home with your charts.

### Troubleshooting
_When something looks wrong._

- [My chart won't render](https://systergon.com/figma-charts/help/chart-not-rendering): When something in the chart cannot be drawn, the plugin keeps the last version that worked and tells you what failed. Undo the change you just made and the preview comes back.
- [My data won't load or looks wrong](https://systergon.com/figma-charts/help/data-errors): Every data failure now says what went wrong, either as a red toast on the Data tab or as a message naming the series it could not use. An edit that fails is never half-applied — the chart keeps the last data that worked.
- [My chart vanished or moved after inserting](https://systergon.com/figma-charts/help/chart-disappeared): A new chart lands in the middle of your viewport and is left selected, so it is almost always on screen already — press Shift 2 in Figma to zoom straight to it.
- [My chart's fonts look wrong in Figma](https://systergon.com/figma-charts/help/fonts-wrong): The preview and the inserted chart get their fonts from two different places, so one can be right while the other is not. Insert as SVG and the plugin loads the real Figma font before it places the chart.

## Figma Charts — Chart types

45 chart types, one page each: what the type is good at, what it is bad at, the data shape it needs, and which of the five libraries offer it. Catalogue: https://systergon.com/figma-charts/chart-types

### Comparison
_Which is bigger, and by how much._

- [Bar chart](https://systergon.com/figma-charts/chart-types/bar): The default for comparing values across categories · 97 examples
- [Histogram chart](https://systergon.com/figma-charts/chart-types/histogram): How often values fall into each range · 7 examples
- [Bullet chart](https://systergon.com/figma-charts/chart-types/bullet): One measure against its target, in one line · 3 examples
- [Pareto chart](https://systergon.com/figma-charts/chart-types/pareto): Sorted bars plus a running cumulative line · 1 examples
- [Waterfall chart](https://systergon.com/figma-charts/chart-types/waterfall): How a starting number becomes an ending number · 3 examples
- [Marimekko chart](https://systergon.com/figma-charts/chart-types/marimekko): Two dimensions at once: share within, share across · 1 examples
- [Pictorial Bar chart](https://systergon.com/figma-charts/chart-types/pictorialbar): Bars drawn as repeated symbols · 7 examples

### Trend over time
_What is happening, and in which direction._

- [Line chart](https://systergon.com/figma-charts/chart-types/line): The default for anything measured over time · 116 examples
- [Area chart](https://systergon.com/figma-charts/chart-types/area): A line chart that also shows volume · 19 examples
- [Stream chart](https://systergon.com/figma-charts/chart-types/stream): A stacked area with no fixed baseline · 3 examples
- [Bump chart](https://systergon.com/figma-charts/chart-types/bump): How rankings change over time · 1 examples
- [Theme River chart](https://systergon.com/figma-charts/chart-types/themeriver): ECharts’ take on the streamgraph · 2 examples
- [Combo chart](https://systergon.com/figma-charts/chart-types/combo): Bars and a line on the same axes · 5 examples
- [Timeline chart](https://systergon.com/figma-charts/chart-types/timeline): Bars that span from a start to an end · 13 examples

### Part of a whole
_What something is made of._

- [Pie chart](https://systergon.com/figma-charts/chart-types/pie): Share of a total, for a handful of slices · 38 examples
- [Donut chart](https://systergon.com/figma-charts/chart-types/donut): A pie with the middle freed up for a total · 3 examples
- [Treemap chart](https://systergon.com/figma-charts/chart-types/treemap): Nested rectangles sized by value · 18 examples
- [Sunburst chart](https://systergon.com/figma-charts/chart-types/sunburst): A hierarchy as concentric rings · 9 examples
- [Icicle chart](https://systergon.com/figma-charts/chart-types/icicle): A hierarchy as stacked horizontal bands · 1 examples
- [Waffle chart](https://systergon.com/figma-charts/chart-types/waffle): A grid of squares, one per unit · 1 examples
- [Funnel chart](https://systergon.com/figma-charts/chart-types/funnel): Drop-off through an ordered sequence of stages · 10 examples
- [Circle Packing chart](https://systergon.com/figma-charts/chart-types/circlepacking): Nested circles sized by value · 1 examples

### Distribution
_How values spread, cluster and correlate._

- [Scatter chart](https://systergon.com/figma-charts/chart-types/scatter): Two measures plotted against each other · 52 examples
- [Box Plot chart](https://systergon.com/figma-charts/chart-types/boxplot): Median, spread and outliers, per group · 8 examples
- [Heatmap chart](https://systergon.com/figma-charts/chart-types/heatmap): A matrix where colour carries the value · 18 examples
- [Swarm Plot chart](https://systergon.com/figma-charts/chart-types/swarmplot): Every observation as a dot, nudged apart · 1 examples
- [Effect Scatter chart](https://systergon.com/figma-charts/chart-types/effectscatter): A scatter plot with animated ripples · 1 examples
- [Parallel chart](https://systergon.com/figma-charts/chart-types/parallel): Many variables at once, one line per record · 6 examples
- [Voronoi chart](https://systergon.com/figma-charts/chart-types/voronoi): The region closest to each point · 1 examples

### Flow & hierarchy
_What connects to what, and what contains what._

- [Sankey chart](https://systergon.com/figma-charts/chart-types/sankey): Flows between stages, sized by volume · 17 examples
- [Chord chart](https://systergon.com/figma-charts/chart-types/chord): Flows between every pair, arranged in a circle · 5 examples
- [Network chart](https://systergon.com/figma-charts/chart-types/network): Nodes and the links between them · 5 examples
- [Graph chart](https://systergon.com/figma-charts/chart-types/graph): ECharts’ force-directed graph · 14 examples
- [Tree chart](https://systergon.com/figma-charts/chart-types/tree): A hierarchy drawn as branches · 9 examples
- [Org Chart chart](https://systergon.com/figma-charts/chart-types/organization): Reporting lines, drawn as a tree of cards · 2 examples
- [Word Tree chart](https://systergon.com/figma-charts/chart-types/wordtree): How a phrase branches through a body of text · 5 examples
- [Venn chart](https://systergon.com/figma-charts/chart-types/venn): Overlap between two or three sets · 2 examples

### Place & date
_Values pinned to a map or a calendar._

- [Geo chart](https://systergon.com/figma-charts/chart-types/geo): Values placed on a map · 5 examples
- [Calendar chart](https://systergon.com/figma-charts/chart-types/calendar): A year of daily values as a grid · 6 examples

### Single measure
_One number against a target, or a profile across axes._

- [Gauge chart](https://systergon.com/figma-charts/chart-types/gauge): One value against a scale, as a dial · 22 examples
- [Radial chart](https://systergon.com/figma-charts/chart-types/radial): Progress drawn as an arc · 5 examples
- [Radar chart](https://systergon.com/figma-charts/chart-types/radar): A profile across several axes at once · 14 examples

### Specialist
_Types built for one job and very good at it._

- [Candlestick chart](https://systergon.com/figma-charts/chart-types/candlestick): Open, high, low and close in one mark · 18 examples
- [Word Cloud chart](https://systergon.com/figma-charts/chart-types/wordcloud): Terms sized by frequency · 2 examples
- [Custom chart](https://systergon.com/figma-charts/chart-types/custom): ECharts’ escape hatch for shapes nothing else covers · 11 examples

## Blog

### How to Make a Timeline or Gantt Chart in Figma (Two Charts, One Category)
URL: https://systergon.com/blog/figma-charts-timeline-chart
Published: 2026-08-27

The Timeline category holds two different charts and most confusion about the type comes from not noticing. One plots events — moments with labels. The other plots durations — bars that start and end, one row per thing, which everyone calls a Gantt. The tell is whether each record has one date or two. Designing event timelines that survive their own labels, Gantts a team will read, and the time axis that lies about elapsed time more easily than any other.

### How to Make a Calendar Heatmap in Figma (the Year as a Grid)
URL: https://systergon.com/blog/figma-charts-calendar-heatmap
Published: 2026-08-27

A calendar heatmap draws a year as a grid of days and exposes the two rhythms a time series hides: the weekly cycle and the annual one, both visible at once without any analysis. It is also the chart where no data and a value of zero look most alike. Handling missing days, choosing four or five colour steps rather than a gradient, the week-start convention, and the two category chips that hold this chart.

### How to Make a Map in Figma (and Why It Might Be a Population Map)
URL: https://systergon.com/blog/figma-charts-geo-maps
Published: 2026-08-27

A map is the most persuasive chart you can put in a deck and the one most likely to answer a question nobody asked, because the sizes on it are geography rather than data. When the geography is genuinely the variable, how to normalise so the map shows your numbers instead of population density, choosing regions or points, and one practical constraint: of the five libraries, only one will actually render you a map.

### How to Make a Bump Chart in Figma (Rank Is Not Value)
URL: https://systergon.com/blog/figma-charts-bump-chart
Published: 2026-08-27

A bump chart plots rank over time — league positions, chart placings, market-share order — and its whole design is built around making the crossings legible, because the crossings are the content. What it gains is that no series is ever too small to see; what it loses is every fact about magnitude. Making crossings readable, the variant that puts magnitude back, and the five-step recipe for building one in a library that has no bump type.

### How to Make a Streamgraph in Figma (the Chart That Gave Up Its Baseline)
URL: https://systergon.com/blog/figma-charts-stream-graph
Published: 2026-08-27

A streamgraph is a stacked area chart with the floor removed: the bands float around a centre line, so no series is privileged and every value is judged by thickness alone. That trade buys legibility with many more series and costs you the ability to read a number. What the wiggle buys, the four conditions the form needs, ordering the bands, and the three alternatives that are usually better.

### How to Make a Sunburst Chart in Figma (Depth You Can Follow)
URL: https://systergon.com/blog/figma-charts-sunburst-chart
Published: 2026-08-27

A sunburst is a hierarchy in polar coordinates: root at the centre, each ring a level out, each angle a share of its parent. It shows the same data a treemap does and reads differently — a treemap is for comparing sizes, a sunburst for seeing depth and lineage. It also has a distortion nobody mentions: the same share takes more ink the further out it sits. The depth limit, the drill-down answer, and how to choose within the hierarchy family.

### How to Make a Network Diagram in Figma (Where the Layout Is Not Data)
URL: https://systergon.com/blog/figma-charts-network-diagram
Published: 2026-08-27

A network diagram is the only chart here whose positions come from a physics simulation rather than from your data — run it twice and you get two pictures, and readers will read meaning into both. When a node-link view genuinely earns its place, the deterministic alternatives when it does not, six ways out of a hairball, and why the adjacency matrix deserves far more use than it gets.

### How to Make an Org Chart in Figma (the Chart With No Numbers)
URL: https://systergon.com/blog/figma-charts-org-chart
Published: 2026-08-27

An org chart is the one chart that plots no quantity at all — it encodes who reports to whom as position and connection. Which makes it a diagram with a chart engine behind it, and gives it a problem no other type has: it is about people, so every layout decision is read as a claim about the organisation. The three things it claims, four layouts and what each argues, and how to make it carry span of control as well as structure.

### How to Make a Bullet Chart in Figma (the Gauge, Done Properly)
URL: https://systergon.com/blog/figma-charts-bullet-chart
Published: 2026-08-27

A bullet chart carries a value, a target and qualitative bands in a strip roughly a tenth the area of a gauge, using length from a common baseline instead of angle — and several of them stack into a list you can scan in one pass. The catch is that almost nobody recognises it. The three encodings in one bar, designing the KPI strip, why the bands must stay grey, and how to assemble one in the three libraries that have no bullet type.

### How to Make a Word Cloud in Figma (and What It Cannot Tell You)
URL: https://systergon.com/blog/figma-charts-word-cloud
Published: 2026-08-27

A word cloud is the most popular chart with people who commission charts and the least popular with people who read them, and both camps are right: word length confounds size, area scales faster than font size, and position is packing rather than data. Where that does not disqualify it, how the preparation — stop words, stemming, phrases — is really the chart, four alternatives that answer the same question better, and why shaped clouds are typography rather than data.

### How to Make a Radial Bar Chart in Figma (a Bar Chart, Bent)
URL: https://systergon.com/blog/figma-charts-radial-bar-chart
Published: 2026-08-27

A radial bar chart is a bar chart bent into a circle, and bending it breaks the property that made bars accurate: an arc on an outer ring is longer than the same percentage on an inner one. That does not make it useless — it makes it a progress chart rather than a comparison chart. The activity-ring pattern that gets it right, designing the KPI tile, and four substitutions by question.

### How to Make a Circle Packing Chart in Figma (Nesting You Can See)
URL: https://systergon.com/blog/figma-charts-circle-packing
Published: 2026-08-27

Circle packing shows a hierarchy as circles inside circles — the clearest nesting of any chart here, because containment is literal and needs no convention. It pays for that by deliberately wasting space, since circles cannot tile. When the structure is worth the pixels, the value ratio to check before building, and the near-identical charts hiding under the Scatter chip.

### How to Make a Chord Diagram in Figma (Relationships That Go Both Ways)
URL: https://systergon.com/blog/figma-charts-chord-diagram
Published: 2026-08-27

A chord diagram is a matrix drawn as a circle: entities on the circumference, relationships as ribbons across the middle, and the width of a ribbon at each end is the flow measured from that end. That taper — the asymmetry — is the most information-dense feature in the chart, and no other type here can show it. Ordering the circle, handling the diagonal, and why the matrix is worth drawing first.

### How to Make a Waffle Chart in Figma (Counting Beats Estimating)
URL: https://systergon.com/blog/figma-charts-waffle-chart
Published: 2026-08-27

A waffle chart is a grid of a hundred squares with some filled in, and it shows a proportion the way nobody else does: by being countable. Small percentages stay visible, the whole is explicit, and it needs no chart literacy at all — which is why risk communication reaches for it. The grid choices, the pictogram variant, and why building one by hand is often the right call.

### How to Make a Word Tree in Figma (Context, Not Frequency)
URL: https://systergon.com/blog/figma-charts-word-tree
Published: 2026-08-27

A word tree takes one word and shows every way it continues in a body of text, branching outward with each branch sized by how often that path occurs. Where a word cloud tells you which words appear, a tree tells you how they are used — “cancel” splits into cancel my subscription, cancel the order and cancel anytime, three different problems. Choosing the root, the workflow that produces findings, and turning an exploration artefact into a figure.

### How to Make a Venn Diagram in Figma (When the Areas Have to Be Right)
URL: https://systergon.com/blog/figma-charts-venn-diagram
Published: 2026-08-27

A whiteboard Venn diagram has no constraint; a data Venn diagram has a hard one — the areas have to be proportional, and for many sets of numbers no arrangement of circles exists that makes them right. The three-set ceiling, when an Euler diagram is the honest alternative, what to do when the overlap is undrawable, and the two libraries that will draw one.

### How to Make a Pareto Chart in Figma (Finding the Vital Few)
URL: https://systergon.com/blog/figma-charts-pareto-chart
Published: 2026-08-27

A Pareto chart turns “we have forty types of defect” into “six of them are the problem”. Sorted bars carry the counts, a cumulative line climbs across them, and where the line crosses 80% you have your short list. The dual axis that must be pinned to 100%, the sorting rule nobody may break, and the categories that ruin it.

### How to Make an Icicle Chart in Figma (A Sunburst, Unrolled)
URL: https://systergon.com/blog/figma-charts-icicle-chart
Published: 2026-08-27

An icicle chart is a sunburst laid flat: same hierarchy, same proportions, rectangles along a straight axis instead of rings around a centre. That one change fixes the sunburst’s two limits — depth stops being expensive and labels finally get a straight line to sit on. Orientation, depth budgets, and when the flame variant is worth it.

### How to Make a Marimekko Chart in Figma (Two Variables, One Rectangle)
URL: https://systergon.com/blog/figma-charts-marimekko-chart
Published: 2026-08-27

A Marimekko puts market size and market share in one picture: column width is the size of each category, segment height is the composition inside it, and every block’s area is the product. It is the standard chart of strategy decks — and the one where area comparison quietly fails. Where it earns its keep, and where a pair of simpler charts wins.

### How to Make a Parallel Coordinates Plot in Figma (The Chart a Radar Should Have Been)
URL: https://systergon.com/blog/figma-charts-parallel-coordinates
Published: 2026-08-27

Give every measure its own vertical axis, draw each observation as a line threading across them, and you can compare entities on eight dimensions without the area distortion of a radar chart. Axis order is the whole design, crossing lines mean something specific, and brushing turns it from a picture into an instrument.

### How to Make a Swarm Plot in Figma (Every Point, Nothing Hidden)
URL: https://systergon.com/blog/figma-charts-swarm-plot
Published: 2026-08-27

A swarm plot draws every observation and nudges points sideways just enough that none overlap — the honest middle ground between a histogram that bins your data away and a box plot that reduces it to five numbers. Where the sideways offset means nothing and readers assume it does, and the sample sizes at which it works.

### How to Make a Tree Diagram in Figma (Structure Without Quantity)
URL: https://systergon.com/blog/figma-charts-tree-diagram
Published: 2026-08-27

A tree is the one hierarchy chart that encodes no quantity at all — it shows what contains what, and nothing else. That is usually the reason to pick it: plenty of hierarchies have no numbers, and forcing one in distorts them. Layout directions, the depth and breadth limits, and the radial variant that trades labels for compactness.

### How to Make a Voronoi Diagram in Figma (A Chart of Nearness)
URL: https://systergon.com/blog/figma-charts-voronoi-diagram
Published: 2026-08-27

A Voronoi diagram divides space so that every cell holds everywhere closer to its point than to any other. It is not a chart of values — it is a chart of proximity, answering a question nothing else in this series can: which thing is nearest, and how much territory does it own? Catchment areas, the straight-line assumption, and the edge problem.

### How to Make a Graph Chart in Figma (Fourteen Node-Link Charts, One Chip)
URL: https://systergon.com/blog/figma-charts-graph-chart
Published: 2026-08-27

The Graph category is the largest single-library collection in the plugin: fourteen node-and-edge charts, all ECharts, sitting under a chip most people never open. Four layouts and only one of them is random, why force-directed is the default and rarely the answer, what edges can encode, and the density at which every graph becomes a hairball.

### How to Make a Theme River in Figma (A Streamgraph With a Time Axis)
URL: https://systergon.com/blog/figma-charts-theme-river
Published: 2026-08-27

A theme river is ECharts’ streamgraph — bands flowing left to right around a floating centre line — with two things the generic version often lacks: a real time axis and a proper legend. Band order is a design decision most people never touch, labelling is the whole battle, and the moving baseline makes exact values unreadable by design.

### How to Make an Effect Scatter in Figma (Animation as an Attention Budget)
URL: https://systergon.com/blog/figma-charts-effect-scatter
Published: 2026-08-27

An effect scatter is a scatter plot whose markers pulse — same data, same encoding, one animated decoration. Which makes it the sharpest question in this series: is the animation doing a job, or is it just moving? The two-layer pattern it is built for, what happens when the movement stops, and the static alternatives that usually win.

### How to Make a Pictorial Bar Chart in Figma (Repeat, Clip or Stretch)
URL: https://systergon.com/blog/figma-charts-pictorial-bar
Published: 2026-08-27

A pictorial bar replaces the rectangle with a picture. Done properly it tells you what the chart is about before you read the axis; done carelessly it is the classic way charts lie. Only two of the three ways to size an icon are honest, the isotype tradition settled which one, and six ECharts options do all the work.

### How to Make a Custom Chart in Figma (The Escape Hatch)
URL: https://systergon.com/blog/figma-charts-custom-charts
Published: 2026-08-27

Every other chart type in the plugin is a named thing with rules; a custom series is a function that draws whatever you tell it to, positioned by the chart’s own coordinate system. It is where a chart library stops being a set of charts and becomes a drawing API with axes attached — and where the safety rails come off.

### How to Make a Scatter Plot in Figma (and What the Points Actually Prove)
URL: https://systergon.com/blog/figma-charts-scatter-plot
Published: 2026-08-26

Every other chart summarises. A scatter plot summarises nothing — it puts a mark at every observation and lets the reader do the seeing, which is why it shows clusters and outliers that an average destroys. What it is for, the three times it is the wrong tool, why a scatter point is a pair and what that means for editing it in Figma, which of the five libraries fits a real regression and which one only draws a line that looks like one, and the ways a cloud of points misleads the people who trust it.

### How to Make a Heatmap in Figma (and Why the Row Order Is the Design)
URL: https://systergon.com/blog/figma-charts-heatmap
Published: 2026-08-26

A heatmap trades the most accurate encoding for the most scalable one: colour is the worst channel human vision reads, and that is the price of showing four hundred cells at once. Which makes it worth drawing only when there is a pattern to see — and whether there is one depends almost entirely on how you order the rows. What it is for, the three times it is the wrong tool, the grid editor ECharts gets and the table the others use, why one library here cannot draw a matrix heatmap at all, and how to pick a colour scale that is not lying.

### How to Make a Gauge Chart in Figma (and When One Is Justified)
URL: https://systergon.com/blog/figma-charts-gauge-chart
Published: 2026-08-26

A gauge spends an enormous amount of a design on a single number, which is why the case against dashboard dials has been made for twenty years and is mostly right. Mostly: a gauge is not really a chart of a number, it is a chart of a threshold, and when the limits are real it earns its space. What it encodes, the three times it is the wrong tool, why the range you choose is doing more talking than the value, what each library gives you — two of the five have no gauge at all — and how to keep the zones honest.

### How to Make a Funnel Chart in Figma (and What the Shape Promises)
URL: https://systergon.com/blog/figma-charts-funnel-chart
Published: 2026-08-26

A funnel is a bar chart that has been given a story. The taper carries a claim no bar chart makes — that each stage is drawn from the one above it, and that the narrowing is loss. When that is true it is one of the most immediately legible charts there is; when it is false the chart is fluent and wrong. What it encodes, the three times it is the wrong tool, the sorting option that will silently reorder your stages, which libraries draw one (and where ApexCharts hides its), and why the percentages matter more than the widths.

### How to Make a Treemap in Figma (Structure and Scale, Not Precision)
URL: https://systergon.com/blog/figma-charts-treemap
Published: 2026-08-26

A treemap answers a question no flat chart can: how does this whole divide, and how do its parts divide? It fills a rectangle with nested rectangles whose areas are proportional to their values — a hundred items and their groupings in the space a bar chart spends on twelve. The price is precision, because area is a weak channel and differing rectangle shapes make it weaker. What the rectangles claim, the three things your data must be, how the tiling works, and why negatives cannot appear at all.

### How to Make a Radar Chart in Figma (and Whether the Circle Is Real)
URL: https://systergon.com/blog/figma-charts-radar-chart
Published: 2026-08-26

A radar chart turns a row of numbers into a shape you can recognise — and the shape depends on the order of the spokes, which is usually arbitrary. Reorder the axes and the same data produces a different silhouette. When the circle is real (compass direction, hours, months) it is the correct coordinate system; when you invented it, the silhouette is decoration. The two honest uses, the fix for almost every bad radar, and what scorecards can and cannot support.

### How to Make a Sankey Diagram in Figma (and Make the Numbers Reconcile)
URL: https://systergon.com/blog/figma-charts-sankey-diagram
Published: 2026-08-26

A Sankey answers a question no other chart can: where did it all go? Width is quantity, direction is progression, and the whole form rests on one promise — what enters a node leaves it. When that holds it is the most persuasive diagram you can draw; when it does not, it still looks like a system. What the ribbons claim, the three times a Sankey is wrong, why loops cannot be drawn, the node-link data shape and its editor, and how to give loss a name.

### How to Make a Candlestick Chart in Figma (and Which Candles Are Not Prices)
URL: https://systergon.com/blog/figma-charts-candlestick-chart
Published: 2026-08-26

A candlestick carries four numbers per period where a line carries one, which makes it the densest standard chart in common use. It also has a family problem: several members look like price charts and are not — Heikin Ashi bodies are averages, and Renko and point-and-figure charts have no time axis at all. What one candle says, which variants are raw prices, why the red-green convention inverts in East Asia, and using the type outside finance.

### How to Make a Histogram in Figma (and Choose the Bin Width)
URL: https://systergon.com/blog/figma-charts-histogram
Published: 2026-08-26

A histogram looks like a bar chart and is a different thing: the axis is a number line, the bars touch, and the height is a count. It also has a parameter no other chart has — the bin width — and changing it turns the same data from smooth to spiky, one peak into three. What separates it from a bar chart, how to choose bins honestly, the four distribution shapes worth recognising on sight, and why the average is usually the wrong summary.

### How to Make a Waterfall Chart in Figma (and Make It Reconcile)
URL: https://systergon.com/blog/figma-charts-waterfall-chart
Published: 2026-08-26

A waterfall explains the difference between two totals as a sequence of named contributions — the profit bridge, the headcount reconciliation, the growth accounting decomposition. Mechanically it is a bar chart with a moving baseline, which is exactly where it goes wrong: the bars float, so none of them share a baseline and the reader has to be told which columns are totals. How to order the steps, how to build one in the four libraries that have no waterfall type, and why the arithmetic has to be checked first.

### How to Make a Combo Chart in Figma (and the One Rule for the Second Axis)
URL: https://systergon.com/blog/figma-charts-combo-chart
Published: 2026-08-26

A combo chart puts bars and a line in one frame because two measures can share an x axis while playing completely different roles — a quantity and a rate, an actual and a target. It is also the chart most often used to smuggle in a second axis, and a second axis can make any two series look related. The pairings that work, the rule that keeps the second axis honest, the Pareto chart as the model combo, and why four of the five libraries have no Combo category yet all but one can draw one.

### How to Make a Box Plot in Figma (and What the Five Numbers Hide)
URL: https://systergon.com/blog/figma-charts-box-plot
Published: 2026-08-26

A box plot compresses a whole distribution into five numbers, so eight distributions fit where one histogram would go. It will tell you which group runs slower, which is more variable and which has outliers — and it will hide, completely and silently, the fact that one of your groups contains two populations. What each mark means, what the summary cannot say, the relatives that fix it, and using one in a performance review.

### How to Make a Bar Chart in Figma (and Get It Right)
URL: https://systergon.com/blog/figma-charts-bar-chart
Published: 2026-08-22

The bar chart is the one to reach for when you are not sure — because length from a common baseline is the thing human vision judges most accurately. What it is actually for, the three situations where it is the wrong tool, how to build one against your real numbers in Figma, what each of the five charting libraries gives you, and the handful of ways a bar chart quietly misleads the person reading it — starting with the truncated axis, which has no defensible exception.

### How to Make a Line Chart in Figma (Without Lying)
URL: https://systergon.com/blog/figma-charts-line-chart
Published: 2026-08-22

A bar chart asks you to compare lengths; a line chart asks you to read a shape — and that changes which conventions you may break. Lines may start above zero, because slope survives a truncated axis where length does not. But a line is confident: it draws a continuous path whether or not your data is continuous, invents values when smoothed, and turns one unparseable cell into a plunge to zero that looks like a real catastrophe. The three decisions that define a line chart, and the ways it misleads.

### How to Make a Pie Chart in Figma (and When Not To)
URL: https://systergon.com/blog/figma-charts-pie-chart
Published: 2026-08-22

Most of the criticism aimed at pie charts is correct: they encode share as angle, and people read angle badly. But a pie does one thing no bar chart matches — it shows that the parts make a whole. The question is never whether pie charts are bad, but whether you need the completeness more than the precision. When a pie earns its place, the five-slice ceiling, pie versus donut, why 3D pies change the numbers, and what to draw instead.

### How to Make an Area Chart in Figma (and What the Fill Claims)
URL: https://systergon.com/blog/figma-charts-area-chart
Published: 2026-08-22

An area chart is a line chart with the space beneath it filled in — which sounds like a styling decision and is not. A line says “this is the rate”; a filled area says “this is the quantity”, and quantity implies the values are things you could add up. The test for whether the fill is honest, why area charts must start at zero when line charts need not, why only the bottom band of a stack is readable, streamgraphs, range areas for uncertainty, and the sparkline case.

### How to Make a Donut Chart in Figma (the Hole Is the Point)
URL: https://systergon.com/blog/figma-charts-donut-chart
Published: 2026-08-22

A donut is a pie with a hole, and almost everything written about it treats the hole as a style preference. It is not — it is somewhere to put the total, and a chart that answers “how much altogether?” and “how does it divide?” in one object is doing something a pie cannot. Where each library files its donuts, how big the hole should be, why concentric rings are unreadable, the failure mode unique to donuts, and designing one for a KPI tile.

### Your Chart, Your Design System
URL: https://systergon.com/blog/figma-charts-design-system-colors-typography-tokens
Published: 2026-08-18

Your design system covers the button, the input, the card and the toast. Then there is the chart — a picture somebody drew, in colours from a colour picker, in whatever font was on the artboard that day. How to pull Figma colour variables and text styles into charts, why the plugin picks the variable collection it does (and how to name yours so it wins), the precedence rule behind “why did my colours change?”, why a role-based design system rarely makes a usable eight-series palette, and how to push the resolved values back out as CSS, SCSS, Tailwind or W3C design tokens.

### From Figma to Code
URL: https://systergon.com/blog/figma-charts-export-react-vue-svelte-angular-design-tokens
Published: 2026-08-18

The usual handoff: the designer exports a PNG, the engineer squints at it and rebuilds the chart from scratch, and two weeks later somebody notices they disagree. That happens because the artefact crossing the boundary was a picture, and a picture is a lossy encoding of a chart. Figma Charts exports eight things instead — and three of them are the chart itself. Code for five frameworks at pinned versions, the library’s own config object, interactive or static embeds, W3C design tokens, plus the accessibility exports nobody knows are there.

### Animated Charts as Native Figma Prototypes
URL: https://systergon.com/blog/figma-charts-animated-charts-native-figma-prototypes
Published: 2026-08-18

Every animated chart in a design review is a video — untouchable, unclickable, impossible to hand over as anything more useful than “like that, but ours”. Figma Charts produces a component set whose variants are wired with Figma’s own prototype interactions instead. Covers the snapshot model, why Smart Animate works on bars and refuses on lines (and the layer-name mechanism behind both), the eleven easings and which ones quietly misreport your data, per-step triggers, and what you actually get on the canvas.

### 588 Charts, Five Libraries — and How to Choose One
URL: https://systergon.com/blog/figma-charts-choosing-the-right-chart-library
Published: 2026-08-17

Every comparison of JavaScript charting libraries was written for engineers — bundle size, tree-shaking, render performance on ten thousand points. None of it is your problem. Figma Charts ships five real libraries: Google Charts, Highcharts, D3-based Nivo, ApexCharts and Apache ECharts, 588 ready-made examples across 45 chart types. What each is genuinely best at, the twenty-one chart types you can only get from one of them, which licence will stop you shipping, why Nivo exports to React and nothing else — and the one question that settles the choice faster than any feature list.

### Real Charts in Figma From Your Real Data
URL: https://systergon.com/blog/figma-charts-live-data-from-google-sheets-and-apis
Published: 2026-08-17

The dashboard looks superb in the mockup — six categories, round numbers, one-word labels. Then it meets the real data: forty-one categories, one called “Enterprise (EMEA, excl. UK)”, a value of −3, and an outlier eleven times the median. Connect a Google Sheet, a REST API, an Airtable base or a Supabase table to a chart in Figma, and design against the numbers you will actually ship. Covers all eight sources and which four are genuinely live, the column-detection rules that decide your mapping, where your API key is stored and who can read it, why refresh is manual, and the chart types that refuse a linked source.

### Export Your Figma Motion as Video or Lottie
URL: https://systergon.com/blog/motion-path-figma-video-lottie-export
Published: 2026-08-04

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
URL: https://systergon.com/blog/motion-path-figma-pan-zoom-rotate-camera-move
Published: 2026-08-01

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.
URL: https://systergon.com/blog/sound-for-figma-motion-animations
Published: 2026-07-31

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)
URL: https://systergon.com/blog/figma-prototype-sound-loudness-lufs
Published: 2026-07-31

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
URL: https://systergon.com/blog/sound-kit-for-figma-sound-design-system
Published: 2026-07-31

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)
URL: https://systergon.com/blog/motion-path-figma-start-point-object-preview
Published: 2026-07-29

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
URL: https://systergon.com/blog/motion-path-figma-preview-fps-theater-zoom
Published: 2026-07-29

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
URL: https://systergon.com/blog/motion-path-figma-bring-objects-to-life
Published: 2026-07-26

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
URL: https://systergon.com/blog/motion-path-figma-ui-redesign-case-study
Published: 2026-07-26

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
URL: https://systergon.com/blog/Motion-Path-for-Figma-figma-plugin
Published: 2026-07-11

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

- About: https://systergon.com/about
- Products: https://systergon.com/products
- Support: https://systergon.com/support
- Contact: https://systergon.com/contact
- Privacy Policy: https://systergon.com/privacy
- Terms of Service: https://systergon.com/terms
- Service Level Agreement: https://systergon.com/sla