paletta

INTEGRATION

Figma Variables to CSS and Tailwind

Figma Variables let a design team define color tokens once and reference them across layers and components, with values that switch by mode. The hard part is the handoff: the same colors then have to be typed into CSS custom properties or a Tailwind v4 @theme block by hand, and the two copies drift. Paletta's Figma plugin writes a palette into a Variables collection and produces the matching code from the same values, so design and code start identical.

Updated 2026-09-24

How it works

  1. Generate a palette

    Start from a seed color in Paletta or directly in the plugin. Every step is computed in OKLCH and checked for contrast.

  2. Push to Figma Variables

    The plugin creates or updates a Variables collection, with Light and Dark modes when the palette has both.

  3. Copy the matching code

    Take the same palette as CSS custom properties, a Tailwind v4 @theme block, or a DTCG tokens.json. In the plugin, CSS and Tailwind are free and DTCG is Pro.

  4. Push again after a change

    Variables are matched by name, so regenerating and pushing updates the existing collection instead of creating duplicates.

Export

Same palette as a Tailwind v4 @theme block (illustrative)

Copy and paste directly into your project.

Tailwind v4

@theme {
  --color-primary-50: oklch(0.97 0.02 262);
  --color-primary-500: oklch(0.55 0.22 262);
  --color-primary-900: oklch(0.29 0.11 262);
}

Frequently asked questions

Figma Variables are reusable design tokens, color, number, string, or boolean, defined once in a Figma file and referenced across layers and components, with support for switching values by mode, most commonly light and dark.

Yes, when the palette comes from Paletta. The plugin pushes the palette into Figma Variables and gives you the same values as CSS custom properties, a Tailwind v4 @theme block, or DTCG JSON, so both sides share one source.

One-way today. Paletta pushes into Figma Variables; edits made directly to those Variables in Figma are not read back. Treat Paletta as the source: change the palette there and push again.

Figma Variables require a paid Figma seat; the feature isn't available on Figma's free tier. Paletta's plugin works with any Figma plan that has Variables enabled.

Try it on your own colors

Generate a validated palette, then export it in the format above.