# Blog

> Guides, deep dives and release notes from Systergon — the makers of Figma plugins for motion, charts, waves and more.

## Posts

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

Page: https://systergon.com/blog