Un design system connette il lavoro del designer in Figma con il codice del block theme WordPress. Figma Tokens trasforma le scelte di design — colori, tipografia, spaziature — in variabili che diventano CSS custom properties nel theme.json. Il risultato: coerenza visiva garantita, aggiornamenti in un punto solo, zero drift tra design e sviluppo.
Cos'è un design system per WordPress
Un design system non è un file Figma con i componenti del sito. È un contratto tra design e sviluppo: un set di regole condivise che definiscono come ogni elemento appare e si comporta. Per WordPress, questo significa: i design tokens in Figma corrispondono esattamente alle variabili in theme.json. Quando il designer cambia il colore primario in Figma, lo sviluppatore lo aggiorna in theme.json e il cambiamento si propaga ovunque.
Senza design system, ogni pagina è un caso a sé. Il designer sceglie un padding di 24px qui e 28px là. Lo sviluppatore interpreta a occhio. Il cliente chiede una modifica e si scopre che lo stesso bottone ha tre varianti diverse sparse per il sito. Con un design system, esistono 4-6 valori di spacing, 3-5 dimensioni di testo, una palette di 8-12 colori. Tutto il sito usa solo quelli.
Figma Tokens: dal design ai dati strutturati
Il plugin Figma Tokens (ora Tokens Studio) permette di definire i design tokens come variabili in Figma: colori, font, dimensioni, spaziature, border-radius, ombre. Questi tokens si esportano come JSON strutturato. Il formato è standard e leggibile da strumenti di build.
Esempio pratico: definisci in Figma un token colors.primary con valore #1d3557. Il token viene usato in tutti i componenti Figma. Quando esporti, ottieni un JSON con la struttura dei colori. Nel tuo build, uno script trasforma quel JSON nelle variabili di theme.json. Risultato: la scelta del colore vive in un posto solo (Figma) e si propaga automaticamente nel tema WordPress.
theme.json: dove i token diventano codice
WordPress 6.5 ha esteso theme.json con supporto per: palette colori illimitata, font family e size personalizzati, spacing scale, custom CSS properties, varianti di blocco. Tutto ciò che i design tokens definiscono può essere mappato su theme.json.
La struttura chiave: settings.color.palette per i colori, settings.typography.fontSizes per le dimensioni testo, settings.spacing.spacingSizes per gli spacing. WordPress genera automaticamente CSS custom properties da queste definizioni: --wp--preset--color--primary, --wp--preset--font-size--large, ecc. I blocchi li usano nativamente.
Il workflow completo: Figma → JSON → theme.json → WordPress
Il processo automatizzato prevede quattro passaggi:
- Design: il designer lavora in Figma usando esclusivamente token per ogni scelta visiva. Nessun colore hardcoded, nessun valore arbitrario.
- Export: Tokens Studio esporta i token come JSON. Il file va nel repository Git del progetto.
- Transform: uno script Node.js (Style Dictionary o custom) trasforma i token JSON nel formato theme.json di WordPress. Mappa nomi, valori, struttura.
- Build: il CI/CD deploya il theme.json aggiornato sul sito. WordPress rigenerà automaticamente le CSS custom properties.
Ogni modifica al design parte da Figma e arriva al sito live attraverso una pipeline controllata e reversibile. Nessuna modifica manuale ai CSS, nessun valore magico nel codice.
Vantaggi concreti per agenzie WordPress
Un'agenzia che adotta design system + Figma tokens su tutti i progetti ottiene: tempi di sviluppo tema ridotti del 30-40% (i token definiscono già le regole), revisioni design più rapide (cambi un token, non 50 elementi), onboarding designer più veloce (il sistema è documentato nei token), manutenzione semplificata (aggiornare un colore = cambiare un valore).
LANGA Tools supporta l'import di design tokens per configurare automaticamente i componenti UI del toolkit — form, bottoni, cards — in linea con il design system del progetto.
Serve per un progetto singolo o solo per agenzie con molti clienti?
Anche un progetto singolo beneficia dei design tokens: il sito resta coerente, le modifiche future sono più semplici, il passaggio tra designer e sviluppatore è più chiaro. Ma il ROI è massimo per agenzie che riusano pattern tra progetti — il design system diventa un asset che accelera ogni nuovo sito.
Figma Tokens è gratuito?
Tokens Studio ha un piano gratuito che copre i casi base. Il piano Pro (a pagamento) aggiunge sincronizzazione con Git, multi-file, branching dei token. Per un'agenzia seria, il piano Pro si ripaga in meno di un mese di tempo risparmiato.
Posso usare design tokens senza Figma?
Sì. I design tokens sono un concetto, non uno strumento. Puoi definirli in un JSON a mano, in un file YAML, o in qualsiasi formato strutturato. Figma + Tokens Studio è il workflow più fluido perché il designer lavora visualmente, ma il cuore del sistema è il JSON dei token, non Figma.
Per continuare a leggere,
accedi al tuo account.
Il tuo account LANGA ti connette a tutta la Galaxy.
Articoli completi su tutti i blog Galaxy.
Un solo login, accesso ovunque.
Guadagna Leghe e sblocca contenuti premium.