# How to Make an Effect Scatter in Figma (Animation as an Attention Budget)
_August 27, 2026 · 11 min read · by Systergon_
> 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.
Tags: Figma, Charts, Effect Scatter, Animation, Plugin
URL: https://systergon.com/blog/figma-charts-effect-scatter
---
[Install Figma Charts — it’s free to try →](https://www.figma.com/community/plugin/1345221583582136577/figma-charts) [See the effect scatter gallery →](https://systergon.com/figma-charts/chart-types/effectscatter)

An effect scatter is a [scatter plot](https://systergon.com/blog/figma-charts-scatter-plot) whose markers pulse. ECharts gives the points a rippling halo that expands and fades on a loop, and that is the entire difference — same data, same encoding, one animated decoration. Which makes it the chart type in this series with the sharpest single question: **is the animation doing a job, or is it just moving?**

![An effect scatter chart drawn by ECharts inside the Figma Charts plugin](https://systergon.com/blog/figma-charts-effect-scatter/images/effectscatter-basic.svg)

_Real plugin output: an ECharts effect scatter captured from the editor — and captured statically, which is exactly the situation this page is about._

There is a real answer, and it is narrower than the chart’s use suggests: a ripple is an attention device, so it earns its place when a small number of points must be noticed among many that must not. This page covers that case, the cost of the animation, and what happens to a pulsing chart the moment it becomes a static asset.

## First — get the plugin

Everything below happens inside **Figma Charts**, a Figma plugin. It runs the real JavaScript charting libraries — Google Charts, Highcharts, D3-based Nivo, ApexCharts and Apache ECharts — inside the plugin window, so the ripple you see in the editor is the real animation rather than a mock-up of one.

[Install Figma Charts from the Figma Community →](https://www.figma.com/community/plugin/1345221583582136577/figma-charts)

Press **⌘/** (**Ctrl /** on Windows), type _Figma Charts_, hit Enter, and pick **Effect Scatter** from the category filter. One example, in ECharts — the only library here with the type.

## Animation is an attention budget

Movement is the strongest signal available in a visual interface. Human vision is built to notice it, which means an animated mark will be seen before anything static on the same screen — and that property is spent, not free.

Three consequences follow, and they define when this chart works:

- **Animate the few, not the many.** If every point pulses, nothing is emphasised and the chart is simply busy. The effect works when a handful of marks ripple among many that do not.
- **The animation should mean something.** Live, alerting, selected, new since you last looked. A ripple that means “this is a data point” is decoration competing with the data.
- **It costs sustained attention.** Continuous motion is tiring to sit beside and genuinely problematic for some readers — which is why an operations wall display and a report are different design problems.

![A plain scatter plot drawn by Highcharts](https://systergon.com/blog/figma-charts-effect-scatter/images/effectscatter-plain.svg)

_**The same encoding without the ripple** — and for most purposes, the better chart. If the animated version is more legible than this one, the animation is carrying a variable; if it is merely livelier, it is spending attention it does not need._

## What happens when it stops moving

This matters more here than for any other chart type, because the plugin’s output is static: **inserting as SVG freezes the animation at a single frame**, and inserting as PNG does the same.

What that leaves is the ripple caught mid-expansion — a halo around the marker, at whatever radius and opacity the loop happened to be at. Three practical implications:

**The emphasis becomes a static halo**, which still works as emphasis. A frozen ripple reads as a highlighted point, so the design intent survives the freeze even though the mechanism does not.

**The frame is arbitrary.** Two inserts of the same chart catch the animation at different points, so the halos differ in size. If several charts are going into one document, insert them and then normalise the halos by hand.

**If the animation was the only encoding, it is now lost.** Where the ripple meant “live” or “alerting”, a static export needs a different mark for that — colour, an outline, a label — because a halo alone does not say which.

The general rule for design work: **design the static version first and treat the animation as an enhancement**. A chart that only works while moving cannot be reviewed in a document, printed, or pasted into a ticket.

## When to use it

**Use it when** the chart is live on screen, a small subset of points needs to be noticed, and the reason for noticing them is genuine — an alert firing, a new event arriving, the currently-selected item.

Three cases where a plain scatter is better:

**1. Anything static.** Reports, decks, specifications, printed material. The animation is the whole feature and none of it survives.

**2. Dense scatter plots.** Ripples overlap each other and the surrounding points, which makes a crowded chart worse rather than clearer. This effect needs sparse data around it.

**3. When everything is important.** If every point deserves attention, none of them can have it, and the animation is noise applied uniformly.

A fourth: **when readers may be sensitive to motion.** Continuous animation is an accessibility consideration with real weight, and an interface should honour a reduced-motion preference by falling back to a static emphasis.

## Better ways to say “look here”

Emphasis is the job this chart is doing, and animation is one of several ways to do it — usually not the first one to reach for. Four alternatives, roughly in order of how well they survive contact with a real document.

**Colour and everything else grey.** The strongest static emphasis available: one saturated mark among neutral ones is found instantly, prints, screenshots and needs no explanation.

**Size.** A larger marker reads as important — with the caveat that in a scatter plot size often already encodes a variable, in which case this channel is taken.

**An annotation.** A label with a leader line does not merely emphasise, it explains — and the explanation is usually what the reader wanted from the emphasis in the first place.

**A halo or outline.** Which is the frozen effect scatter, drawn deliberately: a static ring around the marks that matter, at a size you chose rather than one the animation loop happened to reach.

Animation earns its place over all four only when the emphasis needs to change while the reader is watching — a live dashboard where the alerting point is not the same one it was a minute ago. That is a real requirement and a narrow one.

## Building one, step by step

Six screens, start to finish, captured from the plugin.

![The Figma Charts gallery filtered to the Effect Scatter category](https://systergon.com/blog/figma-charts-effect-scatter/images/step-gallery.webp)

_**1. Filter to Effect Scatter.** One ECharts example. Everything else about the chart is a scatter plot, so the Scatter chip is where the variants live._

![The Figma Charts editor with an effect scatter chart in the preview](https://systergon.com/blog/figma-charts-effect-scatter/images/step-editor.webp)

_**2. The editor.** Live preview above, tabs below — and the preview genuinely animates, which is the only place in this workflow where you will see the effect working._

![The Data tab showing the coordinate pairs behind an effect scatter chart](https://systergon.com/blog/figma-charts-effect-scatter/images/step-data.webp)

_**3. Coordinate pairs.** Like a scatter plot, the points are `[x, y]` pairs, and the plugin edits ECharts scatter data as JSON for exactly that reason — a two-column table cannot hold a pair without deciding one of them is a label._

![The Configuration tab showing effect scatter option groups](https://systergon.com/blog/figma-charts-effect-scatter/images/step-config.webp)

_**4. The ripple.** Period, scale, brush type and whether the effect applies to all points or only to emphasised ones. That last setting is the one that decides whether this chart is emphasis or decoration._

![The Export tab showing code export formats](https://systergon.com/blog/figma-charts-effect-scatter/images/step-export.webp)

_**5. Export.** The code export carries the effect settings, so a developer gets the animation — which is the only handoff route where the motion survives at all._

![The + SVG and + PNG insert buttons](https://systergon.com/blog/figma-charts-effect-scatter/images/step-insert.webp)

_**6. Insert.** Both formats freeze the animation. SVG at least gives you the halo as an editable shape, so it can be normalised or replaced with a deliberate emphasis treatment._

## The data shape it needs

Identical to a scatter plot: `[x, y]` coordinate pairs, optionally with a third value for size. The plugin edits ECharts scatter and effect-scatter data as **JSON** for the same reason — a two-column table cannot represent a coordinate pair without treating one column as a label, which is the round-trip problem covered in the [scatter post](https://systergon.com/blog/figma-charts-scatter-plot).

The useful pattern is **two series rather than one**: an ordinary scatter for the bulk of the points and an effect scatter for the few that should pulse. That keeps the animation meaningful, keeps the density manageable, and degrades correctly — when the animation freezes, the emphasised points still have a halo and the rest do not.

## Library by library

The **Effect Scatter** category is **ECharts only — one example**, and no other library here has an equivalent built-in.

- **ECharts — the effectScatter series**, with configurable ripple period, scale and brush type, and the option to apply the effect to all points or only to emphasised ones. It is also used on maps, where pulsing markers indicate live locations.
- **Everyone else — do it in the interface, not the chart.** A CSS or SVG animation on top of a plain scatter achieves the same thing with more control, and it can respect a reduced-motion preference, which a chart-level animation setting generally cannot.

That second point is worth weighing even when ECharts is available: **animation is usually better handled by the application than by the chart library**, because the application knows why a point is important and when to stop.

As always: **design in whichever library your engineers already use**, because the export then matches production exactly. [Choosing the right chart library](https://systergon.com/blog/figma-charts-choosing-the-right-chart-library) covers the trade-offs.

## Styling it well

**Slow the ripple down.** Fast pulses read as urgent and become irritating within seconds. A slow, low-contrast expansion signals “live” without demanding constant attention.

**Keep the halo subordinate to the marker.** The point is the data; the ripple is a highlight. If the halo is more visible than the mark, the emphasis has swallowed the thing it was emphasising.

**Use it on one series only.** Two animated series compete, and the reader has no way to rank them.

**Pair it with a static cue.** Colour or an outline as well as motion means the emphasis survives a screenshot, a printout and a reduced-motion setting.

**Give the ripple room.** The halo extends well beyond the marker, so points near the axis or the frame edge will have theirs clipped — which looks like a rendering error rather than a boundary.

For type and colour, bind them to your design system rather than picking by hand — covered in [Your chart, your design system](https://systergon.com/blog/figma-charts-design-system-colors-typography-tokens).

## Designing with motion, briefly

This is the only chart in the series whose defining feature is animation, so it is worth stating the general rules once.

**Motion should mean a state, not exist as a texture.** Something is live, alerting, updating or selected. Continuous animation that means “this is a chart” is a texture, and it will be tuned out within a minute or found irritating for an hour.

**Slower is more credible.** Fast pulsing reads as alarm; a slow expansion reads as a heartbeat. If the state is normal rather than urgent, the animation should say so.

**Stop when the reason stops.** An alert that resolves should stop pulsing. Animation that never ends stops carrying information almost immediately.

**Everything must work without it.** Reduced-motion preferences, screenshots, printed pages and this plugin’s own export all remove the movement. If the static version is missing something, the animation was carrying data alone — which is the one thing it should never do.

## Two layers, and only one of them moves

The pattern this chart is built for is not one animated series but two overlaid ones: an ordinary scatter carrying every point, and an effect scatter on top carrying only the handful that matter. The base layer is small, muted and complete; the top layer is a few points with the ripple on them.

That split is what makes the animation legible. Motion is a comparison — something moves relative to something that does not — so a chart where everything ripples has no contrast and no signal. Two layers give you the contrast for free, and they also give you a fallback: strip the animation and you still have a scatter with a few emphasised points, which is what the exported SVG will be anyway.

The practical consequence for the data table is that you enter the same points twice under different series names, or split them into “all” and “flagged” series. It looks redundant in the table and it is exactly right in the chart.

## Reading it well — and the ways it misleads

**Motion reads as importance, whatever you meant.** If the ripple is decorative, readers will still infer that those points matter more.

**The halo is not a value.** Its size is an animation setting, and readers accustomed to bubble charts will read a bigger halo as a bigger number. If size encodes something, that is the marker’s job, not the ripple’s.

**Frozen frames differ.** A static export catches the loop at an arbitrary point, so halo sizes vary between exports of the same chart — which looks like data and is not.

**Animation hides density.** Overlapping ripples merge into a shimmer that obscures how many points are actually there.

**And it dates quickly.** Pulsing markers read as a particular era of dashboard design; that is a legitimate aesthetic choice and worth making knowingly.

## Where you will actually meet one

Effect scatter is used far more on maps than on ordinary charts, and it is worth knowing why the pairing became conventional.

On a map, points are usually sparse, the background is busy, and the interesting fact is often _when_ something happened rather than where — an event firing, a station reporting, a vehicle moving. A ripple solves all three at once: it is visible against a detailed background, it draws the eye without changing the marker’s position, and its rhythm reads as liveness.

Two consequences for design work. First, **if you are designing a live map, this is a legitimate default**, and it is where the ECharts implementation is most at home — its map examples use it exactly this way. Second, **the map case does not transfer automatically to a plain scatter**, where the background is empty, the points are dense and nothing is arriving in real time. The technique borrowed from map dashboards is the commonest way an ordinary scatter ends up animated for no reason.

And a note specific to this plugin: map-based examples need geographic data that is not bundled, so those charts show a placeholder rather than rendering — which is covered in the [map post](https://systergon.com/blog/figma-charts-geo-maps). The effect-scatter example in this category is the cartesian one, and it works.

## Accessibility

**Respect reduced motion.** Continuous animation can cause real difficulty for readers with vestibular sensitivities. In a product, the chart should fall back to a static emphasis when the system preference asks for it — and since the chart library will not do that for you, it is an application-level decision.

**Never encode meaning in motion alone.** Anything the ripple signifies must also be available as colour, shape or text, or it is invisible to anyone who cannot perceive the movement and to every static copy of the chart.

**Keep contrast on the marker itself**, since the halo is translucent by design and contributes little.

**Give it a text equivalent.** The Export tab’s **Copy Alt Text**, **Copy Data Table** and **Set Node Desc** produce a description, a table of the numbers and a description written onto the Figma node — and the description should say which points are emphasised and why, since that is the only part of the chart the ripple was carrying.

## Common questions

### What is an effect scatter chart?

A scatter plot whose markers carry an animated ripple — an expanding, fading halo on a loop. The data encoding is identical to a plain scatter; the animation is an attention device.

### When is the animation justified?

When a few points among many need to be noticed and there is a real reason — alerting, live, newly arrived, selected. Animating every point emphasises nothing and makes the chart harder to sit beside.

### What happens when I insert it into Figma?

The animation freezes. Both SVG and PNG capture a single frame, so you get a static halo at whatever radius the loop had reached — which still reads as emphasis, but the size is arbitrary and differs between exports.

### Which libraries support it?

**ECharts only**, via its effectScatter series. Elsewhere, animate a plain scatter at the application level with CSS or SVG — which is usually the better approach anyway, because the application can honour a reduced-motion preference.

### Does the ripple size mean anything?

No — it is an animation setting. Readers used to bubble charts will nonetheless read a larger halo as a larger value, which is a good reason to keep the ripple subtle and let the marker carry any size encoding.

### Can I animate only some points?

Yes, and it is the pattern worth using: a plain scatter series for the bulk of the data and an effect scatter for the few that should pulse. That keeps the emphasis meaningful and degrades correctly when the animation freezes.

### Is it accessible?

Not on its own. Continuous motion is a genuine problem for some readers, so the meaning must also be carried by colour, shape or a label, and a product should fall back to static emphasis when reduced motion is requested.

### Where is this chart actually used?

On maps far more than on ordinary charts — sparse points, a busy background, and events arriving in real time, which is the case a ripple suits exactly. Borrowing it for a dense cartesian scatter with static data is the commonest way a chart ends up animated for no reason.

### Does the chart stay editable in Figma?

Insert as **SVG** and the frozen halo arrives as an editable shape — which is useful, because normalising the halos across several exports or replacing them with a deliberate emphasis treatment is then a canvas operation. Insert as **PNG** for a flat image at twice the pixel density.

## Where to start

Open the plugin, filter to Effect Scatter, and watch it in the editor — then insert it and look at the static result. The gap between those two is the honest measure of what the animation was contributing, and it is the fastest way to decide whether this chart belongs in your design or whether a plain scatter with one highlighted point does the job.

[Install Figma Charts — it’s free to try →](https://www.figma.com/community/plugin/1345221583582136577/figma-charts) [Browse all 45 chart types →](https://systergon.com/figma-charts/chart-types)