# How to Make a Word Tree in Figma (Context, Not Frequency)
_August 27, 2026 · 11 min read · by Systergon_
> A word tree takes one word and shows every way it continues in a body of text, branching outward with each branch sized by how often that path occurs. Where a word cloud tells you which words appear, a tree tells you how they are used — “cancel” splits into cancel my subscription, cancel the order and cancel anytime, three different problems. Choosing the root, the workflow that produces findings, and turning an exploration artefact into a figure.
Tags: Figma, Charts, Word Tree, Text Analysis, Plugin
URL: https://systergon.com/blog/figma-charts-word-tree
---
[Install Figma Charts — it’s free to try →](https://www.figma.com/community/plugin/1345221583582136577/figma-charts) [See the word tree gallery →](https://systergon.com/figma-charts/chart-types/wordtree)

A word tree takes one word or phrase and shows every way it continues in a body of text, branching outward, with each branch sized by how often that continuation occurs. Where a [word cloud](https://systergon.com/blog/figma-charts-word-cloud) tells you which words appear, a word tree tells you **how they are used** — and that is almost always the more useful question.

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

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

“Cancel” in a support corpus is one word in a cloud. In a word tree it splits into “cancel my subscription”, “cancel the order” and “cancel anytime” — three different problems, one of which is marketing copy. This page is about reading that structure, choosing the root, and what to do when the branches explode.

## 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 tree on your canvas is the library’s own layout of your text.

[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 Tree** from the category filter. Five examples, all Google Charts — it is the only library here with the type.

## What the branches encode

Three things, and the third is the one that makes the chart worth drawing:

- **The root** sits at one edge — the word or phrase you chose to investigate. Everything in the chart is a continuation of it, so the root is the question.
- **Each branch** is a distinct continuation, drawn at a size proportional to how many times that path occurs in the text.
- **The paths preserve order.** Reading outward from the root reproduces a real sequence of words from the corpus — not a summary of them. That is the difference from every other text visualisation here: nothing has been aggregated away, only arranged.

A fourth element is worth knowing about because it is a setting rather than an accident: the tree can grow **either direction**. Forwards it shows what follows the root; backwards it shows what precedes it. Most people never change it, and the backward view is frequently the more revealing of the two.

The effect is that a word tree is simultaneously a chart and a concordance. It shows the shape of usage and lets a reader recover actual phrases, which is why it works so well as an exploration tool rather than a presentation graphic.

## Four word trees, and what each one is investigating

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

_**Product reviews** — rooted on a phrase people use when they are about to say what they think. The branches separate praise from complaint, which a frequency count of the same corpus cannot do: “quality” appears in both._

![A word tree of how-to queries drawn by Google Charts](https://systergon.com/blog/figma-charts-word-tree/images/wordtree-howto.svg)

_**How-to queries** — the classic search-analysis use. Rooting on “how to” turns a list of thousands of queries into a map of what people are trying to do, ranked by branch size._

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

_**Feature requests** — where the value is in the tail. The big branches are usually predictable; the finding is a mid-sized branch nobody expected, which is visible here in a way it is not in a ranked list._

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

_**Headlines** — a corpus with strong conventional phrasing, which makes the tree unusually well structured. It also shows the failure mode: with very formulaic text, the tree describes the format rather than the content._

## Choosing the root is the analysis

A word tree has exactly one meaningful parameter, and everything depends on it. Four ways to choose:

**The verb.** “Cancel”, “upgrade”, “export”. Verbs branch into objects, which is how you discover what people are trying to do to what.

**The framing phrase.** “I wish”, “it would be great if”, “the problem is”. These are the phrases people use immediately before saying the thing you want to hear, and rooting on them is the single most productive trick with this chart.

**The product noun.** Your feature name, rooted, shows how customers describe it — frequently in words nobody in the company uses.

**The negation.** “Cannot”, “does not”, “never”. A tree of what fails is a bug backlog that wrote itself.

The corollary: **one tree is never enough**. A word tree is an instrument you point at a corpus repeatedly, and the useful output of an afternoon is a handful of trees with different roots, of which two turn out to be worth showing anybody.

## When a word tree is the wrong chart

**1. You want an overview of the whole corpus.** A tree shows only what follows one root. If the question is “what is in this text at all?”, start with frequencies — a ranked bar chart of terms, or a word cloud if the audience needs the softer version.

**2. Your root is rare.** A root occurring twenty times produces a sparse, spindly tree that looks like a finding and is noise. Check the count before drawing.

**3. The text is short.** Word trees need volume — thousands of sentences, not dozens. With a small corpus, read it.

A fourth: **when the phrasing is formulaic.** Legal text, templated messages and headline conventions produce beautiful trees that describe the template rather than the content, as the headlines example above shows.

## A workflow that actually produces findings

Word trees reward a loop rather than a single render. Four steps, and the whole cycle takes about an hour on a real corpus.

**1. Start with frequencies.** Before drawing any tree, get a ranked list of the most common terms. That list is your menu of candidate roots — and it also tells you which words are too rare to root on.

**2. Root on the top five verbs, one at a time.** Nouns tell you what the corpus is about, which you probably already know. Verbs tell you what people are trying to do, which is usually what you are looking for.

**3. Follow the surprising branch.** The largest branch is generally the expected one. The finding is the mid-sized branch you did not predict — and the next move is to re-root the tree on _that_ phrase and look again.

**4. Keep two trees, discard the rest.** Trees are exploration artefacts. Most are not worth showing anyone; the two that survive should be pruned, annotated with counts and paired with a sentence saying what they demonstrate.

The mistake to avoid is treating the first tree as the deliverable. A word tree is closer to a query than to a chart, and the value comes from asking several.

## Where it earns its place

Three settings where a word tree does something no summary statistic can.

**Support and feedback triage.** Rooting on a verb turns thousands of tickets into a ranked map of intents, and the branch sizes give you the rough volume behind each one — enough to decide what to investigate properly.

**Search and query analysis.** “How to”, “why does”, “where is”. These roots convert a query log into a picture of what people cannot find, which is a product backlog in disguise.

**Language and positioning work.** Rooting on your own product noun shows the words customers use for it. Marketing copy that adopts those words tends to work better than copy that teaches new ones, and the tree is the fastest way to see what they are.

In all three the chart is doing the same job: preserving the phrase so that the reader can see meaning, where every other text chart in this series has already thrown the phrase away.

## Building one, step by step

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

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

_**1. Filter to Word Tree.** All five examples are Google Charts; no other library here has the type._

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

_**2. The editor.** Live preview above, tabs below. Word trees grow sideways without limit, so set a generous width early and expect to constrain the branch count rather than the frame._

![The Data tab showing the sentences behind a word tree](https://systergon.com/blog/figma-charts-word-tree/images/step-data.webp)

_**3. Sentences, not counts.** This chart is unusual: the data is the raw text, one phrase or sentence per row, and the library does the tokenising and counting. Most charts take summarised data; this one takes the corpus._

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

_**4. Set the root and the direction.** The root word, whether the tree grows forwards (what follows) or backwards (what precedes), and the font sizing range. Backwards trees are underused and often more revealing._

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

_**5. Export.** A working component for React, Vue 3, Angular, Svelte or vanilla JavaScript, at the version the plugin rendered with._

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

_**6. Insert.** SVG brings every word in as real, editable text — which for this chart is essential, because a word tree almost always needs pruning by hand before it can be presented._

## The data shape it needs

Raw text: one phrase or sentence per row, and the chart does the rest — splitting on spaces, following each occurrence of the root, counting the paths. That makes it one of only two chart types here that take unsummarised data (a [histogram](https://systergon.com/blog/figma-charts-histogram) is the other), and it changes the preparation entirely.

Three things to do to the text first:

- **Lower-case it**, unless capitalisation is meaningful. Otherwise “Cancel” and “cancel” are two roots and the tree splits in half.
- **Strip punctuation that ends phrases**, or every branch terminates at a comma.
- **Split into sentences.** One row per sentence, not per document — otherwise the tree follows the root across sentence boundaries and produces paths nobody ever said.

Volume matters more than cleanliness here: a tree over five thousand messy sentences is far more informative than one over two hundred perfect ones.

## Library by library

The **Word Tree** category holds **five examples, all Google Charts**, and this is a genuine single-library type — no other library in the plugin has an equivalent, and there is no easy workaround, because the layout algorithm is doing real work.

- **Google Charts — 5 examples**: a general tree plus four domain cases — product reviews, how-to queries, feature requests and news headlines. Forward and backward growth, configurable root, and font sizing driven by branch frequency.
- **Everyone else — nothing comparable.** The nearest available substitutes are a [tree diagram](https://systergon.com/figma-charts/chart-types/tree) built from pre-computed phrase counts, or a [Sankey](https://systergon.com/blog/figma-charts-sankey-diagram) of the first three words, which is a genuinely good approximation if you are willing to prepare the data.

If your team is not on Google Charts, the practical route is to build the tree here, insert it as SVG, and treat it as a designed graphic — the text arrives as real layers, so it 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

**Prune before you style.** A raw word tree has a long tail of one-occurrence branches that add width and no information. Cutting to branches above a threshold is the first and biggest improvement, and it is a data decision rather than a visual one.

**Narrow the font-size range.** As with a word cloud, a wide range makes the top branch enormous and the rest unreadable. A modest range keeps the whole tree legible while still ranking the branches.

**Give the root visual weight.** It is the question the chart is answering, and it should be unmistakable — heavier, larger, or set apart with space.

**Let it be wide.** Word trees are landscape objects. Fighting that with a square frame produces overlapping text; accepting it produces a graphic that works well as a full-width figure or a poster.

**Colour sparingly.** One accent for the root and neutral text elsewhere. Colouring branches by sentiment is tempting and requires an actual sentiment model — without one, it is decoration presented as analysis.

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

**Branch size is frequency, not importance.** The biggest branch is the most common phrasing, which in support text is usually the most routine issue rather than the most serious one.

**The tree shows one root’s worth of the corpus.** Everything not containing your root is invisible, so a word tree can never say anything about the whole body of text — a caveat that gets lost when the graphic is presented on its own.

**Forward and backward trees say different things.** Growing forwards shows what follows the root; growing backwards shows what precedes it, which is where intent and negation live — “cannot cancel” only appears in a backward tree.

**Sentence splitting changes the result.** Paths that cross a sentence boundary are phrases nobody uttered. If the tree contains a branch that reads oddly, check the splitting before believing it.

**Pruning is invisible.** A tree cut to branches above a threshold looks complete. Say what was cut, in the caption — the same discipline as a filtered network diagram.

## Turning a tree into something presentable

A raw word tree is an exploration artefact and looks like one: too wide, too many branches, no emphasis. Four moves turn it into a figure, and all four happen after inserting as SVG.

**Prune to the branches that carry the argument.** Usually three to six. Deleting the rest is a canvas operation once the text is real layers, and it is far quicker than fighting the chart’s own thresholds.

**Add the counts.** “cancel my subscription — 412” makes the branch a fact rather than an impression, and it is the number a reader will ask for.

**Emphasise one path.** Bold the branch the text is about and mute the rest. A word tree with everything at equal weight makes the reader find the point; one with a highlighted path makes it.

**Re-space by hand.** Layout algorithms leave awkward gaps when branches are deleted. Closing them up is five minutes and is the difference between a screenshot and a designed figure.

## Accessibility

**The text is real text — keep it that way.** Inserting as SVG preserves every word as a selectable, searchable layer, which makes this one of the most accessible charts in the plugin when inserted correctly.

**Mind the smallest branches.** As with a word cloud, set a minimum font size and drop what no longer fits rather than rendering text nobody can read.

**Do not rely on size alone for ranking.** If the branch order matters, annotate the top few with their counts.

**Give it a text equivalent.** The Export tab’s **Copy Alt Text**, **Copy Data Table** and **Set Node Desc** produce a description, a table of the underlying rows and a description written onto the Figma node. For a word tree the useful summary is the top handful of paths with their counts — which is also the version you should put in the accompanying text.

## Common questions

### What is a word tree?

A branching view of how a chosen word or phrase continues in a body of text, with branch size showing how often each continuation occurs. It preserves word order, so reading outward from the root reproduces real phrases from the source.

### Word tree or word cloud?

A cloud shows which words appear; a tree shows how a word is used. The cloud is an overview and an engagement device; the tree is an investigation tool. For understanding customer language, the tree answers the question people actually have.

### Which libraries can draw one?

**Google Charts only** — five examples, and no equivalent anywhere else in the plugin. The nearest substitutes are a tree diagram or a Sankey built from pre-computed phrase counts.

### What data does it take?

Raw text, one phrase or sentence per row. The library tokenises and counts. Lower-case the text, strip end punctuation and split into sentences first — otherwise the tree follows paths across sentence boundaries that nobody ever said.

### How do I choose the root word?

Verbs to find what people are doing, framing phrases like “I wish” or “the problem is” to find opinions, product nouns to learn customer vocabulary, and negations to find failures. Expect to draw several trees and keep one or two.

### Can it grow backwards?

Yes, and it is underused. A backward tree shows what _precedes_ the root, which is where intent and negation live — “cannot cancel” and “trying to cancel” are invisible in a forward tree.

### How much text does it need?

Thousands of sentences. With a few hundred, the branches are individual utterances rather than patterns, and the chart shows noise arranged attractively.

### How do I turn a raw tree into a presentable figure?

Insert as SVG, then prune to three to six branches, add the counts to each, bold the path your text is about and close up the gaps left by the deletions. Because every word comes in as a real text layer, all four are canvas operations — and they are the difference between a screenshot of an exploration and a designed figure.

### Does the chart stay editable in Figma?

Insert as **SVG** and every word is real, editable text at its computed position — which matters here more than for most charts, because a word tree nearly always needs pruning and re-spacing by hand before it can be presented. Insert as **PNG** for a flat image at twice the pixel density.

## Where to start

Open the plugin, filter to Word Tree, and root one on the most ordinary verb in your support corpus — “cancel”, “export”, “change”. Then draw the same corpus as a word cloud. The cloud will tell you that word is common; the tree will tell you which three different things people meant by it, and only one of those is a chart worth showing anybody.

[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)