Senza un sistema di progettazione, ogni designer e sviluppatore prende piccole decisioni per conto proprio: un blu leggermente diverso, un nuovo stile di pulsante, un altro valore di spaziatura. Dopo un anno il prodotto presenta decine di quasi-duplicati. Un sistema di progettazione sostituisce quelle decisioni ripetute con altre condivise.
La maggior parte dei sistemi di progettazione ha tre livelli. I token di progettazione sono valori denominati, come color.primary, space.4 o motion.duration.short, che memorizzano le decisioni grezze. I componenti, come pulsanti, input, schede e finestre di dialogo, sono costruiti da questi token e includono ogni stato. Le linee guida documentano come utilizzare ciascun componente, come scrivere etichette e messaggi e quali regole di accessibilità si applicano.
Un sistema di progettazione vive in due posti: nello strumento di progettazione, come libreria di componenti, e nel codice, come pacchetto installato dagli sviluppatori. Mantenere questi due sincronizzati è la parte più difficile. Quando il pulsante codificato non corrisponde più a quello progettato, le persone smettono di fidarsi del sistema.
Anche il movimento appartiene al sistema. Le durate, le curve di andamento e le impostazioni di molla possono essere token e i componenti interattivi necessitano di un comportamento definito per il passaggio del mouse, la pressione, il caricamento e le transizioni. ExodeUI, che creiamo, memorizza quel comportamento in un file aperto con stati e fisica primaverile, quindi lo stesso componente viene riprodotto in React, Vue, SwiftUI, Flutter e altri framework.
Esempi pubblici ben noti includono Material Design di Google, Human Interface Guideline di Apple, Carbon di IBM e Polaris di Shopify. Leggerli è un buon modo per vedere come è organizzato un sistema maturo.