Design token: la base di qualsiasi sistema scalabile

I design token sono coppie nome/valore che rappresentano le decisioni di design: colori, spaziature, dimensioni, font, animazioni. Non sono codice — sono specifiche. Il codice implementa i token, non viceversa. Questa separazione è fondamentale: quando il brand cambia, si aggiornano i token e tutto il codice che li usa si aggiorna automaticamente.

La struttura che funziona meglio ha tre livelli. Il primo livello sono i token primitivi: i valori grezzi numerici o esadecimali (blue-500 = #3b82f6). Il secondo livello sono i token semantici: i ruoli (color-action-primary = blue-500). Il terzo livello sono i component token: i valori specifici per componente (button-background = color-action-primary). I componenti usano solo il terzo livello.

Il tool più importante per gestire i token è Tokens Studio per Figma, collegato via GitHub Actions al codice. Quando il designer aggiorna un token in Figma, viene creato automaticamente un PR nel repo. Il developer lo approva, il token è nel codice. Zero email, zero 'che shade di blu era?'. Questo pipeline ha trasformato il mio flusso di lavoro con i clienti.