What are Figma Variables?

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.

What breaks without a sync tool?

A designer updates a color Variable in Figma; the codebase still has the old hex hardcoded or sitting in a separate config file, and nothing flags the drift. Someone has to notice and manually update both sides.

Is the sync one-way or two-way?

Two-way. Paletta pushes generated tokens into a Figma Variables collection, and pulls edits made to those Variables back into Paletta, so either side can be the source of a change without the other silently going stale.

Do I need a paid Figma plan for Variables?

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.

INTEGRATION

Figma Variables color sync

Figma Variables let a design team define color tokens once and reference them across layers and components, with support for switching values by mode. Without a sync layer, a Variable edited in Figma has to be manually re-entered into code, and tokens defined in code never make it back into Figma. Paletta's plugin syncs both directions.

Updated 2026-07-15

How it works

1
Generate or import a palette
Start from a seed color in Paletta, or import an existing token set.
2
Install the Figma plugin
Connect the plugin to the Figma file that should receive the tokens.
3
Push tokens to Figma Variables
Colors land in a Variables collection with light and dark modes already wired up.
4
Sync changes back
Edits made to Variables in Figma pull back into Paletta, so a designer-driven change never silently drifts from the codebase.

EXPORT

Synced collection (illustrative)

Copy and paste directly into your project.

{
  "collection": "Paletta Tokens",
  "modes": ["Light", "Dark"],
  "variables": {
    "color/primary": { "Light": "#2563EB", "Dark": "#5B8DEF" },
    "color/background": { "Light": "#FFFFFF", "Dark": "#0D1117" }
  }
}

Frequently asked questions

Related integrations

export W3C DTCG design tokens

Export a palette in the W3C Design Tokens Community Group JSON format, the interoperable spec Style Dictionary and Tokens Studio both read.

generate an accessible shadcn theme

Generate a shadcn/ui theme with every foreground and background token validated for WCAG contrast, not just previewed against live components.

Try it on your own colors

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

Sync a palette to Figma

How it works

Generate or import a palette

Install the Figma plugin

Push tokens to Figma Variables

Sync changes back