Figma plugin

Create publication-ready charts from sample data or CSV and insert them as editable semantic layers in Figma.

Charts by Szum brings the shared Szum chart definition into Figma. Build the chart in the plugin, insert it as real vector and text layers, and return later to keep editing the stored data and definition.

Install

Get Charts by Szum from the Figma Community, then run it from Figma's Plugins menu.

Create your first chart

Open the plugin and choose a chart type.
Start with generated sample data or select Custom (your data).
Adjust categories, series, labels, chart-specific controls, and theme.
Select Insert chart to place the chart on the canvas.

The initial sample data is intentional: you can design a realistic chart before the final dataset is ready, then replace the values without rebuilding the visual treatment.

Use your own data

Open the Data tab and paste CSV. Every row must contain the same number of values. Review the parsed table, map the fields, and select Use this data to update the chart.

You can continue editing individual cells in the plugin after import. The chart stores its data and mapping with the inserted frame.

Open Source to inspect or edit the complete chart definition. Review collects semantic errors, warnings, and suggestions produced by Source, data, and design changes. Errors block insertion of the invalid definition while the last valid preview remains visible; warnings do not. When a finding has a deterministic fix, its named action verifies and updates the definition explicitly as one undoable action; it never changes the chart automatically. The Review badge uses the most severe current finding. See Validation and Review for the shared contract.

Edit and resize on the canvas

Inserted charts use named semantic groups such as Header, Marks, Axes, Labels, Legend, Footer, and Background. Text remains text and graphic elements remain editable vectors.

Resize the chart frame and the plugin re-renders the chart to fit. Select an existing Szum chart and relaunch Edit chart to restore its definition and data in the plugin.

Manual layer edits are ordinary Figma edits. Re-rendering from the plugin rebuilds the chart from its stored definition, so make structural chart changes in the plugin first.

Themes and customization

All six curated themes are available in the plugin. Chart-specific controls cover grouping, line and dot sizing, donut size, labels, and other common decisions.

Custom theme colors, typography, axes, and related properties require Creator or Pro. Every inserted layer remains manually editable in Figma regardless of plan.

Local chart creation and insertion do not require an account. To publish, add a Szum API key in the plugin settings.

Publishing creates stable PNG, SVG, and interactive embed links. After editing the chart, publish again to update the same URLs. Removing the published chart takes those links offline without deleting the editable Figma frame.

The same chart outside Figma

The chart uses the same grammar and renderer as the Image API, web editor, AI agents, and interactive embeds.