When should I use this instead of the design token generator?

The document shape is the same. The difference is naming: here you type each token name, while the palette-based generator derives positional keys such as brand-1 from the swatch order.

What if two rows have the same name?

The later one wins, because JSON objects cannot hold duplicate keys. Name collisions are worth checking before the document leaves the tool.

Does the output need the dollar prefix?

The generator writes value and type. The current draft of the format module uses $value and $type, so add the prefix if your import expects the newer spelling.

Can it export other token types?

No. Every entry is declared as a color. Spacing, typography and numeric tokens are outside the scope of this page.

Does the case of the names matter?

Only to the destination — the keys are written exactly as typed, so kebab-case and camelCase round-trip alike. What matters is matching the vocabulary the library already uses, since the point is to transcribe names rather than invent them.

Figma Token Generator

figma

{
  "color": {
    "primary": {
      "value": "#3B82F6",
      "type": "color"
    },
    "danger": {
      "value": "#EF4444",
      "type": "color"
    }
  }
}

You Might Also Need

Design Token Generator

Export a palette as W3C design tokens

Color Token Generator

Generate design tokens for any color

Shadcn/ui Color Exporter

Export shadcn/ui CSS variables

Style Dictionary Format Generator

Export tokens in Style Dictionary format

The figma token generator turns a list of named colors into a token JSON document, so a palette can be exported to Figma with the names you choose rather than positional keys.

What is Figma Token Generator?

The figma token generator is a two-column tool: a list of name-and-colour rows on the left, and the JSON document they produce on the right. It starts with two rows, primary and danger, and the Add button appends further rows named color plus a number, seeded with a random colour. Every row has a text field for the name, a colour field for the value and a delete button, and the JSON regenerates as you type.

What comes out is a small document with a single color group, and one entry per row keyed by the name you supplied. Each entry carries the value as an upper-case hex string and the type declared as color. That shape is the design-token interchange format: because each token declares its type, a consuming pipeline knows it is dealing with a colour and can transform it for whatever target it is writing, instead of passing a bare string along and guessing.

The naming field is what separates this tool from a palette exporter.
Palette exporters generate their keys from position — brand-1, brand-2 and so on — which is fast and produces a document that says nothing about meaning; here the key is whatever you type, so primary and danger arrive as primary and danger, and the token file reads like the naming convention the product already uses.
That makes it the right tool when the names exist already, in a brand guide or a Figma library, and the job is to transcribe them rather than invent them.

Match the names to how the receiving library is organised before you copy. A Figma variable collection typically groups colours by theme and role, so prefixing names consistently — surface, surface-muted, accent, accent-strong — keeps the import predictable and avoids a flat list of unrelated keys. There is no renaming inside the tool, so a name typed badly is a name regenerated; the document is small enough that re-typing a key is rarely a problem.

Two details to check against your pipeline. The emitted keys are the bare value and type pair, while the current draft of the format module prefixes them with a dollar sign as $value and $type; many tools accept both, while newer releases built on the draft expect the prefix, and a missing value error usually means that single character. There is also no validation beyond well-formed JSON: an empty name field produces an entry with a blank key, and duplicate names collapse into one entry because JSON objects cannot repeat a key.

What the tool does not cover is everything else a design system eventually needs — spacing, radii, typography, nesting and theme variants — and every entry it writes is typed as a colour.
Used as a figma token generator for a palette, though, it does the one job cleanly: name the colours, copy the figma tokens json, and the figma color tokens are ready to import as figma variables colors with the names already in place — which is what makes it the shortcut when the task is to export colors to figma from a design system that already has a vocabulary.

How to use Figma Token Generator

Replace the default primary and danger names with the token names your library uses.
Set each value with the colour field, or add further rows with Add.
Copy the JSON document from the panel on the right.
Add the dollar prefix to value and type if your pipeline expects the current draft spelling.

When to use Figma Token Generator vs related tools

Use this when you already have token names and need them exported as a colour token document. Use the design token generator when you would rather start from a palette and accept positional keys, or the CSS variables exporter when you only need custom properties. A lighter name-and-value document for JavaScript is the color JSON generator's output, and a theme object written for a component library is what the chakra ui color exporter produces.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.