Documentare i design tokens per il front-end
I design tokens sono gli elementi essenziali di un’interfaccia. Salesforce li definisce la Single Source of Truth da utilizzare per tutti i loroprodotti. Nella metodologia Atomic Design sono invece chiamati atomi, ovvero i building blocks alla base di elementi più complessi come molecole ed organismi.
La documentazione dei tokens deve seguire di pari passo la fase creativa di progettazione poiché l’una serve all’altra. Durante il corso che tengo su Design Systems spesso emergono dei dubbi su questo punto perché le persone mi chiedono: “Progetto prima tutti i tokens/atomi e poi mi dedico agli elementi più complessi o viceversa? Quali vengono prima?”.
Nella mia esperienza posso dire che le due fasi vanno avanti insieme. Il processo creativo non è lineare per definizione. Sperimentiamo idee e soluzioni e al tempo stesso documentiamo i punti fermi che ci aiutano a risolvere nuovi problemi con soluzioni già esistenti.
Perché è importante documentare i design tokens
- Servono al designer per progettare una UI coerente e consistente;
- Servono al front-end dev per costruire layout in HTML e CSS, rispettando il design;
- Sono il punto di riferimento per tutti gli stakeholder di un progetto nel momento in cui si prendono decisioni di design;
Color tokens
Non sarà una sorpresa se vi dico che è fondamentale iniziare definendo i tokens relativi ai colori. La quantità di tokens di cui abbiamo bisogno è strettamente correlata alla complessità dell’interfaccia che stiamo progettando.
#1. Definire una Colors Palette
La prima cosa da fare, piuttosto scontata, sarà definire una colors palette. Questa infatti ci dice quanti colori voglio usare nel design. Quello che non ci dice però è come utilizzare questi colori.
#2. Core color tokens — guida ai colori principali
Creiamo i core color tokens assegnandoun ruolo a ciascun colore identificato nella palette. In questa fase può capitare che assegniamo un colore a più token s anche molto diversi tra loro. Non deve essere considerato un errore, anzi. Siamo sulla strada giusta, riutilizziamo invece che duplicare.
Ciascun color token è definito tramite 3 parametri:
- Token name : il nome del token, indicato con la sintassi di una variabile
- Role: cosa fa e a cosa serve questo token, è l’informazione più importante tra quelle indicate
- Value: informazioni tecniche come HEX o HSL values, sass functions, thumb di anteprima
#3. Interactive tokens
Sono i tokebs dedicati a stati interattivi degli elementi di un’interfaccia, come hover, active, focus e disabled. Anche nel loro caso valgono le stesse regole che abbiamo visto prima, ovvero possiamo usare lo stesso colore tutte le volte di cui abbiamo bisogno.
Type Tokens
Quatto proprietà definiscono un type-token:
- Font family
- Font size
- Font weight
- Line height
Ogni diversa combinazione di ciascuna di queste proprietà rappresenta un token differente. Il nome del type token è composto da 3 elementi:
[type-token-name]-[type-token-option] / [color-token]
#1. Type token name
Naming things is freaking hard diceva qualcuno. La scelta del nome è influenzata dalla funzione svolta dal token nel contesto della’interfaccia che stiamo progettando. Recentemente mi è capitato di utilizzare questi nomi:
- body — per testi di media lunghezza, dedicati al body copy;
- label — per testi brevi, in genere composti da una singola parola, utilizzati per componenti form, buttons e simili;
- caption — per testi di media/breve lunghezza, possono essere informazioni a supporto di altri componenti;
- helper — per testi di breve lunghezza utilizzati per messaggi di errore, alert, info;
- heading — per i titoli di pagina, sezioni, widget, etc;
#2. Type-token-option
Il type-token-option indica tramite un nome, un numero o una lettera (scegliete voi quello che preferite) una variante del type-token principale.
Ad esempio posso avere label-01 che definisce lo stile globale per label comuni e label-02 che definisce lo stile per label della navbar. I due token condivideranno alcune proprietà come font-family e font-weight, mentre il font-size e line-height cambieranno.
#3. Color-token
Sono quelli che abbiamo visto all’inizio di questo articolo. Basterà associare i tokens per creare tutte le varianti di cui abbiamo bisogno.
Il risultato finale sarà simile a quello di seguito:
body-01 / global-color
body-01 / global-inverse-color
body-02 / global-color
label-01 / global-color
label-02 / global-color
Sass tokens per il front-end
Un approccio più semplice prevede l’utilizzo di tool come Invision o Zeplin come strumenti di comunicazione tra il designer e il developer. Volendo adottare invece un approcio avanzato possiamo decidere di esportare i nostri tokens in formato JSON o YAML e generare files di mappe, variabili in .sass utilizzabili per il CSS (c’è un’app che lo fa, si chiama Theo ed è stata sviluppata da Salesforce).
