How do I export from ChromaBrew to Figma?

Two ways. Fastest: use the free ChromaBrew Figma plugin — enter a hex (or select a shape and let the plugin read its fill) and press Generate to create native Figma variables with Light and Dark modes. Alternative: open the generator's Export panel, pick Figma Tokens, copy the JSON, and paste it into the Tokens Studio plugin in Figma.

How do I install the ChromaBrew plugin into Figma?

In Figma desktop, go to Plugins → Development → Import plugin from manifest and select the figma-plugin/manifest.json file from the ChromaBrew repository. A Figma Community listing is on the way; until then the development import gives you the full v1 plugin with one local variable collection per color.

What Figma variables does it create?

One collection named after your color (for example “ChromaBrew #47003A”) with 49 variables: scale/50–950 (the 11-step perceptual ramp), palette/* (harmony swatches by role), and semantic/* (background, surface, foreground, primary, success, warning, danger and every other token) with different Light and Dark mode values. Re-running with the same color updates in place — no duplicates.

Does it work with Tokens Studio and Figma Dev Mode?

Yes. The Figma Tokens export is Tokens Studio JSON — paste it straight into the Tokens Studio plugin. For Dev Mode handoff, copy the same system as CSS variables, Tailwind CSS v4 @theme, or shadcn/ui tokens from the Export panel, so engineers get inspect-ready code that matches the Figma variables.

Is the Figma export free?

Yes — the Figma Tokens export and the Figma plugin are both free with no account required. The generator runs in your browser; the plugin runs offline inside Figma and transmits nothing.

Can I go from Figma back to code?

Yes — that is the Figma-to-code loop this page exists for. Design in Figma with the variables, then open the same seed color in the ChromaBrew generator and copy production CSS, Tailwind, or shadcn/ui code. Variables and code derive from the same engine, so they stay in sync instead of drifting.

Figma plugin · Figma Tokens · Figma to code

From one color to Figma variables.

ChromaBrew is a Figma color palette generator and design system generator: turn any brand color into an accessible 50–950 scale, harmony palette, and semantic design tokens — then bring them into Figma as native variables, Tokens Studio sets, or Dev Mode-ready code. Free, no sign-up, runs offline inside Figma.

Open the generator Install into Figma Export to Figma

Three ways into Figma

Figma plugin → native variables

Install into Figma once. Enter a hex or select a shape — Generate creates scale, palette and semantic variables with Light & Dark modes. Offline, free, updates in place.

Install into Figma

Tokens Studio → paste JSON

Prefer Tokens Studio? The Export panel's Figma Tokens JSON pastes straight in: scale, palette and semantic tokens as importable sets.

Export to Figma

Dev Mode → copy code

Figma to code without drift: copy the same system as CSS variables, Tailwind v4 @theme, or shadcn/ui tokens for inspect-ready handoff.

Export code

Install into Figma

The free Figma plugin: a hex in, variables out.

The plugin runs ChromaBrew's real design-system engine locally inside Figma — no network access, your colors never leave the file. One collection per color, 49 variables, Light and Dark modes, idempotent re-runs.

Open Figma desktop and choose Plugins → Development → Import plugin from manifest.
Select figma-plugin/manifest.json from your ChromaBrew checkout.
Open the ChromaBrew plugin, enter a hex — or select a shape first and the input prefills from its solid fill.
Press Generate: one “ChromaBrew #…” collection appears with Light and Dark modes and 49 variables.

Developer import today; a one-click Figma Community listing is in progress. The plugin manifest lives at figma-plugin/manifest.json in the repository — import it via Plugins → Development → Import plugin from manifest.

Export to Figma

Paste Tokens Studio JSON in seconds.

Already living in Tokens Studio? Skip the plugin: the generator's free Figma Tokens export is purpose-built JSON for its import-from-JSON flow.

In the generator, open the Export panel and pick Figma Tokens.
Copy the JSON (or download figma-tokens.json).
In Figma, open Tokens Studio → import from JSON → paste. Your scale, palette and semantic tokens land as Tokens Studio sets.

Try it in the generator

Figma to code

Variables in Figma, matching code in Dev Mode.

Tokens and code derive from the same engine, so handoff never drifts. Copy CSS variables for any stack, a Tailwind CSS v4 @theme block, shadcn/ui theme tokens, or W3C DTCG JSON — free, from the same Export panel as the Figma JSON.

Export CSS & Tailwind Browse all free color tools

FAQ

Figma questions, answered

How do I export from ChromaBrew to Figma?: Two ways. Fastest: use the free ChromaBrew Figma plugin — enter a hex (or select a shape and let the plugin read its fill) and press Generate to create native Figma variables with Light and Dark modes. Alternative: open the generator's Export panel, pick Figma Tokens, copy the JSON, and paste it into the Tokens Studio plugin in Figma.
How do I install the ChromaBrew plugin into Figma?: In Figma desktop, go to Plugins → Development → Import plugin from manifest and select the figma-plugin/manifest.json file from the ChromaBrew repository. A Figma Community listing is on the way; until then the development import gives you the full v1 plugin with one local variable collection per color.
What Figma variables does it create?: One collection named after your color (for example “ChromaBrew #47003A”) with 49 variables: scale/50–950 (the 11-step perceptual ramp), palette/* (harmony swatches by role), and semantic/* (background, surface, foreground, primary, success, warning, danger and every other token) with different Light and Dark mode values. Re-running with the same color updates in place — no duplicates.
Does it work with Tokens Studio and Figma Dev Mode?: Yes. The Figma Tokens export is Tokens Studio JSON — paste it straight into the Tokens Studio plugin. For Dev Mode handoff, copy the same system as CSS variables, Tailwind CSS v4 @theme, or shadcn/ui tokens from the Export panel, so engineers get inspect-ready code that matches the Figma variables.
Is the Figma export free?: Yes — the Figma Tokens export and the Figma plugin are both free with no account required. The generator runs in your browser; the plugin runs offline inside Figma and transmits nothing.
Can I go from Figma back to code?: Yes — that is the Figma-to-code loop this page exists for. Design in Figma with the variables, then open the same seed color in the ChromaBrew generator and copy production CSS, Tailwind, or shadcn/ui code. Variables and code derive from the same engine, so they stay in sync instead of drifting.