# How do I animate a chart as a Figma prototype?

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

## Before you start

- A chart open in the editor.

> **Note:** Smart animate only works where the shapes can morph. Bars, columns, scatter points, bubbles, gauges, treemaps, funnels, radial bars and heatmap cells are all simple shapes that interpolate cleanly. Lines, areas, splines, pies, donuts, radars, Sankeys and chords are paths whose point counts differ between states, so they cannot morph — the plugin recommends Dissolve for those, and marks its recommendation (Recommended) in the transition list.

> **Tip:** Because the result is a native component set, it behaves like anything else you build by hand: drop it into a larger prototype as an instance, rewire the flow, or adjust the timing in Figma afterwards.

> **Note:** Snapshots capture the whole chart, so changes between them should be deliberate. Two snapshots that differ in several ways at once produce a muddled transition.

> **Pro feature:** The Animation tab needs a paid plan.

## Steps

1. Open the Animation tab and press Enable to turn animation mode on. Capture a snapshot of the chart as it looks now.
2. Change something — the data, a colour, a chart setting — and capture another snapshot. You need at least two; a single snapshot has nothing to animate between. You can have up to 20.
3. Set the transition. Smart animate interpolates matching shapes, which is what makes bars grow and points travel. Dissolve cross-fades instead, and is the right answer more often than you would think — see the note below. There are eight in all, including Push and the Slide and Move pairs.
4. Set the duration (100–3000ms) and the easing — the eleven Figma offers, from Linear and the Ease family through the overshooting Back curves to the Gentle, Quick, Bouncy and Slow presets. The default is Smart animate, 800ms, Ease out.
5. Choose the trigger for each step. After delay is the default at 800ms, which makes the animation play by itself. On click, While hovering, While pressing, On drag and the four mouse triggers are all available if you want the reader to drive it.
6. Insert with + Insert Animated. Each snapshot becomes a component, and the plugin combines them into a component set named after your chart with [Animated] after it, wiring each variant to the next. Press Present to play it.

_Topics: animation, prototype, motion_

---

Install Figma Charts: https://www.figma.com/community/plugin/1345221583582136577/figma-charts

More Figma Charts help: https://systergon.com/figma-charts/help