Design Token Formatter

Figma JSON -> CSS custom properties

format: -

Paste the JSON exported from Figma Variables and get formatted CSS custom properties for your theme. With grouping by token type and a customisable prefix.

Variable prefix Selector Separator Group comments Resolve references

JSON input

CSS output

CSS output will appear here

Waiting for input

Design tokens are the building blocks of a design system. Figma Variables can be exported as standard JSON, but converting them to CSS custom properties for a WordPress theme requires transformation.

This formatter:

Converts Figma JSON to CSS custom properties in :root { --token: value; }
Supports colour tokens (HEX, RGB, RGBA), numeric (px, rem) and string types
Allows a custom prefix (--theme-, --brand-)
Groups tokens by category (colors, spacing, typography, borders)
Generates both the :root CSS block and SCSS variables as a map