Ohne Designsystem trifft jeder Designer und Entwickler selbst kleine Entscheidungen: ein etwas anderes Blau, ein neuer Knopfstil, ein anderer Abstandswert. Nach einem Jahr gibt es Dutzende Beinahe-Duplikate des Produkts. Ein Designsystem ersetzt diese wiederholten Entscheidungen durch gemeinsame Entscheidungen.
Die meisten Designsysteme bestehen aus drei Schichten. Design-Tokens sind benannte Werte wie color.primary, space.4 oder motion.duration.short, die die Rohentscheidungen speichern. Komponenten wie Schaltflächen, Eingaben, Karten und Dialoge werden aus diesen Token erstellt und umfassen jeden Status. Richtlinien dokumentieren, wie die einzelnen Komponenten verwendet werden, wie Beschriftungen und Nachrichten geschrieben werden und welche Barrierefreiheitsregeln gelten.
Ein Designsystem existiert an zwei Orten: im Designtool als Komponentenbibliothek und im Code als Paket, das Entwickler installieren. Diese beiden synchron zu halten, ist der schwierigste Teil. Wenn die codierte Schaltfläche nicht mehr mit der entworfenen übereinstimmt, verlieren die Menschen das Vertrauen in das System.
Auch Bewegung gehört ins System. Dauer, Beschleunigungskurven und Federeinstellungen können Token sein, und interaktive Komponenten benötigen ein definiertes Verhalten für Schweben, Drücken, Laden und Übergänge. ExodeUI, das wir erstellen, speichert dieses Verhalten in einer offenen Datei mit Zuständen und Federphysik, sodass dieselbe Komponente in React, Vue, SwiftUI, Flutter und anderen Frameworks abgespielt wird.
Bekannte öffentliche Beispiele sind Googles Material Design, Apples Human Interface Guidelines, IBMs Carbon und Shopifys Polaris. Sie zu lesen ist eine gute Möglichkeit, zu sehen, wie ein ausgereiftes System organisiert ist.