Figma plugin

Create publication-ready charts from sample data or CSV and insert them as named, editable 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 in Chart.
In Data, start with generated sample data or select Your data.
In Chart, adjust the marks, axes, text, labels, annotations, and reference lines. In Style, choose the appearance, background, 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.

Marks, at the top of Chart, holds the controls for the chart’s marks, such as bar arrangement and stacking, line style, or donut size. Axes starts with the plot border.

In Marks, Draw as lines selects individual series. Line style applies to all series drawn as lines and uses the same curve, width, and point controls as a Line chart. An unavailable series shows its reason beside the switch; at least one participating series must remain a bar or area.

If changing chart type would replace custom rows or remove notes and reference lines, the plugin asks first. Undo restores the previous chart.

Use your own data

The Data tab shows the chart’s source and the table it currently uses. Type into a cell to edit it: editing the sample makes it your data, and Undo returns to the sample. If you kept custom data from earlier, the plugin asks before the sample replaces it, and View lets you inspect and reactivate those rows. Mapping sets the fields, data shape, series, order, and aggregation.

In the table, move with the arrow keys. Type or press Enter to edit a cell, Enter to save it and move down, Tab to move right, and Escape to cancel. Hold Shift, drag, or click a row number or column name to select a range; the line above the table sums the numbers in it. Pasting from a spreadsheet writes into the selected cells and adds rows when it runs past the end. Copy, cut, Delete, and ⌘D or Ctrl+D (fill down) work on the selection, and dragging the square at its corner repeats it; double-click the square to fill to the last row. Right-click, or use the ⋯ beside a row number, to insert or delete rows. If an edit leaves the table in a state the chart can’t draw, the notice under the preview says why.

To bring in a whole table, drop a CSV or TSV file onto the table, use Choose file, or use Paste as text to paste or type it: it says how the text reads as you type, and Read table (⌘↵ or Ctrl+↵) stages it. Closing the box or changing tabs keeps what you typed. The new rows appear in the table and in the preview before anything changes, even while the chart is on the canvas. A table with one label column and several number columns charts each number column as its own series, with bars side by side. Szum reads decimal commas, thousands separators, and percent and currency signs, and asks once when a date such as 03/01/2025 could be read two ways. Values it can’t read are marked; fix them in place or let them import as empty cells. Replace swaps in the new rows as one undoable step, and Cancel keeps the chart as it was.

The chart stores its data and mapping with the inserted frame.

Open Source to inspect or edit the complete chart definition. Review collects the errors, warnings, and suggestions from Source, data, and design changes.

An error blocks inserting the invalid definition while the last valid preview stays visible; warnings do not. While a Data or Source edit has an error, fix it, apply a suggested fix, or undo it before using the other controls. A suggested fix is one undoable action and never runs automatically. The Review badge shows the most severe current finding. With a Team workspace’s API key, Review also checks the workspace’s chart rules, and a rule set to Block stops publishing until the chart meets it. See Validation and Review.

Annotations and reference lines are part of the chart definition, not drawn layers, so they behave the same as in every other Szum output.

Edit and resize on the canvas

Inserted charts use named groups for the chart family, axes, labels, legends, header, caption, and background. Text remains text and graphic elements remain editable vectors.

Figma may substitute a missing chart font. When it can still import the chart, Szum warns that the result may differ from PNG or SVG; a failed import leaves your existing chart untouched.

Select an existing Szum chart and relaunch Edit chart to restore its definition and data in the plugin. While that frame is bound, accepted changes update it automatically; the footer shows the current status. You do not need to insert a replacement after each change.

Resize the chart frame and the plugin re-renders the chart to fit.

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.

Chart colors in Figma

Inserted charts take their colors from variables in the Szum chart colors collection, which has a Light and a Dark mode. Appearance in Style sets the chart frame to Light or Dark, or to Auto, which follows the frame around the chart. Switching the mode in Figma’s own Appearance panel works the same way, and the plugin keeps your choice when it updates the chart. PNG and SVG links use whichever scheme the frame shows, and so do embeds unless they match the viewer.

To let embeds follow the viewer’s light or dark mode, turn on Match viewer’s light or dark mode under Embed in Share.

Theme colors are shared by every chart that uses the same theme, and colors from your own theme overrides belong to their chart. Colors Szum calculates, such as points along a color scale, can’t follow edits to the colors they come from, so they stay out of Figma’s color pickers. Change chart colors in the plugin; it rewrites these variables on every update.

To use your own colors, open Variables in Style on an inserted chart, link a chart color to a color variable from the file or an enabled library, and choose which of its modes stand for Light and Dark. Szum writes the variable’s colors into the chart as theme overrides, so images, embeds, and Studio show the same colors, and publishing them requires Creator, Pro, or Team. The button below the colors gives every other chart on the page with the same theme the same links. A variable that goes missing keeps the colors it had when last found.

Files on Figma’s Starter plan allow one variable mode, so Szum keeps separate Light and Dark color variables there, grouped under Light and Dark, and Appearance offers only Light and Dark. Switching a chart’s appearance moves it to the other group without changing colors other charts use. Deleting a chart leaves its own colors unused under Charts, in a group named after the chart; delete that group in Figma’s variables panel when you no longer need it.

Themes and customization

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

Theme overrides for colors, typography, axes, and related properties render in Figma on every plan; publishing a chart that uses them requires Creator, Pro, or Team. Every inserted layer remains manually editable in Figma regardless of plan.

With a Team workspace’s API key, Style lists the workspace’s shared themes above Szum’s own, and new charts start in the workspace’s default theme. A chart using a shared theme stays linked to it: opening the chart in the plugin brings it up to the theme’s current values, and its published links follow the theme. Choosing another theme, resetting the customization, or linking color variables gives the chart its own copy and ends the link. If a shared theme uses something newer than your copy of the plugin, Style names it and asks you to update the plugin; charts already linked to it stay linked.

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, select Update links in Share to update the same URLs. Unpublish takes the links offline but keeps the saved chart, and Publish again brings back the same URLs. To delete the chart, use Studio. The Figma frame stays editable either way.

A published chart can also change outside Figma, when someone publishes it from Studio, an AI agent, or the API, or renames it. Whenever you select the frame or return to the plugin, it checks. A frame you haven’t edited since it was last published takes the newer version, and Undo brings back the one before. A frame with edits of its own asks first: Load latest replaces your edits with the newer version, and Keep my version leaves the frame as it is. Both name the newer version, who published it, and where from, and link to the chart’s version history in Studio. Update links never overwrites a newer version unasked: it stops and offers Load latest or Replace with this frame, which publishes your frame as a new version and keeps the one it replaces in the chart’s history, where it can be restored. Loading keeps the newer version’s link to a shared theme, and updating keeps a name the chart was given in Studio. If the newer version uses chart features your copy of the plugin doesn’t have, it asks you to update the plugin instead of loading it.

The same chart outside Figma

The same saved chart definition and visual system power the Image API, web editor, AI agents, and interactive embeds.