Design Token Formatter

Figma JSON -> CSS custom properties

formato: -

Incolla il JSON esportato da Figma Variables e ottieni le CSS custom properties formattate per il tema. Con raggruppamento per tipo e prefisso personalizzabile.

Prefisso variabile Selettore Separatore Commenti gruppi Risolvi riferimenti

Input JSON

Output CSS

Il CSS apparira qui

In attesa di input

Il Design Token è l'unità fondamentale di un design system. Con Figma Variables, è possibile esportare questi token in formato JSON standard, ma il passaggio alle CSS custom properties del tema WordPress richiede trasformazione.

Questo formattatore:

Converte il JSON Figma in CSS custom properties :root { --token: value; }
Supporta token di tipo colore (HEX, RGB, RGBA), numerico (px, rem) e stringa
Permette di aggiungere un prefisso personalizzato (--theme-, --brand-)
Raggruppa i token per categoria (colors, spacing, typography, borders)
Genera sia il blocco :root CSS che le variabili SCSS come mappa