Designsystem
Kurzdefinition
Ein Designsystem ist eine wiederverwendbare Sammlung von Farben, Typografie, Schaltflächen und Komponenten einer Marke, gebündelt in einem Regelwerk.
Farbpalette, Schriftarten, Schaltflächenstile, Formularfelder und Kartenkomponenten werden jeweils einmal definiert, und jede neue Seite wird aus diesen fertigen Bausteinen zusammengesetzt statt von Grund auf neu gezeichnet. Es lebt als Bibliothek in Figma und als geteiltes Komponentenset im Code.
Es begegnet Ihnen, sobald mehr als eine Seite oder ein Produkt dieselbe Marke tragen soll, oder sobald Design- und Entwicklungsteam eine gemeinsame Sprache brauchen.
Es wird oft mit einem Markenleitfaden verwechselt. Ein Markenleitfaden ist ein Dokument, das beschreibt, wie Logo und Farben zu verwenden sind; ein Designsystem geht darüber hinaus und enthält tatsächliche, einsatzbereite Code- und Designkomponenten.
Der häufigste Fehler ist, das Designsystem nur als schöne Figma-Bibliothek aufzubauen und die passenden Komponenten im Code nie zu aktualisieren; mit der Zeit driften Designdatei und das, was tatsächlich auf der Website erscheint, auseinander. Richtig ist, die Code-Komponenten als einzige verbindliche Quelle zu behandeln und einen klaren Prozess einzurichten, mit dem Sie jede Designänderung dort ebenfalls nachziehen.
Warum es wichtig ist
Jede Seite von Grund auf zu gestalten und zu programmieren kostet Zeit und erzeugt uneinheitliche Schaltflächen und Farben auf der Website. Ein Designsystem beschleunigt den Bau neuer Seiten und hält die Marke überall gleich.
Beispielszenario
Die Produkt-, Leistungs- und Kampagnenseiten eines Bodenbelagherstellers werden alle aus denselben Schaltflächen- und Kartenkomponenten gebaut, sodass eine neue Seite in Stunden statt Tagen entsteht.
