Guida

Design token, spiegati con file reali

Un design token è una decisione di design con un nome: un colore, una spaziatura, una dimensione del font. Salvato una volta, usato ovunque, dallo strumento di design e dal codice.

Perché i token contano

Senza token, il blu dei tuoi pulsanti è scritto nel file di design, poi di nuovo nel CSS, poi di nuovo nell'app. Se lo cambi una volta, devi ritrovarlo ovunque. Con i token, cambi color.brand e ogni punto che lo usa si aggiorna.

Com'è fatto un file di token

Il W3C Design Tokens Community Group definisce un formato JSON in cui ogni token ha un $value e un $type.

{
  "color": {
    "brand": { "$value": "#2F5BEA", "$type": "color" },
    "ink":   { "$value": "#121214", "$type": "color" }
  },
  "space": {
    "4": { "$value": "16px", "$type": "dimension" }
  }
}

Le stesse decisioni, trasformate in variabili CSS che il browser può usare:

:root {
  --color-brand: #2F5BEA;
  --color-ink: #121214;
  --space-4: 16px;
}

Come Kalka usa i token

  • Una cartella: ogni progetto ha una cartella design-system/ con tokens.json nel formato W3C e tokens.css accanto.
  • Usati sul canvas: quando scegli un colore o una spaziatura nel pannello design, scegli un token, e il CSS usa la variabile.
  • Versionati con Git: una modifica al colore del brand è un commit che puoi rivedere, come qualsiasi modifica al codice.

Kalka è in sviluppo ed è open source. La struttura delle cartelle qui sopra viene dalla nostra specifica di prodotto.