# How do I export design tokens?

> Choose Tokens in the Export tab. Your chart's colours and typography come out as CSS custom properties, SCSS variables, a Tailwind config, W3C design tokens, or plain JSON.

## Before you start

- A chart whose colours and type you have already settled.

> **Tip:** This closes the loop with your design system: pull your palette in from Figma variables, style the chart, then push the resolved values back out as tokens your engineers already consume.

> **Pro feature:** Token export needs a paid plan.

## Steps

1. Open the Export tab and choose Tokens.
2. Pick a format. CSS gives you custom properties, SCSS gives you variables, Tailwind gives you a config fragment, W3C gives you the standard design-token JSON that Style Dictionary and Tokens Studio read, and JSON gives you a flat object.
3. Press Copy or Download, and commit the result alongside the rest of your design tokens.

_Topics: tokens, design system, handoff_

---

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

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