PlotSet LogoPlotSet

Charts for Figma

The PlotSet chart plugin for Figma: build a real chart or map from real data without leaving the file, then drop it onto the canvas as editable vectors. Free, and the same chart publishes as a live embed for FigJam and the web.

用 Figma 数据做出的图表

这不是截图,而是一张真实的交互式图表,嵌入方式和你自己的完全一样。

示例:Desktop browser market share

嵌入代码

一行 HTML。这就是上面那张图表的真实代码——粘贴到任何支持 HTML 的页面即可。

<iframe width="100%" height="100%" src="https://plotset.com/api/embed/a9e16fe6-01fd-4a3d-b2d9-396b657b665b" />

尺寸由你决定:直接在 iframe 上设置宽高,或把它放进一个按你自己比例设定的容器里。

PlotSet 与 Figma:实话实说

Most charts in Figma files are drawn by hand — a rectangle per bar, a pen-tool line, numbers typed in from a screenshot. They look right until the data changes, or until someone asks what the axis is. PlotSet's Figma plugin replaces that with a real charting tool running inside the file: you pick a template from the same catalogue the web app uses, bring in your rows, style it to match the design, and the finished chart comes back onto the canvas. It arrives as SVG, so it lands as vector shapes and text layers you can select, recolour and mask like anything else you drew — not a flattened PNG. What the plugin deliberately does not do is publish: sharing, live embeds and video export stay in the web app, because a Figma canvas is not where an embed URL is useful.

如何用 Figma 数据做图表

从表格到发布嵌入,一步一步来。

01

Install the plugin

Search the Figma Community for "PlotSet Charts and Maps", or open it directly from figma.com/community/plugin/1421122515439713398. It runs in design files and needs no account to try.

02

Run it and pick a template

Right-click → Plugins → PlotSet Charts and Maps. The panel opens on the template browser: bar, line, pie, sankey, treemap, population pyramid, choropleth and symbol maps for 119 geographies, and the rest of the catalogue.

03

Bring your data in

Paste rows straight from a spreadsheet, drop in a CSV or Excel file, or connect a Google Sheet. Column types are detected as you paste, so dates stay dates and numbers stay numbers.

04

Style it to match the design

Set the palette to your product colours, the typeface to the one the file already uses, and the number formatting to whatever the rest of the screen does. Doing it here saves undoing Figma defaults later.

05

Export to Figma

The Export button becomes "Export to Figma". Set the size you want the chart to occupy, export, and the chart is placed on the canvas as a vector group, ready to position in the frame.

06

Restyle or re-export as the design moves

Small tweaks — a colour, a label — are faster in Figma once the vectors are there. Anything that changes the data is faster back in the plugin: change the rows, export again, replace the group.

相比 Figma 自带图表,你多得到什么

  • Real numbers in the mockup

    A dashboard designed against invented data hides the problems that matter: the label that wraps, the long tail that flattens the bars, the category nobody budgeted space for. Real rows surface them at design time.

  • Chart types nobody wants to draw by hand

    Sankey diagrams, treemaps, choropleth and symbol maps, population pyramids, bump charts, marimekko. Around 300 templates, all of which would be a bad afternoon with the pen tool.

  • It comes across as vectors, not a screenshot

    The export is SVG, so the chart lands as editable shapes and text. Recolour a series, mask a region, restyle a label — without going back to the source or losing crispness at any zoom.

  • The same chart can go live later

    A chart built in the plugin is a normal PlotSet project. When the design ships, open it in the web app and publish it as an interactive embed for the site, the docs or a FigJam board — one source, two destinations.

它做不到什么

  • A Figma design file cannot render a live chart

    Design files place images and vectors, not iframes. What lands on the canvas is a snapshot of the chart as it looked when you exported it — interactive tooltips exist in the published embed, not in the file.

  • Publishing and sharing are not in the plugin

    Share, gallery publishing and video export are hidden inside Figma on purpose. Open the project in the PlotSet web app when you need an embed URL or an MP4.

  • The exported vectors do not update themselves

    Once the chart is on the canvas it is Figma geometry with no link back. When the data changes, re-export and swap the group — the same discipline as any other imported asset.

  • Fonts have to exist on both sides

    The chart carries the typeface you chose in the plugin. If the file expects a font that is not installed for whoever opens it, Figma will substitute — pick a font the team actually has, or convert the labels to outlines.

Figma 图表常见问题

Yes — "PlotSet Charts and Maps" on the Figma Community. It runs the PlotSet editor inside a Figma design file and places the finished chart on your canvas.

把你的 Figma 数据发布成交互式图表

导入数据,几分钟内得到一张可嵌入的交互式图表——免费,无需信用卡。