# Your Chart, Your Design System _August 18, 2026 · 11 min read · by Systergon_ > Your design system covers the button, the input, the card and the toast. Then there is the chart — a picture somebody drew, in colours from a colour picker, in whatever font was on the artboard that day. How to pull Figma colour variables and text styles into charts, why the plugin picks the variable collection it does (and how to name yours so it wins), the precedence rule behind “why did my colours change?”, why a role-based design system rarely makes a usable eight-series palette, and how to push the resolved values back out as CSS, SCSS, Tailwind or W3C design tokens. Tags: Figma, Charts, Design Systems, Design Tokens, Plugin URL: https://systergon.com/blog/figma-charts-design-system-colors-typography-tokens --- [Install Figma Charts — it’s free to try →](https://www.figma.com/community/plugin/1345221583582136577/figma-charts) [Read the help centre →](https://systergon.com/figma-charts/help) Your design system covers the button, the input, the card, the modal, the empty state and the toast. Every one of them pulls its colour from a variable and its type from a text style, and when the brand blue changes, all of them change. Then there is the chart. The chart is a picture somebody drew, in colours they got from a colour picker, in whatever font was on the artboard that day. It is the one component in the file that does not know the design system exists — and it is usually the one component with eight colours in it. This is how to stop that: pull your Figma colour variables and text styles into charts, save the result so the whole team picks it from one list, and push the resolved values back out as design tokens your engineers already consume. ![The Appearance group in the Figma Charts configuration panel, showing the chart dimensions, background, colour palette, chart style and typography controls](https://systergon.com/figma-charts-help/appearance-group-light.webp) ## 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 what you style is the library’s own output rather than a drawing of it. [Install Figma Charts from the Figma Community →](https://www.figma.com/community/plugin/1345221583582136577/figma-charts) Once it is installed there are two ways to open it, and the first is faster: - **Quick actions** — press **⌘/** (**Ctrl /** on Windows), type _Figma Charts_, hit Enter. - **Right-click the canvas** → **Plugins** → **Figma Charts**. Open any chart and the styling lives in the **Configuration** tab, under **Appearance**. ## Why charts fall out of the system It is not neglect. It is that a chart needs a kind of colour a design system usually has not defined. Design systems are built around _roles_: primary, surface, danger, muted, a nine-step grey ramp. That vocabulary is perfect for interface chrome and useless for a chart with eight series, because a chart needs eight colours that are **mutually distinguishable** — not eight colours that mean eight things. Most systems have exactly one that reads as “a colour” and eight that read as “grey, slightly”. So the designer opens the picker, invents seven more, and the chart becomes the one artefact in the file with unaccountable colours in it. Fixing that means two separate jobs, and it is worth naming them: - **Inheritance** — the chart should take its values from the system rather than from a colour picker. - **Extension** — the system needs a categorical palette it probably does not have yet, and the chart is where that gets designed. ## Three things you can preset — and how they differ There are three separate preset systems and they are not peers. Confusing them is the single most common source of “why did that change?” - **Colour palette** — an ordered set of colours, applied to your series in turn. Changes colours and _nothing else_. - **Chart style** — a whole saved look: gridlines, labels, spacing, typography, and _sometimes_ a palette. A superset of the above. - **Typography preset** — a complete type scale applied at once, rather than a font picked by name. A palette will never touch your gridlines. A chart style may well touch your colours. That asymmetry is the whole story of the next section. ## The rule behind “why did my colours change?” Apply a chart style and your carefully chosen colours sometimes survive and sometimes do not. That is not a bug and it is not random — there is a fixed order of precedence: 1. **A colour palette you chose yourself** beats everything else. 2. **The chart’s own colours** — a palette a chart style brought with it, or series colours you set by hand. 3. **The chart library’s default palette**, used only when nothing above applies. Two consequences worth internalising. First, if a style did recolour your chart, pick your palette again from the **Colour palette** control — because your explicit choice sits at the top of the order, it sticks from then on. Second, **a chart style that carries no palette of its own leaves your colours completely untouched**. That is deliberate: restyling one chart should not silently discard a palette chosen for the whole document. The same order applies to pie, donut and Sankey charts, which some libraries colour through a separate setting entirely. ## Getting your own colours in — automatically Mostly you do not have to do anything. When the plugin opens it reads the colour variable collections in your file and builds a palette from them, which appears in the palette list under a **Figma** group, named after the collection with **(Auto)** after it — _Brand (Auto)_, _Chart Colors (Auto)_. ![The Palettes tab of the presets manager, listing palettes grouped by where they came from — Figma, user palettes, design systems and built-in — beside a swatch editor](https://systergon.com/figma-charts-help/color-preset-picker-light.webp) It picks _one_ collection to build from, and how it picks is worth knowing, because it means you can get the palette you expected just by naming things well. Collections are scored on their name: - **“primary” or “brand”** — the strongest signal. - **“chart”, “data” or “visualization”** — next. - **“color” or “palette”**, then **“semantic” or “theme”**, then **“primitive” or “base”**. - Ties break toward the collection holding closest to **eight** variables. Which gives you a genuinely actionable trick: **make a variable collection called _Chart_ or _Data Viz_ holding the eight colours you want charts to use**, and the plugin will find it and prefer it over your grey ramp. You have documented your categorical palette as a first-class part of the system, and the tool picks it up for free. Modes are handled too. If the chosen collection has a mode whose _name contains_ “light” or “dark”, the plugin uses whichever matches the Figma theme you are working in; otherwise it uses the collection’s default mode. Naming your modes _Light_ and _Dark_ rather than _Mode 1_ and _Mode 2_ is the difference between that working and not. ## Choosing the source yourself When the automatic guess is not what you want — or you want the typography to come across at the same time — open the **Chart Style** picker and press **Import from Figma** at the foot of the list. ![The chart style picker dropdown, listing saved styles with an Import from Figma button at the bottom of the list](https://systergon.com/figma-charts-help/chart-preset-picker-light.webp) That importer gives you two tabs and a type control: - **Variables** — your colour variable collections, ordered by the same relevance scoring. - **Styles** — your colour _styles_, grouped by their name path, so a `Brand/Primary`, `Brand/Accent` set arrives as a group rather than a flat list. - A **Figma text style** to pair with them. What it saves is a **chart style**, not merely a palette: colours and typography travelling together, applying to every chart type, filed under the picker’s **Figma** tab. That is the artefact you actually want a team to share — “our charts” as one click rather than a palette plus a font plus a note in Slack. One distinction to keep straight: **only colour variables are read automatically**. Colour _styles_ are available here, where you pick them by hand. ## Binding type to your text styles The typography half is the part that most often gets skipped, and it is the half that makes a chart look like it belongs. ![The typography control with a Figma text style selected, showing the bound style name and a searchable list of the file's text styles](https://systergon.com/figma-charts-help/text-style-picker-light.webp) In the typography controls, choose a **Figma text style** instead of picking a font by name. The chart then uses the family, size and weight your system already defines, and the chart tells you which style it is bound to. You can bind different parts to different styles — a heading style on the title, a caption style on the axis labels — which is exactly how the rest of your file already works. If you would rather set a whole scale at once without binding, there are eight typography presets: the FigmaCharts default plus **Material**, **Tailwind**, **Atlassian**, **IBM Carbon**, **Apple HIG**, **Figma UI** and a **monospaced** set. Two things make this more than cosmetic: - **Fonts are loaded into Figma before the chart is inserted**, so the text arrives as real, editable text in the right typeface rather than as outlines or a substitute. - **A style the plugin cannot see will not appear.** If a text style is missing from the list, it is because the library it lives in is not published to this file — the plugin only sees what Figma exposes. The weight is where design-system type most often breaks, and the reason is mundane: **weights become Figma style names**. 400 is _Regular_, 500 _Medium_, 600 _Semi Bold_, 700 _Bold_ — and chart titles use Semi Bold unless you say otherwise. If your brand family does not ship a Semi Bold, the title alone falls back to Regular and then to whatever Figma substitutes, which is why a chart sometimes looks right everywhere except its heading. Choose a weight the family genuinely has. Two related things worth knowing. The font list in the plugin is **Figma’s own**, so anything selectable there is something Figma can render — but the _preview_ may still show a substitute, and a note appears when it does. Judge the typeface on the canvas, not in the plugin window. And if one element needs to break from the rest, open its group — **Title**, say — turn off **Use Global Typography**, and set it there while everything else keeps following the global setting. ## The 28 stock palettes, and when to use one Before you build anything, it is worth knowing what ships, because one of them is often close enough. There are **28**: - **Nine built-in** — the FigmaCharts default and a Google-styled set, plus Ocean, Forest, Sunset, Monochrome, Vibrant, Corporate and Pastel. - **Six design systems** — Material, Tailwind, Ant Design, Atlassian, IBM Carbon and Bootstrap. - **Four analysis palettes** — Tableau and D3 Set2, plus D3’s two pastel sets. - **Nine library natives** — Highcharts, Highcharts Brand and Highcharts Dark; Nivo, Nivo Category10 and Nivo Spectral; ECharts, ECharts Macarons and ECharts Vintage. That last group is more useful than it sounds. Picking a library’s own palette makes a chart look like that library’s default — which is precisely what you want when you are designing a screen to match charts already in production that nobody has restyled. Two rules govern how a palette lands on a chart: - **Order matters.** The first colour goes to the first series. Put your most important colour first rather than hoping the reader infers the emphasis. - **A short palette repeats.** Five colours across seven series means two pairs share a colour. Add swatches; do not reorder the data to hide it. ## When one series needs its own colour Palettes are positional, and sometimes position is wrong. The series that means “us” should be brand blue whether it happens to be third or seventh; the series that means “churn” should probably be the red one regardless. For that, leave the palette alone and open the **Colors** group in the configuration panel, where every series can be set individually. A colour you set by hand **sticks until you pick a different palette** — which is the behaviour you want, and also the trap: choosing a new palette afterwards is what wipes those overrides, not applying a chart style. Read that against the precedence order above and it resolves cleanly. Hand-set series colours are the chart’s _own_ colours, sitting at level two — safe from a style that carries no palette, overwritten by an explicit new palette choice at level one. So the working order is: pick the palette first, then override the one or two series that carry specific meaning, then style. Doing it the other way round loses the overrides and looks like a bug. One more control in the same group is worth a sentence, because it is the one that decides whether a chart looks pasted on. **Background** sets the chart’s own fill — and leaving it **transparent** is usually right, because the chart is going onto a surface in Figma that already has a colour from your system. A white chart background on a warm-grey card is the most common way a well-styled chart still looks foreign. ## Why your design system probably is not a chart palette Here is the uncomfortable part, and it is the reason the automatic palette is a starting point rather than an answer. The auto-detected palette aims for **eight** colours and actively adjusts them — enforcing contrast between neighbours, spreading hues apart, varying brightness — because the raw contents of a variable collection almost never work as a categorical scale. A system with a brand blue, a success green, a danger red and a nine-step grey ramp has, for charting purposes, about three usable colours. Handing that to an eight-series chart produces four greys nobody can tell apart in a legend. Categorical colour has requirements that role-based colour does not: - **Mutual distinguishability**, not contrast against a background. Two colours can each pass contrast against white and be indistinguishable from each other. - **Distinguishable at small size** — a 4px line and a legend swatch, not a 44px button. - **Order-independent meaning.** If your palette runs light-to-dark, readers will infer a ranking that is not in the data. - **Colour-blind safety.** Red and green next to each other in a legend is the classic failure, and it survives most design reviews because most reviewers can see it. The practical answer is to treat your chart palette as a deliberate addition to the system — its own variable collection, eight colours, designed to be told apart — rather than something to be scavenged from the interface ramp. Name it _Chart_, and everything in the previous section starts working for you rather than against you. ## Saving it so the rest of the team gets it A chart styled correctly once is worth nothing if the next person starts from the default. Both things you have built can be saved, and choosing between them is the decision that matters: - **Save a colour palette** when the colours are the point. A palette applies cleanly to any chart type, so it is the right unit when the same eight colours should govern bars, lines, pies and everything else. - **Save a chart style** when the layout is the point. It captures the options and typography as well — and your colours too, if you want it to. The caveat on chart styles is real: a style tuned for a bar chart may not suit a scatter. Gridline treatment, label placement and legend position do not always transfer. In practice most teams end up with **one palette and a handful of styles** — a dashboard tile style, a presentation style, a report style — rather than one style for everything. Both live in the presets manager, which has separate **Presets** and **Palettes** tabs, and both can be edited, duplicated and deleted there. **Saved presets live with the Figma file**, so anyone who opens it gets them — which is exactly right for a product file where the whole team is working, and a genuine limitation across files. There is no account-level library of styles. To carry a look into another file, export a chart that uses it and import it on the other side. Saving your own presets needs a paid plan. Applying the 28 stock palettes and the built-in styles does not. ## Pushing it back out as tokens Once the chart is right, the values in it are worth something to your engineers — and the **Export** tab will hand them over in a form they already consume. ![The Export tab with Tokens selected among the eight export formats, and a Token Format row offering CSS, SCSS, Tailwind, W3C and JSON, with CSS active and labelled Custom Properties above a preview of the generated tokens](https://systergon.com/blog/figma-charts-design-system-colors-typography-tokens/images/export-tokens-crop.webp) Five formats: - **CSS** — custom properties. - **SCSS** — variables. - **Tailwind** — a config extension to merge into your theme. - **W3C** — the standard design-token JSON that Style Dictionary and Tokens Studio read. - **JSON** — a flat object, for whatever else you have. Tokens are one of eight export formats; [From Figma to code](https://systergon.com/blog/figma-charts-export-react-vue-svelte-angular-design-tokens) covers the rest, including the config object that drops straight into an existing chart component. What comes out is not just the palette. The export carries the series colours as named entries, the font family, and the size and weight for the **title**, **data labels**, **axis** and **tooltip** separately, plus the series border. In other words, it is the chart’s whole visual contract — the things that normally get lost between a screenshot and an implementation. ## The round trip, described honestly It is tempting to describe this as a live loop. It is not one, and it is better to know that now: - **Importing copies values at that moment.** There is no live link back to the variable. Change the variable in Figma and the palette you imported keeps the old hex — import again to pick the change up. - **Exported tokens are resolved values**, not references to your variables. You get `#2F7A68`, not `{color.brand.primary}`. - **The automatic palette is re-derived when the plugin reads your file**, so it does track collection changes — but it is the palette the plugin chose, which is not necessarily the one you saved and shared. None of that undermines the workflow; it just means the source of truth stays in Figma, and the chart is a consumer of it that you refresh deliberately. Treat a saved chart style the way you treat a component: made once, updated on purpose. ## Setting a file up once Half an hour, and every chart in the file afterwards is a click: 1. **Make a variable collection called _Chart_** with eight colours designed to be told apart — not eight roles, eight _distinguishable_ colours. Name its modes **Light** and **Dark**. 2. Open the plugin and check the palette list. Your collection should be there as **Chart (Auto)**. If a different collection won, rename yours to include “chart” or “brand”. 3. Open any chart, and in the **Chart Style** picker press **Import from Figma**. Choose that collection and your body text style. 4. Style one chart properly — gridlines, label sizes, legend position — and **save it as a chart style**. That is now “our charts”. 5. Check it against a real chart with eight series and small marks, not a three-bar sample. Colours that separate at 44px can merge at 4px. 6. Export the **Tokens** once and commit them, so engineering has the same values you approved. Step five is the one people skip, and it is the one that catches the failure that would otherwise reach production — because a palette is only as good as the smallest mark you draw with it. [Install Figma Charts — it’s free to try →](https://www.figma.com/community/plugin/1345221583582136577/figma-charts) [Which chart library should you use? →](https://systergon.com/blog/figma-charts-choosing-the-right-chart-library)