Bez designového systému dělá každý designér a vývojář malá rozhodnutí sám: trochu jiná modrá, nový styl tlačítek, jiná hodnota mezer. Po roce má produkt desítky téměř duplikátů. Systém návrhu nahrazuje tato opakovaná rozhodnutí sdílenými rozhodnutími.
Většina návrhových systémů má tři vrstvy. Tokeny návrhu jsou pojmenované hodnoty, jako je color.primary, space.4 nebo motion.duration.short, které ukládají nezpracovaná rozhodnutí. Komponenty, jako jsou tlačítka, vstupy, karty a dialogy, jsou sestaveny z těchto tokenů a zahrnují každý stav. Pokyny dokumentují, jak používat jednotlivé komponenty, jak psát štítky a zprávy a jaká pravidla přístupnosti platí.
Návrhový systém žije na dvou místech: v nástroji pro návrh, jako knihovna komponent a v kódu, když vývojáři instalují balíčky. Udržet tyto dva v synchronizaci je nejtěžší část. Když kódované tlačítko přestane odpovídat navrženému, lidé přestanou systému důvěřovat.
Pohyb také patří do systému. Trvání, náběhové křivky a nastavení pružin mohou být tokeny a interaktivní komponenty potřebují definované chování pro visení, stisknutí, načítání a přechody. ExodeUI, který vyrábíme, ukládá toto chování do jednoho otevřeného souboru se stavy a fyzikou pružiny, takže stejná komponenta hraje v React, Vue, SwiftUI, Flutter a dalších frameworkech.
Mezi dobře známé veřejné příklady patří Material Design společnosti Google, Pokyny pro lidské rozhraní společnosti Apple, Carbon společnosti IBM a Polaris společnosti Shopify. Jejich čtení je dobrý způsob, jak zjistit, jak je organizován vyspělý systém.