Cosa sono i design token e perché sono importanti

I design token sono le decisioni atomiche di un sistema di progettazione, espresse come valori nominati e riutilizzabili. Invece di inserire direttamente #3b82f6 in un foglio di stile, definisca color-primary-500: #3b82f6 e faccia riferimento a quel nome ovunque. Il nome esprime il significato; il valore può cambiare senza dover aggiornare ogni riferimento.

I token riguardano ogni proprietà visiva: token di colore (color-primary-500: #3b82f6), token di spaziatura (spacing-4: 16px), token tipografici (font-size-lg: 18px, font-weight-bold: 700), token per il raggio dei bordi (radius-md: 8px), token per le ombre e token per la durata delle animazioni. Insieme, codificano il linguaggio visivo completo.

I token creano un'unica fonte di verità condivisa tra design e sviluppo. I designer definiscono i valori in Figma e gli sviluppatori li utilizzano nel codice. Quando cambia il colore del brand, aggiorna il valore di un solo token e ogni componente che lo utilizza riflette automaticamente la modifica, senza dover eseguire operazioni di ricerca e sostituzione in migliaia di file.

Senza i token, i valori di colore e spaziatura sono codificati direttamente nei fogli di stile, nei file dei componenti e nelle classi di utilità. Un colore blu può comparire come #3b82f6, rgb(59, 130, 246) e blue-500 in file diversi. Per modificare il colore del brand è necessario trovare e sostituire ogni occorrenza, con un rischio elevato di dimenticarne qualcuna.

I design token sono alla base dei sistemi multi-tema. Per la modalità scura, token semantici come color-background e color-text fanno riferimento a valori primitivi diversi a seconda del tema attivo. È sufficiente modificare una mappatura, non ogni componente. I temi chiaro e scuro condividono il codice dei componenti e differiscono solo nei valori dei token.

Per una piattaforma SaaS che serve più brand, i token consentono di personalizzare ciascun brand senza duplicare il codice. Il Brand A usa il blu come colore primario, mentre il Brand B usa il verde: cambiano solo le relative mappature dei token semantici. Il codice del componente pulsante è identico; legge color-action-primary, che viene risolto in un colore diverso per ciascun brand.

I token sono organizzati in livelli. I token primitivi sono valori grezzi: color-blue-500: #3b82f6. I token semantici esprimono un significato: color-action-primary: {color-blue-500}. I token di componente sono i più specifici: button-primary-background: {color-action-primary}. Questa gerarchia separa il «che cosa» dal «dove viene utilizzato».

I token semantici sono fondamentali per il supporto a più temi. Nel tema chiaro, color-background: {color-white}. Nel tema scuro, color-background: {color-gray-900}. I componenti fanno riferimento a color-background, non a un colore specifico. Cambiando tema vengono sostituite le mappature dei token semantici, senza bisogno di modificare i componenti.

Figma Variables, introdotte nel 2023, sono design token all'interno di Figma. I designer definiscono in Figma la stessa gerarchia di token che gli sviluppatori implementano nel codice. Strumenti come Tokens Studio for Figma o il plugin ufficiale Figma Tokens esportano le variabili di Figma in JSON; Style Dictionary le compila quindi in variabili CSS o oggetti JS.

Il W3C Design Tokens Community Group sta sviluppando un formato JSON standard per i design token. L'obiettivo è l'interoperabilità: un file di token compatibile con qualsiasi strumento di design (Figma, Sketch) e qualsiasi strumento di build (Style Dictionary, Theo, Panda CSS). Adottare il formato della specifica rende il sistema di token a prova di futuro.

I design token richiedono decisioni di governance: chi può aggiungere nuovi token (design, sviluppo o entrambi), come vengono gestiti i numeri di versione, come vengono ritirati i token deprecati e come vengono comunicate le modifiche ai team che li utilizzano. Senza governance, i sistemi di token si discostano gradualmente dallo standard: compaiono nuovi valori scritti direttamente accanto al sistema di token, vanificandone lo scopo.

Nella gerarchia dei livelli dei design token, che cosa rappresentano i token semantici?

I design token sono valori atomici denominati (colori, spaziatura, tipografia) che costituiscono il vocabolario di un design system. Creano un'unica fonte di verità condivisa tra design e codice. La gerarchia a tre livelli — primitivo (valori grezzi), semantico (significato), componente (utilizzo specifico) — abilita il supporto a più temi e più brand. Figma Variables e la specifica W3C Design Tokens favoriscono la sincronizzazione tra design e sviluppo. La governance dei token mantiene il sistema coerente nel tempo.