# How to Make a Word Cloud in Figma (and What It Cannot Tell You)
_August 27, 2026 · 11 min read · by Systergon_
> A word cloud is the most popular chart with people who commission charts and the least popular with people who read them, and both camps are right: word length confounds size, area scales faster than font size, and position is packing rather than data. Where that does not disqualify it, how the preparation — stop words, stemming, phrases — is really the chart, four alternatives that answer the same question better, and why shaped clouds are typography rather than data.
Tags: Figma, Charts, Word Cloud, Text Analysis, Plugin
URL: https://systergon.com/blog/figma-charts-word-cloud
---
[Install Figma Charts — it’s free to try →](https://www.figma.com/community/plugin/1345221583582136577/figma-charts) [See the word cloud gallery →](https://systergon.com/figma-charts/chart-types/wordcloud)

A word cloud sizes words by how often they occur. It is the most popular chart in this series with people who commission charts and the least popular with people who read them, and both camps are right about something: it is genuinely bad at conveying quantities, and genuinely good at doing a job no other chart does — showing what a body of text is _about_, in a form anyone will look at.

![A word cloud drawn by Highcharts inside the Figma Charts plugin](https://systergon.com/blog/figma-charts-word-cloud/images/wordcloud-basic.svg)

_Real plugin output: a Highcharts word cloud captured from the editor. Every chart on this page is the library’s own drawing._

This page takes both seriously: exactly why the encoding is unreliable, the cases where that does not disqualify it, how to build one that is as honest as the form allows — and what to put beside it so the numbers are somewhere.

## First — get the plugin

Everything below happens inside **Figma Charts**, a Figma plugin. It runs the real JavaScript charting libraries — Google Charts, Highcharts, D3-based Nivo, ApexCharts and Apache ECharts — inside the plugin window, so the layout on your canvas is the library’s own packing algorithm.

[Install Figma Charts from the Figma Community →](https://www.figma.com/community/plugin/1345221583582136577/figma-charts)

Press **⌘/** (**Ctrl /** on Windows), type _Figma Charts_, hit Enter, and pick **Word Cloud** from the category filter. Two examples, both Highcharts — and it is the only library here that ships one.

## Why the encoding is unreliable

Four reasons, and they compound:

- **Word length confounds size.** “Internationalisation” at font size 20 occupies far more ink than “bug” at font size 40. Readers judge prominence by area, so long words systematically look more frequent than they are.
- **Font size is not proportional to anything readable.** Doubling a font size roughly quadruples the area, so a word twice as frequent looks four times as important — the same problem as sizing bubbles by diameter, with no convention to correct it.
- **Position is packing, not data.** Words go wherever they fit. Centre does not mean most important; adjacency means nothing at all.
- **Rotation costs legibility.** Vertical and angled words are packed more densely and read more slowly, and the ones rotated are chosen by the algorithm rather than by significance.

None of that is fixable by styling, because it is inherent to the form. What follows from it is a simple rule: **a word cloud can support “these themes dominate” and cannot support any comparison between two specific words.**

## Two clouds and one relative

![A rectangular word cloud drawn by Highcharts](https://systergon.com/blog/figma-charts-word-cloud/images/wordcloud-rectangular.svg)

_**Rectangular packing** — words placed on a grid rather than spiralling out from a centre. It is denser, it wastes less space, and it removes the false implication that the middle is the most important place. If you are drawing one of these, this is the layout to prefer._

![A word tree drawn by Google Charts](https://systergon.com/blog/figma-charts-word-cloud/images/wordcloud-wordtree.svg)

_**The word tree** — a different chart with a related job, and Google Charts is the only library here with one. Instead of frequencies it shows context_: a root phrase branching into the ways it actually continues in the text. Where a word cloud says which words appear, a word tree says how they are used, which is usually the more interesting question.

## When a word cloud is defensible

Three cases, stated honestly:

**1. The finding is qualitative and obvious.** “Support tickets this quarter are dominated by billing” — where one or two terms tower over the rest and no reader needs to rank the tail. The cloud makes the point instantly to an audience that would not read a bar chart.

**2. The audience is being invited in, not informed.** Conference walls, community summaries, retrospective boards, engagement pieces. Here the chart is doing social work — showing people their own words back — and precision is genuinely not the goal.

**3. As an index rather than a chart.** In an interactive tool, a cloud makes a good navigation surface: click a term to filter. The sizes are decoration, the words are the interface.

And the cases where it is not defensible: **any time a decision depends on the ranking**, any time two terms will be compared, and any time the tail matters — because everything below the top dozen is unreadable at typical sizes.

## The preparation is the chart

More than any other type here, the quality of a word cloud is decided before it is drawn. Four steps, in order:

**Remove stop words.** Without a stop list, every cloud is “the”, “and” and “to”. Most tools ship one; check that it covers your domain, because a support-ticket corpus needs “hi”, “thanks” and your own product name removed too.

**Normalise word forms.** “Refund”, “refunds” and “refunded” are one theme drawn as three small words, which understates it three times over. Stemming or a manual merge list fixes it, and it is the single biggest improvement available.

**Handle phrases.** “Password reset” split into two words loses the finding entirely, and “password” alone is ambiguous. If your themes are phrases, count bigrams rather than words.

**Cap the count.** Thirty to fifty terms is the working range. More does not add information; it adds unreadable four-pixel text around the edges.

None of that happens in the chart. It happens in the data before it arrives, which is why a word cloud is a text-processing job with a rendering step at the end.

## Four charts that answer the same question better

Almost every word cloud is standing in for a chart that would say more. If precision matters at all, one of these is the replacement.

**A ranked bar chart of the top terms.** The obvious answer and the right one: lengths from a common baseline, exact counts, no confound with word length, and it handles thirty terms comfortably. It is less fun to look at and it is what the data actually supports.

**A lollipop chart.** Same encoding with less ink, which matters when you have twenty-five terms and long labels — and term labels are long. The names get a full line each on the left.

**A word tree.** When the question is how a term is used rather than how often it appears. “Cancel” branching into “cancel my subscription”, “cancel the order” and “cancel anytime” is three different findings that a cloud collapses into one word.

**A term-by-period heatmap.** Terms down the rows, months across the columns, colour for frequency. It answers “what is rising?”, which is usually the more valuable question and which a single cloud cannot address at all — and unlike two clouds side by side, it can actually be compared.

The honest test: write the sentence the cloud is supposed to support. If it contains a number or a comparison, draw one of the four above. If it is “this corpus is mostly about X”, the cloud is fine.

## Using one without misleading anybody

If a word cloud is going into a deliverable — and often it is going in because someone asked for it — three practices keep it honest.

**Pair it, always.** Cloud on the left for the impression, ranked list of the top ten with counts on the right for the facts. This takes almost no extra space and it removes every objection above except the aesthetic one.

**State the preparation in a caption.** “Top 40 terms, stop words removed, stemmed; n = 4,812 tickets” is one line, and it tells the reader that the chart is the result of decisions rather than a neutral view of the text.

**Never put two clouds side by side.** Comparing them is the one thing readers will try to do and the one thing the form cannot support: the layouts differ, the size scales differ, and a word that grew may be drawn smaller. Use a heatmap or a slope chart of the terms instead.

## Building one, step by step

Six screens, start to finish, captured from the plugin.

![The Figma Charts gallery filtered to the Word Cloud category](https://systergon.com/blog/figma-charts-word-cloud/images/step-gallery.webp)

_**1. Filter to Word Cloud.** Two examples, both Highcharts — a spiral layout and a rectangular one._

![The Figma Charts editor with a word cloud in the preview](https://systergon.com/blog/figma-charts-word-cloud/images/step-editor.webp)

_**2. The editor.** Live preview above, tabs below. Resize before judging: the packing algorithm re-runs at every size, so a cloud that reads well in a wide frame can lose half its words in a narrow one._

![The Data tab showing words and their weights](https://systergon.com/blog/figma-charts-word-cloud/images/step-data.webp)

_**3. Words and weights.** One row per term: the word and its count. The chart does no counting — the tokenising, stop-word removal and stemming all happen before this table._

![The Configuration tab showing word cloud option groups](https://systergon.com/blog/figma-charts-word-cloud/images/step-config.webp)

_**4. Configure.** Rotation range, font family and the minimum and maximum sizes. Setting rotation to zero and narrowing the size range are the two changes that most improve legibility._

![The Export tab showing code export formats](https://systergon.com/blog/figma-charts-word-cloud/images/step-export.webp)

_**5. Export.** A working component for React, Vue 3, Angular, Svelte or vanilla JavaScript — and note that the layout will be re-packed at run time, so it will not reproduce this arrangement exactly._

![The + SVG and + PNG insert buttons](https://systergon.com/blog/figma-charts-word-cloud/images/step-insert.webp)

_**6. Insert.** SVG brings every word in as real, editable text — which is the strongest argument for making this chart in the plugin rather than by hand: you get a packed layout you can then adjust word by word._

## The data shape it needs

Two columns: the **word** and its **weight**. That is the ordinary table, there is no special editor, and it accepts a linked data source — so a term-frequency query in a Sheet can drive the chart directly.

What the chart will not do is any text processing. Tokenising, case-folding, stop words, stemming and phrase detection all happen upstream, and the two most common failures both come from skipping them: a cloud dominated by function words, and a theme split across three inflections so that none of them looks significant.

One plugin-specific caution: an unparseable weight becomes **0**, and a zero-weight word is drawn at the minimum font size rather than dropped — so it appears in the cloud looking like a rare term rather than a broken row.

## Library by library

The **Word Cloud** category holds **two examples, both Highcharts**, and this is one of the genuinely narrow types in the plugin.

- **Highcharts — 2 examples**, spiral and rectangular, via its word-cloud module, with rotation, font range and placement strategy all configurable. Commercial licence required to ship commercially.
- **Google Charts — the word tree**, filed under its own chip. Not a word cloud, and often the better chart: it shows how a phrase continues rather than how often words appear.
- **ECharts — nothing here.** A word-cloud extension exists for ECharts as a separate package; no examples are bundled in the plugin, so it is not available as a starting point.
- **Nivo and ApexCharts — no word cloud.**

If your stack is not Highcharts and you need this exact picture, the practical route is to insert one as SVG and treat it as artwork — every word arrives as editable text, so the layout survives without the library.

As always: **design in whichever library your engineers already use**, because the export then matches production exactly. [Choosing the right chart library](https://systergon.com/blog/figma-charts-choosing-the-right-chart-library) covers the trade-offs.

## Styling it well

**Turn rotation off.** Horizontal words are read faster and the cloud loses nothing but density. If space is tight, drop terms instead of rotating them.

**Narrow the font-size range.** A range of 14 to 48px keeps the smallest words legible and the largest from swallowing the frame. Wide ranges exaggerate the top terms and make the tail unreadable, which is the encoding’s weakness amplified by a setting.

**One typeface, one or two weights.** The size is already carrying the variable; mixing families or four weights adds visual noise that reads as meaning.

**Use colour for a category, or not at all.** Random colour per word is the default in many tools and it encodes nothing. Either keep every word one colour, or map colour to something real — sentiment, source, period — and provide a key.

**Prefer rectangular packing.** It uses the space better and avoids implying that the centre is the most important position.

For type and colour, bind them to your design system rather than picking by hand — covered in [Your chart, your design system](https://systergon.com/blog/figma-charts-design-system-colors-typography-tokens).

## Reading it well — and the ways it misleads

**Long words look more frequent.** The confound is unavoidable and worth stating to any audience that will act on the chart: area is a function of both frequency and spelling.

**The layout is not stable.** Re-render and the arrangement changes, so two versions of the same cloud look like different data and nobody can be told to “look at the top left”.

**Frequency is not importance.** The most common word in a set of complaints is often a topic label rather than a problem. Frequency measures how much something is _mentioned_, which correlates with importance only loosely — and one furious customer using an unusual word may matter more than fifty routine mentions.

**The tail is invisible, not absent.** Terms below the top few are drawn at sizes that cannot be read, so the cloud shows a fraction of what is in the data while looking comprehensive.

**Context is missing entirely.** “Not working” and “working” produce the same word. A cloud cannot distinguish praise from complaint, which is why sentiment work needs a different chart — or Google’s word tree, which keeps the phrase.

## Shaped clouds, and why they make it worse

A request that arrives with this chart more than any other: can the words be packed into a shape — a logo, a country, a lightbulb? Technically yes, with a mask. It is worth knowing what it costs before agreeing.

**The shape overrides the sizes.** Fitting text into an outline means the packer chooses positions and rotations to fill space, so words get scaled and turned to suit the silhouette rather than the data. Whatever weak relationship existed between frequency and prominence is now mediated by geometry.

**The outline becomes the message.** Readers see the shape first and the words second, which is fine if the shape is the point — a poster, a cover image — and a problem if anyone believes they are reading data.

**Legibility drops at the edges.** Words at the boundary get small and heavily rotated, so the terms with the least prominence are also the hardest to read, compounding the tail problem.

The honest framing: a shaped word cloud is **typographic artwork built from real terms**, and it is a perfectly good thing to make deliberately. Label it as decoration, keep the ranked list somewhere nearby, and nobody is misled.

## Accessibility

**Set a real minimum size.** The smallest words are usually below any reasonable accessibility floor. Raising the minimum and dropping the terms that no longer fit is more honest than rendering unreadable text.

**Keep it horizontal.** Rotated text is harder for everyone and considerably harder for readers with low vision or dyslexia.

**Give it a text equivalent — and here it should be a ranked list.** The Export tab’s **Copy Alt Text**, **Copy Data Table** and **Set Node Desc** produce a description, a table of the terms and counts and a description written onto the Figma node. For a word cloud that table is not a fallback, it is the accurate version of the chart, and it is worth showing beside the cloud rather than behind it.

## Common questions

### Are word clouds actually bad?

They are bad at conveying quantities — word length confounds size, area scales faster than font size, and position is packing rather than data. They are good at showing what a body of text is about to an audience that will look at a picture and not at a bar chart. Use them for impression, never for ranking.

### Which libraries can draw one?

**Highcharts only**, in this plugin — two examples, spiral and rectangular. Google Charts has a word _tree_, which is a different and often better chart. ECharts has a word-cloud extension that is not bundled here, and Nivo and ApexCharts have none.

### How many words should it show?

Thirty to fifty. Beyond that the additional terms render at sizes nobody can read, which makes the chart look thorough while showing less than it appears to.

### Should words be rotated?

No. Rotation buys packing density and costs legibility, and the words that get rotated are chosen by the algorithm rather than by importance. Set the rotation range to zero and drop terms if space runs out.

### What preparation does the data need?

Stop-word removal, case-folding, stemming or a merge list so that inflections of one theme count together, and phrase detection if your themes are phrases. The chart does none of this — it takes a table of words and weights.

### What should I show alongside it?

A ranked bar chart or a table of the top terms with their counts. The cloud carries the impression, the list carries the numbers, and together they are honest. On their own, clouds invite ranking claims they cannot support.

### What is a word tree?

A Google Charts type that takes a root word or phrase and branches it into the ways it actually continues in the source text, with branch thickness showing how common each continuation is. It preserves context, which a word cloud discards — so it is usually the better choice when the question is how a term is being used.

### Can I compare two word clouds?

No — and it is the thing readers most want to do. Two clouds have different layouts and independent size scales, so a term that became more common can easily be drawn smaller in the second one. For change over time, use a heatmap of terms against periods, or a slope chart of the top terms’ ranks.

### Does the chart stay editable in Figma?

Insert as **SVG** and every word arrives as real, editable text at its packed position — which is the best reason to build one here: you get an automatic layout and can then adjust individual words by hand. Insert as **PNG** for a flat image at twice the pixel density.

## Where to start

Open the plugin, filter to Word Cloud, and put your term frequencies in — then put a ranked bar chart of the same top twenty terms next to it. If the two tell the same story, the cloud is a legitimate way in for readers who would not have looked at the bars. If they disagree, trust the bars: the cloud has been distorted by word length, and now you know by how much.

[Install Figma Charts — it’s free to try →](https://www.figma.com/community/plugin/1345221583582136577/figma-charts) [Browse all 45 chart types →](https://systergon.com/figma-charts/chart-types)