Uten et designsystem tar hver designer og utvikler små avgjørelser på egen hånd: en litt annerledes blå, en ny knappestil, en annen avstandsverdi. Etter et år har produktet dusinvis av nesten duplikater. Et designsystem erstatter de gjentatte beslutningene med delte.
De fleste designsystemer har tre lag. Designtokens er navngitte verdier, for eksempel color.primary, space.4 eller motion.duration.short, som lagrer de rå beslutningene. Komponenter, som knapper, innganger, kort og dialogbokser, er bygget fra disse tokenene og inkluderer alle tilstander. Retningslinjer dokumenterer hvordan du bruker hver komponent, hvordan du skriver etiketter og meldinger, og hvilke tilgjengelighetsregler som gjelder.
Et designsystem bor to steder: i designverktøyet, som et komponentbibliotek, og i kode, som en pakke utviklere installerer. Å holde disse to synkronisert er den vanskeligste delen. Når den kodede knappen ikke lenger samsvarer med den utformede, slutter folk å stole på systemet.
Bevegelse hører også hjemme i systemet. Varigheter, lette kurver og fjærinnstillinger kan være symboler, og interaktive komponenter trenger definert oppførsel for sveving, press, lasting og overganger. ExodeUI, som vi lager, lagrer atferden i én åpen fil med tilstander og fjærfysikk, så den samme komponenten spiller i React, Vue, SwiftUI, Flutter og andre rammeverk.
Kjente offentlige eksempler inkluderer Googles Material Design, Apples Human Interface Guidelines, IBMs Carbon og Shopifys Polaris. Å lese dem er en god måte å se hvordan et modent system er organisert.