# How to Make an Org Chart in Figma (the Chart With No Numbers)
_August 27, 2026 · 11 min read · by Systergon_
> An org chart is the one chart that plots no quantity at all — it encodes who reports to whom as position and connection. Which makes it a diagram with a chart engine behind it, and gives it a problem no other type has: it is about people, so every layout decision is read as a claim about the organisation. The three things it claims, four layouts and what each argues, and how to make it carry span of control as well as structure.
Tags: Figma, Charts, Org Chart, Hierarchy, Plugin
URL: https://systergon.com/blog/figma-charts-org-chart
---
[Install Figma Charts — it’s free to try →](https://www.figma.com/community/plugin/1345221583582136577/figma-charts) [See the org chart gallery →](https://systergon.com/figma-charts/chart-types/organization)

An org chart is the one chart in this series that plots **no quantity at all**. Every other type encodes a number as length, angle, area or colour; an org chart encodes a relationship — who reports to whom — as position and connection, and the only measurement in it is the one you infer from how wide each level is.

![An organization chart drawn by Highcharts inside the Figma Charts plugin](https://systergon.com/blog/figma-charts-org-chart/images/org-basic.svg)

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

That makes it a diagram with a chart engine behind it, and it comes with a design problem no other type has: an org chart is _about people_, so it will be read for status, and every layout decision you make — who sits higher, who sits left, whose box is bigger — is read as a claim about the organisation.

## 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 boxes and connectors on your canvas are the library’s own layout.

[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 **Org Chart** from the category filter — two examples, both Highcharts. A larger set of the same idea lives under a different name, which the [library section](#libraries) covers.

## What an org chart claims

Three things, and they are worth naming because people design around only the first.

- **Reporting structure.** The lines are the content: A reports to B. Everything else in the chart exists to make those lines legible.
- **Level.** Vertical position is depth in the hierarchy, and readers translate it directly into seniority — which is accurate in a strict hierarchy and misleading the moment your organisation has a principal engineer sitting three levels down who outranks two of the managers above them.
- **Span.** How many people report to each manager is visible as branching width, and it is often the most useful thing in the chart: an org chart quietly reveals which managers have twenty reports and which have two.

The third of those is worth dwelling on, because it is the one people miss. A tree with a lopsided branch is telling you something structural about how the organisation is run, and it is visible without anyone computing a ratio — which is a rare thing for a chart that plots no numbers.

What it does not carry is any measure — headcount, budget, tenure — unless you deliberately add one. Which is the main opportunity in designing one: an org chart that also encodes team size or vacancy rate answers questions a plain box tree cannot.

## Four hierarchies, and how the layout changes the reading

![An inverted organization chart drawn by Highcharts](https://systergon.com/blog/figma-charts-org-chart/images/org-inverted.svg)

_**Inverted** — the same hierarchy running bottom-to-top. It is a rhetorical layout: the leadership at the bottom “supporting” the organisation. Nothing in the data changed and the reading did._

![A left-to-right tree drawn by ECharts, filed under the Tree category](https://systergon.com/blog/figma-charts-org-chart/images/org-tree-echarts.svg)

_**Left to right** — ECharts’ tree layout, filed under Tree_ rather than Org Chart. Horizontal layouts are much kinder to long names, because each node gets a line of its own instead of a box-width.

![A radial tree drawn by ECharts](https://systergon.com/blog/figma-charts-org-chart/images/org-tree-radial.svg)

_**Radial** — the root at the centre, levels as rings. It fits a large hierarchy into a square frame far better than a top-down tree, and it deliberately removes the vertical axis that readers translate into seniority._

## When an org chart is the wrong diagram

**1. The organisation is not a tree.** Matrix reporting, dotted lines, people in two teams — a strict hierarchy cannot express any of it, and the usual bodge (a dotted connector) breaks the layout algorithm rather than extending it. If dual reporting is the point, a [network diagram](https://systergon.com/blog/figma-charts-network-diagram) is the honest structure.

**2. You have more than about fifty boxes.** A full company chart is a poster: it exists to be printed and searched, not read on a slide. For a design, show two levels and a note, or make it navigable with collapsing.

**3. The question is about numbers.** Headcount by function, spans of control, vacancy rates — all of those are bar charts. The org chart shows structure; put the measurement next to it.

And a fifth situation worth naming: **when the chart is a process, not an organisation.** Approval flows, decision trees and escalation paths look like org charts and behave differently — they have conditions on the edges and often more than one route to the same node. A flowchart drawn in Figma handles that; a hierarchy chart does not.

A fourth, worth saying plainly: **when it is a design artefact rather than a chart.** Most org charts in decks are laid out by hand in Figma, with photos, brand colours and custom cards. That is a perfectly good decision — a chart engine gives you a correct tree, and hand layout gives you control over exactly the things an audience notices. Use the plugin when the hierarchy is large enough that automatic layout saves real time.

## Four layouts, and what each one is arguing

Because an org chart carries no quantity, the layout is doing all the rhetorical work. Four are available across the libraries here, and each says something different about the same organisation.

**Top-down.** The default and the most loaded: authority flows downward, the person at the top is the subject, and depth reads as distance from power. It is the right choice when the hierarchy genuinely is the message — a governance diagram, an escalation path.

**Left-to-right.** The same tree rotated, and much more practical: names get a full line each instead of a box width, deep hierarchies grow into a scrollable page rather than an unreadable strip, and the vertical status axis disappears. For any chart with more than three levels this is usually the better default.

**Radial.** Root at the centre, levels as rings. It fits far more nodes into a square frame and removes the up-and-down reading entirely — which is either a feature or a problem, depending on whether depth-as-seniority was information or noise.

**Inverted.** Leadership at the bottom, teams above. A deliberate statement about service rather than command, and one worth making only if the organisation behaves that way — a layout that contradicts everyone’s experience reads as spin rather than as design.

## Making an org chart carry more than structure

The most useful org charts answer a question beyond “who reports to whom”, and the chart has three spare channels to do it with.

**Colour for function.** Engineering, sales, operations. It answers “how is this org actually distributed?” at a glance, and it is the single highest-value addition because the tree structure alone cannot show it.

**A number in the card.** Team size under a manager’s name turns the chart into a headcount map: you can see instantly that one director covers eighty people and another covers nine. Spans of control are the finding people most often want from an org chart and least often get.

**State on the node.** Vacancies as dashed outlines, new hires as a marker, people leaving as a muted fill. A hiring plan overlaid on the structure is far more useful than either document separately — and it is a design job rather than a data one, which is why it usually happens on the canvas after inserting as SVG.

What to resist is encoding seniority as box size. Readers already read height as status; adding size compounds the two and produces a chart where a well-paid individual contributor looks like a manager of nobody.

## Building one, step by step

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

![The Figma Charts gallery filtered to the Org Chart category](https://systergon.com/blog/figma-charts-org-chart/images/step-gallery.webp)

_**1. Filter to Org Chart.** Highcharts is the only library with the category — a standard and an inverted layout._

![The Figma Charts editor with an organization chart in the preview](https://systergon.com/blog/figma-charts-org-chart/images/step-editor.webp)

_**2. The editor.** Live preview above, tabs below. Org charts grow sideways: check the width against your deepest level before styling, because that is what determines whether the boxes stay readable._

![The Data tab showing the reporting relationships behind an org chart](https://systergon.com/blog/figma-charts-org-chart/images/step-data.webp)

_**3. Parent and child.** The data is a list of relationships — each row naming a person and their manager — plus per-node details such as title and image. It is the same shape an HR export produces._

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

_**4. Configure.** Node size, level styling, the connector shape and the layout direction. Level colouring is the setting worth spending time on: it is what makes depth legible without counting rows._

![The Export tab showing code export formats](https://systergon.com/blog/figma-charts-org-chart/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-org-chart/images/step-insert.webp)

_**6. Insert.** SVG is the point for this type: every box, connector and label becomes a real Figma layer, so you can replace the boxes with your own components and keep the computed layout._

## The data shape it needs

A list of **parent-child relationships**: each row names a node and its manager, with optional per-node attributes — title, description, image, colour. There is no special editor for this type in the plugin; it is the ordinary table, and it accepts a linked data source, which means an HR export in a Sheet can drive the chart directly.

Three data conditions to check before building:

- **Exactly one root.** Two nodes with no parent produce either two disconnected trees or an error, depending on the library.
- **No cycles.** A reports to B reports to A will hang or truncate. It sounds impossible and it happens routinely in exported data.
- **Consistent identifiers.** Names are not identifiers — two people called Alex Smith collapse into one node. Use ids and carry the display name separately.

And one privacy consideration that applies to no other chart in this series: **an org chart is personal data.** Names, reporting lines and photographs in a design file get shared more widely than the source system ever would. Use roles rather than names for anything leaving the company, and remember that an inserted SVG carries the text as real, searchable layers.

## Library by library

The **Org Chart** category holds **two examples, both Highcharts** — but the family is much better represented than that suggests, because a strict hierarchy of nodes and connectors is a _tree_, and trees have their own chip.

- **Highcharts — 2 examples**, and the only true organization series: node cards with title, name, image and description, level-by-level styling, and the inverted layout. This is the one to use if you want an org chart configured rather than assembled. Commercial licence required to ship commercially.
- **ECharts — 7 tree examples, under _Tree_.** Top-down, bottom-up, left-to-right, right-to-left, radial, multiple trees and polyline edges. As org charts they give you the layouts Highcharts does not, at the cost of plain nodes rather than rich cards.
- **Nivo — no org chart**, though its hierarchy family (sunburst, treemap, circle packing) shows the same nested data as areas rather than boxes.
- **Google Charts and ApexCharts — none in this plugin.** Google’s own library has an org chart type; there are no examples of it here, so it is not available as a starting point.

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

**Colour by function, not by level.** Levels are already encoded by position, so spending colour on them is redundant. Colouring by department, discipline or location adds a second dimension the layout cannot show — and instantly answers “where is engineering in this?”

**Keep the boxes the same size.** Box size reads as importance. Unless you are deliberately encoding something — team size, budget — equal boxes prevent an accidental hierarchy of prominence within a level.

**Orthogonal connectors, thin and quiet.** Right-angled connectors read as structure; curves read as flow, which is the wrong metaphor for reporting lines. Keep them light: the boxes are the content.

**Two levels of type, no more.** Name in medium weight, role in a lighter grey at a smaller size. Adding a third line to each card doubles the width and halves the number of boxes that fit.

**Show vacancies honestly.** An empty role is a real fact about an organisation. A dashed outline with the role title says more than omitting the box, which quietly under-counts the team.

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

**Height is read as status.** Everyone reads the top of the chart as the most senior and each level down as less. In flat organisations, in matrixed ones, and anywhere with senior individual contributors, that mapping is wrong — and no amount of styling stops readers making it. If seniority does not track depth, say so in a note or use a layout without a vertical axis, such as a radial tree.

**Left-to-right order is read as rank.** Within a level, the leftmost box reads as first. The order is usually alphabetical or arbitrary; readers do not know that. Ordering deliberately — by team size, by tenure, by function — at least makes the implied ranking true.

**An org chart is always out of date.** It is a snapshot of something that changes weekly. Date it visibly, and prefer roles to names where the chart will outlive the people in it.

**Dotted lines break the model.** Matrix relationships added as secondary connectors turn a tree into a graph, and the layout algorithm will fight you. If those relationships matter as much as the solid ones, the structure is a network, not a hierarchy.

**Missing levels flatten the picture.** Data that skips a level — a person whose manager is absent from the export — attaches them further up, making a manager look like they have more direct reports than they do. Validate the tree before publishing it.

## Accessibility

**Keep the text as text.** Inserting as SVG brings names and titles in as real text layers, which makes them selectable, searchable and available to assistive technology — and this is the chart type where that matters most, because the content _is_ the text.

**Do not encode anything in colour alone.** Department colours need labels too; a legend of nine hues is a memory test, and the chart already has room for a word in each box.

**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 an org chart the table — person, role, manager — is a complete and genuinely usable substitute, which is not true of most charts.

## Common questions

### Which libraries can draw an org chart?

**Highcharts** has the only organization series in the plugin — two examples, including an inverted layout — with node cards carrying name, title, image and description. **ECharts’ seven tree examples**, under the Tree chip, cover the same job with more layout options and plainer nodes. Google Charts, Nivo and ApexCharts ship none here.

### How do I show matrix or dotted-line reporting?

You cannot, cleanly. A tree layout has one parent per node, and adding secondary connectors turns it into a graph the algorithm was not designed for. If dual reporting is a central fact, use a network diagram; if it is an exception, annotate it in text rather than drawing it.

### How many people can one chart hold?

About fifty boxes before it becomes a poster rather than a chart. For a large organisation, show the top two levels with counts (“Engineering — 84”) and let the detail live in a separate view.

### What data does it need?

A list of parent-child relationships — each person and their manager — with optional title, image and description per node. Exactly one root, no cycles, and stable identifiers rather than names.

### Should the chart use names or roles?

Roles for anything that will outlive the current team or leave the company; names for internal, dated documents. An inserted SVG carries the text as real, searchable layers, which is worth remembering before sharing a file.

### Can I encode team size or budget?

Yes, and it is the biggest improvement available to this chart: colour, box size or a number in the card can carry a measure the structure cannot. Just pick one, and label it — box size especially is read as importance whether or not you meant it.

### Should I build it in the plugin or lay it out by hand?

By hand when it is small and needs your own card design; with the plugin when the hierarchy is big enough that automatic layout saves real time. Inserting as SVG gives you a middle path: computed layout, then swap the boxes for your own components on the canvas.

### What layout should I use for a deep hierarchy?

Left-to-right. Each node gets a full line for its name instead of a box width, the chart grows down a scrollable page rather than across an unreadable strip, and the vertical status axis — which readers translate into seniority whether you meant it or not — disappears. ECharts’ tree examples include it, along with a radial layout that fits even more into a square frame.

### Does the chart stay editable in Figma?

Insert as **SVG** and every box, connector and label is a real layer — which for this type is the main event, because it lets you keep the computed tree and restyle every node. Insert as **PNG** for a flat image at twice the pixel density.

## Where to start

Open the plugin, filter to Org Chart, and load your reporting lines — then look at the widths before anything else. If one manager’s branch is three times wider than the rest, the chart has already told you something the headcount table did not, and that is usually the reason to draw one at all.

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