Design system: quando conviene davvero costruirne uno

Ci chiedono un design system più o meno una volta al mese. Nella metà dei casi rispondiamo di no, o meglio: non adesso. Non perché non serva, ma perché sotto una certa dimensione costa più di quanto restituisce, e il costo si paga subito mentre il ritorno arriva dopo un anno.

Il momento in cui conviene

La soglia non è il numero di pagine, è il numero di persone che decidono. Un prodotto con un designer e due sviluppatori non ha bisogno di un sistema: ha bisogno che quelle tre persone si parlino. Il sistema serve quando le decisioni si prendono in stanze diverse e nessuno riesce più a ricordare perché quel bottone è alto quaranta pixel qui e quarantaquattro là.

In pratica: due o più squadre che lavorano sulla stessa interfaccia, oppure più prodotti che devono sembrare della stessa azienda. Sotto, un file di stili condiviso e una revisione seria bastano e avanzano.

Cosa metterci dentro, in ordine

L'errore più comune è iniziare dai componenti. I componenti sono la parte visibile, ma sono anche quella che cambia di più. Si comincia da sotto.

• Le costanti: colori, scala tipografica, spaziature, raggi, ombre. Nomi che dicono a cosa servono, non che colore sono.
• Le regole: contrasto minimo, dimensione minima di un'area toccabile, comportamento su schermo stretto.
• I componenti: solo quelli usati in almeno tre punti diversi. Gli altri restano nel prodotto dove sono nati.
• Gli esempi: come si compongono i pezzi in una schermata vera, con contenuti lunghi e casi limite.

/* i nomi dicono il ruolo, non il colore */
--surface-raised:  #111D31;
--text-secondary:  #8AA0BE;
--border-subtle:   #1B2A45;

/* non: --blu-chiaro-2, che fra un anno sarà verde */

Il costo che nessuno preventiva

Costruire il sistema è la parte facile e occupa forse un terzo del lavoro. Il resto è manutenzione: rispondere alle domande, dire di no alle eccezioni, aggiornare la documentazione quando un componente cambia, migrare i prodotti che usano ancora la versione vecchia. Se nessuno ha quel tempo assegnato in modo esplicito, il sistema smette di essere vero in circa sei mesi: la documentazione dice una cosa, il prodotto ne fa un'altra, e a quel punto tutti si fidano del prodotto.

Un design system non è un archivio di componenti. È un accordo fra persone, e come tutti gli accordi va rinnovato o decade.

Come lo impostiamo noi

Partiamo sempre da quello che esiste già: raccogliamo tutte le varianti in uso, le mettiamo su una parete e contiamo. Di solito si scopre che ci sono undici grigi, sette dimensioni di titolo e quattro bottoni che fanno la stessa cosa. Ridurre quel disordine è già metà del valore, e si ottiene in due settimane senza scrivere una riga di codice nuova.