Utan ett designsystem fattar varje designer och utvecklare små beslut på egen hand: en lite annorlunda blå färg, en ny knappstil, ett annat avståndsvärde. Efter ett år har produkten dussintals nästan dubbletter. Ett designsystem ersätter de upprepade besluten med delade.
De flesta designsystem har tre lager. Designtokens är namngivna värden, såsom color.primary, space.4 eller motion.duration.short, som lagrar de råa besluten. Komponenter, som knappar, ingångar, kort och dialogrutor, är byggda från dessa tokens och inkluderar alla tillstånd. Riktlinjer dokumenterar hur man använder varje komponent, hur man skriver etiketter och meddelanden och vilka tillgänglighetsregler som gäller.
Ett designsystem finns på två ställen: i designverktyget, som ett komponentbibliotek och i koden, som ett paket utvecklare installerar. Att hålla dessa två synkroniserade är den svåraste delen. När den kodade knappen inte längre matchar den designade slutar folk lita på systemet.
Rörelse hör också hemma i systemet. Varaktigheter, lättnadskurvor och fjäderinställningar kan vara symboler, och interaktiva komponenter behöver definierat beteende för hovring, press, lastning och övergångar. ExodeUI, som vi gör, lagrar det beteendet i en öppen fil med tillstånd och fjäderfysik, så samma komponent spelar i React, Vue, SwiftUI, Flutter och andra ramverk.
Välkända offentliga exempel inkluderar Googles Material Design, Apples Human Interface Guidelines, IBMs Carbon och Shopifys Polaris. Att läsa dem är ett bra sätt att se hur ett moget system är organiserat.