Architettura dei token di progettazione semantica: token globali, semantici e componenti
Come strutturare i token di progettazione in tre livelli, supportare temi e più marchi e inviarli al web, iOS e Android utilizzando il formato W3C DTCG.
Punto chiave
I sistemi di progettazione più maturi utilizzano tre livelli di token: globale (valori grezzi come blue-600), semantico (scopo, come color.action.primary) e componente (usi specifici, come button. background). I componenti fanno riferimento ai token semantici, i token semantici fanno riferimento a quelli globali e i temi o i marchi scambiano solo il livello semantico. Archiviali nel formato W3C DTCG e genera il codice della piattaforma con uno strumento di creazione.
I tre livelli
Material Design descrive tre classi di token: riferimento, sistema e componente. Molti team li chiamano globali, semantici e componenti. I nomi differiscono, ma l’idea è la stessa: separare i valori grezzi dalle decisioni su come vengono utilizzati.
- Globale (riferimento): ogni valore grezzo nel sistema, come blu-600, spazio-4, dimensione carattere-16, primavera-gentile.
- Semantico (sistema): a cosa serve un valore, ad esempio color.text.primary, color.action.primary, motion.enter.
- Componente: come un componente utilizza il sistema, ad esempio button. background o dialog.motion.open.
Perché i token semantici sono importanti
Se un pulsante utilizza direttamente blue-600, ogni modifica al tema significa modificare ogni componente. Se utilizza color.action.primary, modalità scura, contrasto elevato o un nuovo marchio, cambia solo ciò a cui punta color.action.primary. Material nota che i token consentono di applicare una tavolozza ad alto contrasto o di modificare la scala del tipo a livello di sistema esattamente in questo modo.
Temi e molteplici marchi
Per i prodotti multimarca o white label, mantieni un set di token semantici e componenti e una tavolozza globale per marchio. Ogni tema è una mappatura da token semantici a valori globali. La prima versione stabile della specifica W3C Design Tokens (2025.10), rilasciata nell'ottobre 2025, ha aggiunto temi e supporto multimarca, spazi colore moderni come Display P3 e OKLCH, alias e riferimenti a livello di componente.
Anche i token di movimento appartengono a questo contesto
Duration, curve di allentamento e molle seguono gli stessi livelli. Un token globale potrebbe essere delicato primaverile con la sua rigidità e smorzamento; un token semantico motion.enter punta ad esso; un token componente sheet.motion.open punta a motion.enter. Aggiungi un tema a movimento ridotto che riassocia i token di movimento a brevi dissolvenze.
Spedizione di token su ogni piattaforma
Conserva i token in un repository come DTCG JSON, l'unica fonte di verità. Uno strumento di creazione come Style Dictionary li trasforma in variabili CSS, Swift, Kotlin, Flutter o altri formati. Gli strumenti di progettazione che leggono lo stesso formato possono rimanere sincronizzati e gli strumenti di codifica AI possono leggere direttamente JSON.
- Fonte della verità: DTCG JSON in Git, rivisto come codice
- Costruisci: trasforma su ogni piattaforma ad ogni modifica
- Sincronizzazione dello strumento di progettazione: importazione o plug-in, mai valori copiati manualmente
- Linting: proibisce valori grezzi nei componenti
Principi chiave da ricordare
- Tre livelli: globale (valori), semantico (scopo), componente (utilizzo)
- I componenti fanno riferimento a token semantici, mai a valori grezzi
- Temi e marchi rimappano il livello semantico
- Il formato W3C DTCG ha raggiunto la sua prima versione stabile (2025.10) nell'ottobre 2025
- Includi token di movimento e un tema a movimento ridotto
Domande frequenti
Fonti
- Design tokens overview — Material Design 3
- Design Tokens specification reaches first stable version — Gruppo comunitario dei token di progettazione W3C
- Design Tokens Community Group — designtokens.org
- Style Dictionary — styledictionary.com