Figma Plugin

Insert publication-ready charts straight into your Figma designs – the same charts you can render as PNG, SVG, or an interactive embed.

Charts by Szum inserts publication-ready charts straight into your designs. And we mean it literally – it's powered by the same logic as the Szum API, so the exact chart you see in Figma also comes out as a PNG, SVG, or interactive embed for your web app.

Oh, and the charts also auto-update, auto-resize, and come as semantic layers (Labels, Marks, Axes, Header, Background) with real typography you can style by hand.

Install

Get the plugin from the Figma Community.

How to start

Open the plugin and you're looking at a chart with sample data already in it – tweak categories, series, and labels, pick a theme, insert. Everything you change afterward updates the chart frame right on the canvas.

What makes Charts by Szum special

LayersCharts come as semantic, layered frames.
Auto-updateAny config change is reflected on the canvas, live.
Auto-sizeChange the frame size and the chart re-renders to fit.
StorageChart frames remember their config and data; come back later to keep editing.
SharingShare a chart URL to send to colleagues outside Figma.

More details

  • Six chart types. Bar, column, line, area, scatter, pie (also comes as a 🍩).
  • Chart-type controls. Donut size, stacked or side-by-side bars and columns, and more.
  • Curated light and dark themes. Editorial, clean, noir, loud, soft, technical.
  • Random data generator. Mock up your charts easily, without a CSV…
  • CSV import. …or paste a CSV and edit the data directly in the plugin.
  • Custom themes. Colors, font sizes, and more – available on a Pro plan (but every element is also editable by hand, for free).

How much does it cost?

Charts by Szum is a free plugin. You can optionally upgrade to Pro to use custom theme styling, currently available by tweaking the Source tab – we're working on a better integration. Stay tuned!

Got a dev team?

The plugin uses the same logic as the szum API – one you can call directly outside of Figma. GET or POST (or use our TypeScript SDK) a chart config to szum.io/chart and get the exact image back, SVG or retina PNG, in your product, emails, dashboards, or Slack. Also available as interactive embeds and an MCP server (yes, you can make szum charts with Claude).

See also

On this page