Fără un sistem de design, fiecare designer și dezvoltator ia singur decizii mici: un albastru ușor diferit, un stil nou de buton, o altă valoare de spațiere. După un an, produsul are zeci de aproape duplicate. Un sistem de proiectare înlocuiește acele decizii repetate cu unele comune.
Majoritatea sistemelor de proiectare au trei straturi. Jetoanele de design sunt valori numite, cum ar fi color.primary, space.4 sau motion.duration.short, care stochează deciziile brute. Componentele, cum ar fi butoanele, intrările, cardurile și dialogurile, sunt construite din acele jetoane și includ fiecare stare. Orientările documentează cum să utilizați fiecare componentă, cum să scrieți etichete și mesaje și ce reguli de accesibilitate se aplică.
Un sistem de proiectare trăiește în două locuri: în instrumentul de proiectare, ca bibliotecă de componente și în cod, ca instalație de dezvoltatori de pachete. Menținerea celor două sincronizate este cea mai grea parte. Când butonul codificat nu se mai potrivește cu cel proiectat, oamenii nu mai au încredere în sistem.
Mișcarea aparține și sistemului. Duratele, curbele de relaxare și setările de arc pot fi simboluri, iar componentele interactive au nevoie de un comportament definit pentru hover, apăsare, încărcare și tranziții. ExodeUI, pe care îl facem, stochează acel comportament într-un singur fișier deschis cu stări și fizica primăverii, astfel încât aceeași componentă este redată în React, Vue, SwiftUI, Flutter și alte cadre.
Exemple publice bine-cunoscute includ Material Design de la Google, Ghidul pentru interfața umană de la Apple, Carbon de la IBM și Polaris de la Shopify. Citirea lor este o modalitate bună de a vedea cum este organizat un sistem matur.