Radix Colors to Variables | Importing a palette into Figma variables

Try It Out

Above is the plugin’s actual interface — the same ui.html and code.js that run inside Figma. The parser, the live CSS validation, and the status messages are all real. One thing differs: variables are created in the page’s memory rather than in a file, so nothing survives a reload.

Open in Figma Community

The Context and the Pain

Radix Colors is roughly thirty scales of 12 steps each, in light and dark themes, plus the alpha variants. In code, wiring up the palette takes a couple of seconds. In Figma it turns into dull busywork: creating hundreds of variables by hand, configuring modes, and not fumbling a single name.

Existing plugins make you do extra work: they either create styles instead of variables, or generate all 700+ tokens at once. If your product is light-only, you’re left manually weeding out half the palette — carefully, because the names are nearly identical.

Hard Constraints

• A Figma limitation: variables only live in sRGB. Anything arriving as OKLCH or Display P3 has to be converted, with unavoidable color loss.
• Window width: thirty-odd scales, theme toggles, and settings all have to fit into a narrow 564 px frame and stay readable.

Interface Decisions

• Splitting the scenarios. Instead of one bloated screen, two tabs. Just need Gray and Blue? Pick them from the built-in library. Brought CSS straight from the Radix site? Paste it into the second tab.
• The swatch is the checkbox. Neo-brutalism runs on dense blocks, thick outlines, and hard shadows. A colored dot next to a checkbox breaks that rhythm and turns a list of thirty rows into mush, so the checkbox itself fills with the color when selected. The cost: you can’t pick a scale “by color,” only by name — the color shows up after the click.
• Live CSS validation. The plugin immediately shows which scales and modes it recognized in the pasted text. That’s the guard against a dark theme lost by accident or a truncated snippet.

How It Works Inside

• The parser: understands HEX, RGB, HSL, OKLCH, OKLAB, and Display P3, normalizing everything to sRGB.
• An honest preview: the frames drawn on canvas are swatches bound to the variables, and the dark frame gets its collection mode set explicitly through setExplicitVariableModeForCollection (code.ts:538). Without it, Figma would render both themes in the parent page’s mode — identically, that is — and the preview would lie in exactly the place it exists for.
• Appending without duplicates: on a re-run, new scales are added to the existing collection.

Limitations and Focus

The plugin is built for import only. It deliberately has no token editing and no flexible curve tuning. The tool should solve one routine task fast, without turning into a heavyweight editor.

The Outcome

Eight installs in the Figma Community. The audience is narrow — designers building a Radix-based design system specifically in Figma — and the number reflects that honestly.

Development stopped on purpose. The absence of editing isn’t an unfinished feature, it’s a boundary: stretching it inside an importer would mean ending up with a bad editor instead of a good importer. The next step is a separate product: editing the token matrix, flexible Radix scale tuning, and adding your own swatches.