Zonder een ontwerpsysteem neemt elke ontwerper en ontwikkelaar zelf kleine beslissingen: een iets ander blauw, een nieuwe knopstijl, nog een spatiëringswaarde. Na een jaar heeft het product tientallen bijna-duplicaten. Een ontwerpsysteem vervangt deze herhaalde beslissingen door gedeelde beslissingen.
De meeste ontwerpsystemen hebben drie lagen. Ontwerptokens zijn benoemde waarden, zoals color.primary, space.4 of motion.duration.short, waarin de ruwe beslissingen worden opgeslagen. Componenten, zoals knoppen, ingangen, kaarten en dialoogvensters, worden uit deze tokens opgebouwd en omvatten elke status. Richtlijnen documenteren hoe u elke component moet gebruiken, hoe u labels en berichten schrijft en welke toegankelijkheidsregels van toepassing zijn.
Een ontwerpsysteem bevindt zich op twee plaatsen: in de ontwerptool, als componentenbibliotheek, en in code, zoals pakketontwikkelaars installeren. Die twee synchroon houden is het moeilijkste deel. Wanneer de gecodeerde knop niet meer overeenkomt met de ontworpen knop, vertrouwen mensen het systeem niet meer.
Beweging hoort ook in het systeem. Duur, versoepelingscurves en veerinstellingen kunnen tokens zijn, en interactieve componenten hebben gedefinieerd gedrag nodig voor zweven, drukken, laden en overgangen. ExodeUI, dat we maken, slaat dat gedrag op in één open bestand met toestanden en veerfysica, zodat dezelfde component speelt in React, Vue, SwiftUI, Flutter en andere raamwerken.
Bekende publieke voorbeelden zijn onder meer Material Design van Google, de Human Interface Guidelines van Apple, Carbon van IBM en Polaris van Shopify. Het lezen ervan is een goede manier om te zien hoe een volwassen systeem is georganiseerd.