Tokens, Components, Patterns. Wie ein gepflegtes System Design und Code zur gleichen Sprache macht.
Kategorie · Frontend & UI
Eine Sprache für Design und Code.
Ein Design System ist mehr als eine Komponenten-Bibliothek. Es besteht aus drei Ebenen: Tokens (Farben, Abstände, Typografie als benannte Werte), Components (Button, Input, Card als wiederverwendbare Bausteine) und Patterns (wie man sie zu Layouts und Flows kombiniert).
Der Kern ist, dass dieselben Tokens in Figma und im Code gelten — ein Blau ist überall dasselbe Blau.
Was es im Betrieb bringt.
Bei Produkten, die wir über Jahre weiterentwickeln und betreiben, ist ein gepflegtes System der Hebel gegen Drift. Neue Features sehen aus wie das Bestehende, Designänderungen laufen über Tokens an einer Stelle, und Onboarding neuer Entwickler dauert Tage statt Wochen.
Der ehrliche Preis.
Ein Design System ist eine Investition, die sich erst ab einer gewissen Größe und Lebensdauer rechnet. Für ein einmaliges Projekt lohnt der Aufbau nicht. Und ein System, das niemand pflegt, wird schnell zur Sammlung veralteter Komponenten, die mehr verwirrt als hilft.