# How do I use my Figma variables and styles as chart colours?

> Mostly you do not have to. The plugin reads the colour variables already in your file and offers a palette built from them, under Figma in the palette list. When you want to choose the collection yourself — or bring a text style across at the same time — use Import from Figma in the Chart Style picker.

## Before you start

- Colour variables or colour styles defined in the current Figma file.

> **Note:** Importing copies the values at that moment — it does not create a live link. If a variable changes later, import again to pick the change up.

> **Tip:** The automatic palette aims for eight colours and adjusts them so adjacent series stay apart. It is a starting point built for charts, not a copy of your ramp — a design system with three greys and a blue does not make a readable eight-series chart on its own.

> **Note:** Only colour variables are read automatically. Colour styles are available through Import from Figma, where you pick them yourself.

## Steps

1. Open the colour palette list. Palettes are grouped by where they came from — Figma, My palettes, Design systems and Built-in. Anything under Figma was built from this file.
2. A palette named something like Brand (Auto) is one the plugin worked out for itself, by reading the colour variables in your file. Pick it and every chart uses your own colours.
3. It chooses one collection to build from, and it prefers the one that sounds like it holds brand colours. A collection called Brand or Primary wins, then one called Chart, Data or Visualization, then Colors or Palette. Naming a collection for what it is gets you the palette you expected.
4. It also follows modes: if your collection has a mode whose name contains light or dark, the plugin uses whichever matches the Figma theme you are in. Otherwise it uses the collection's default mode.
5. To choose the source yourself, open the Chart Style picker and press Import from Figma at the bottom of the list.
6. Pick Variables or Styles — variable collections on one tab, colour styles grouped by their name path on the other — then choose a Figma text style to go with them.
7. Save it. The result is a chart style, not just a palette: it carries the colours and the typography together, applies to every chart type, and appears under the Figma tab of the picker.

_Topics: figma variables, design system, colours_

---

Install Figma Charts: https://www.figma.com/community/plugin/1345221583582136577/figma-charts

More Figma Charts help: https://systergon.com/figma-charts/help