Uden et designsystem træffer hver designer og udvikler små beslutninger på egen hånd: en lidt anderledes blå, en ny knapstil, en anden afstandsværdi. Efter et år har produktet dusinvis af næsten dubletter. Et designsystem erstatter de gentagne beslutninger med fælles beslutninger.
De fleste designsystemer har tre lag. Design-tokens er navngivne værdier, såsom color.primary, space.4 eller motion.duration.short, der gemmer de rå beslutninger. Komponenter, såsom knapper, input, kort og dialogbokse, er bygget af disse tokens og inkluderer alle tilstande. Retningslinjer dokumenterer, hvordan man bruger hver komponent, hvordan man skriver etiketter og meddelelser, og hvilke tilgængelighedsregler der gælder.
Et designsystem lever to steder: i designværktøjet, som et komponentbibliotek og i kode, som en pakke udviklere installerer. At holde disse to synkroniseret er den sværeste del. Når den kodede knap ikke længere matcher den designede, holder folk op med at stole på systemet.
Bevægelse hører også til i systemet. Varigheder, lempende kurver og fjederindstillinger kan være tokens, og interaktive komponenter har brug for defineret adfærd til svævning, tryk, læsning og overgange. ExodeUI, som vi laver, gemmer den adfærd i én åben fil med tilstande og fjederfysik, så den samme komponent spiller i React, Vue, SwiftUI, Flutter og andre rammer.
Velkendte offentlige eksempler omfatter Googles Material Design, Apples retningslinjer for menneskelige grænseflader, IBMs Carbon og Shopifys Polaris. At læse dem er en god måde at se, hvordan et modent system er organiseret.