Designsysteme haben ein Imageproblem. Kleine Teams hören den Begriff und denken an ein Zweijahresprogramm mit fünf eigens dafür abgestellten Personen. In der Praxis nimmt bereits ein System, das auf zwei Figma-Seiten und in ein Code-Paket passt, den größten Teil der täglichen Reibung heraus.
Beginnen Sie mit Entscheidungen, nicht mit Komponenten
Ein Designsystem ist eine Menge von Entscheidungen, die Sie künftig nicht erneut treffen. Welche Abstandswerte existieren, welche Schriftgrößen existieren, wie eine primäre Schaltfläche im deaktivierten Zustand aussieht. Schreiben Sie das auf, bevor Sie etwas zeichnen. Der Wert entsteht durch die Begrenzung, nicht durch die Zahl der Komponenten. Ein Team aus drei Designerinnen und Designern mit fester Abstandsskala liefert stimmigere Arbeit als ein Team aus zehn Personen mit unbegrenzter Freiheit, weil sich die Diskussionen von Pixeln zur Struktur verlagern.
Das Minimum, das trägt
- Eine Abstandsskala mit sechs bis acht Stufen auf Basis einer Einheit von 4 oder 8 Pixeln.
- Eine Typoskala mit fünf Größen und zwei Schnitten, definiert mit Zeilenhöhe und Laufweite.
- Ein Farbsatz aus Marken-, Neutral- und Bedeutungsfarben, jeweils auf AA-Kontrast vor dem vorgesehenen Hintergrund geprüft.
- Je eine Skala für Eckenradien und Schattierung mit drei Stufen.
- Zehn bis fünfzehn Komponenten: Schaltfläche, Eingabefeld, Auswahl, Kontrollkästchen, Karte, Kennzeichnung, Navigation, Fußbereich, Dialog, Tabelle, Hinweis.
- Je eine dokumentierte Regel für Fokus, für deaktivierte Zustände und für Ladezustände.
- Eine einzige Seite Textrichtlinien: keine Ausrufezeichen in Schaltflächen, durchgängige Sie-Anrede, einheitliche Zahlen- und Datumsformate.
Das sind etwa sechs bis zehn Arbeitstage oder 5.000 bis 9.000 €. Im zweiten Projekt, das darauf aufbaut, sinkt die Designzeit um 30 bis 40 Prozent, und die Abstimmungen zur Übergabe, die früher eine Woche verschlangen, entfallen weitgehend.
Tokens sind die Brücke zum Code
Definieren Sie Werte einmal als Tokens in Figma-Variablen und exportieren Sie sie als CSS-Eigenschaften oder als Tailwind-Theme. Ändert sich die Markenfarbe, ändert sie sich an einer Stelle und erreicht jede Ansicht und jede Komponente. Ohne Tokens ist ein Designsystem ein Bild von Konsistenz statt eines Werkzeugs dafür. Benennen Sie Tokens nach ihrem Zweck statt nach ihrem Aussehen: Bezeichnungen wie Oberfläche-erhöht oder Text-gedämpft überstehen einen Markenwechsel, während Grau-200 und Blau-500 beim ersten Farbwechsel umbenannt werden müssen.
Ein Designsystem, das niemand pflegt, wird zur Dokumentation dessen, wie das Produkt früher aussah.
Dokumentieren Sie Zustände, nicht nur das Aussehen
Die meisten Unstimmigkeiten bei der Übergabe betreffen Zustände, die niemand gezeichnet hat. Jede interaktive Komponente braucht Standard, Hover, Fokus, Aktiv, Deaktiviert, Laden und Fehler. Jede datengetriebene Komponente braucht leer, ein Eintrag, viele Einträge und zu lange Inhalte. Das einmal zu zeichnen ist schneller, als dieselbe Frage in vier Projekten zu beantworten. Widmen Sie dem leeren Zustand besondere Aufmerksamkeit: Er ist das Erste, was neue Nutzende sehen, und das Letzte, was gestaltet wird.
Pflege in einem Team von drei Personen
- Eine benannte verantwortliche Person, die Ergänzungen freigibt, sowie eine Vertretung.
- Die Regel, dass ein Muster erst nach zweimaliger Verwendung ins System aufgenommen wird.
- Eine monatliche Durchsicht der vorgeschlagenen Änderungen von dreißig Minuten.
- Ein Änderungsverzeichnis mit Datum, damit die Entwicklung weiß, was sich wann und warum geändert hat.
Wissen, wann Schluss ist
Nicht alles gehört ins System. Einzelne Marketingseiten, Kampagnenlayouts und Experimente dürfen die Regeln brechen. Das System existiert, um die wiederkehrenden 80 Prozent mühelos zu machen, damit die verbleibenden 20 Prozent Ihre volle Aufmerksamkeit erhalten. Wenn Ihr Team gegen das System kämpfen muss, um gewöhnliche Ansichten zu bauen, ist das System falsch, nicht das Team.
Prüfen Sie es einmal jährlich am tatsächlichen Produkt. Entfernen Sie Komponenten, die niemand nutzt, nehmen Sie organisch entstandene Muster auf und halten Sie das Ganze so klein, dass eine neue Designerin oder ein neuer Designer es an einem Nachmittag durchlesen kann. Ein System, dessen Einarbeitung eine Woche dauert, wird ab der zweiten Woche umgangen – und dann pflegen Sie zwei Systeme statt eines.
