Figma Tokens Export

Export your palette as Tokens Studio JSON for Figma.

Name

Token group name

Include description per token

Output is compatible with Tokens Studio (formerly Figma Tokens).

{
  "brand": {
    "primary": {
      "value": "#6366f1",
      "type": "color"
    },
    "accent": {
      "value": "#ec4899",
      "type": "color"
    },
    "surface": {
      "value": "#f5f5f5",
      "type": "color"
    }
  }
}

Loading tool...

What is Figma Tokens Export?

Convert your color palette to Figma Tokens JSON, compatible with the Tokens Studio plugin. Perfect for syncing design tokens between code and Figma.

Frequently asked questions

+Which plugin is this for?

Tokens Studio for Figma (formerly Figma Tokens). The JSON output drops directly into the plugin.

+Can I include descriptions?

Yes — toggle 'include description' to attach a note to each token.

+What's the token group name for?

It's the top-level namespace for your tokens in Figma (e.g. 'brand', 'semantic').

Related tools

Tailwind Config Generator

Convert your palette to a Tailwind CSS config in one click.

exportTry it →

CSS Variables Generator

Turn your palette into CSS custom properties with one click.

exportTry it →

SCSS Variables Generator

Generate SCSS variables and maps from your palette.

exportTry it →