Carsparency-Designsystem — eine Bibliothek unter vier Produkten

Carsparency-Designsystem — eine Bibliothek unter vier Produkten | Sina Oshaghi

01Kontext

Vier Produkte, eine visuelle Sprache

Carsparency betrieb vier Produktoberflächen: eine Website für Verkäufer, eine Außendienst-App für Prüfer, ein Backoffice für Mitarbeitende und eine Plattform für Händler. Jede hat eine eigene Figma-Datei, und alle vier basieren auf einer gemeinsamen Bibliothek.

Die Designsystem-Datei dokumentiert diese Bibliothek auf elf Boards (Farbe, Typografie, Buttons, Formularfelder, Toggles, Breadcrumbs, Paginierung, Toasts, Modals, Header und Footer sowie kleine Komponenten) und einer Icon-Seite.

Carsparency-Designsystem — das Farb-Board: Primärgrün, Grau und weitere Skalen von 900 bis 50, mit 500 als Hauptstufe markiert — Abbildung 02Das Farb-Board: zwölf Skalen von 900 bis 50, die Grauskala weiter bis Weiß, und die Stufe 500 jeder Skala als Hauptwert markiert.

02Problem

Vier Zielgruppen, zwei Themes, ein Satz Bausteine

Die vier Produkte sehen bewusst nicht gleich aus. Die Verkäufer-Website ist hell und offen, die Prüf-App, das Backoffice und die Händlerplattform sind dunkel und dicht. Trotzdem sollen Verkäufer und Händler dasselbe Unternehmen wiedererkennen.

Ohne gemeinsame Bibliothek würde jede Datei ihre eigenen Buttons und Eingabefelder neu zeichnen, und die vier Produkte würden Screen für Screen auseinanderdriften.

03Struktur

Von Skalen über Komponenten zu Produkten

Farbe ist in zwölf Skalen organisiert (Primärgrün, Grau, Blau, Grün, Rot, Orange, Lila, Koralle, Blauviolett, Gelborange, Marineblau und ein Cyanblau). Jede reicht von 900 bis 50, die Grauskala läuft weiter bis Weiß, und die Stufe 500 ist als Hauptwert markiert. Die Primärfarbe der Marke, #00B86B, ist die 500 der Grünskala.

Komponenten sind als Sets aufgebaut, deren Varianten Typ, Größe und Zustand gemeinsam abdecken. Allein das Button-Set umfasst 90 Varianten: gefüllt und Outline, primär und grau, drei Größen sowie die Zustände Standard, Hover, gedrückt, deaktiviert und Laden.

Wie die Bibliothek geschichtet ist

01
FarbeZwölf Skalen, 900 bis 50, als gemeinsame Farbstyles veröffentlicht.
02
TypografieFünf Schnitte auf einem Beispiel, von Black bis Semibold Oblique.

Carsparency-Designsystem — die Button-Matrix: gefüllt und Outline, primär und grau, in drei Größen und fünf Zuständen — Abbildung 03Die Button-Matrix. Zeilen sind Typ und Größe, Spalten der Zustand, sodass eine fehlende Kombination als Lücke sichtbar wäre.

Carsparency-Designsystem — das Typo-Board: fünf Schnitte von Black bis Semibold Oblique — Abbildung 04Das Typo-Board: fünf Schnitte, von Black bei 900 bis zu einem Semibold Oblique, jeder auf demselben Beispielsatz.

04Entscheidungen

Vier Entscheidungen, die die Bibliothek tragen

Abgeleitet aus den Boards und daraus, wie die Produktdateien sie nutzen.

01
Skalen statt Palette
Jede Farbe kommt in zehn Stufen mit markiertem Hauptwert. Dichte dunkle Screens brauchen mehrere nah beieinanderliegende Töne für Flächen, Rahmen und Text, und Skalen liefern sie, ohne neue Farben zu erfinden.
Abwägung
Zwölf Skalen sind mehr Farbe, als vier Produkte streng genommen brauchen.
02
Jeden Zustand zeichnen
Buttons und Eingabefelder sind als Matrizen aus Typ, Größe und Zustand dokumentiert. Hover, gedrückt, deaktiviert, Laden und Fehler sind gestaltet, statt denen überlassen zu werden, die sie umsetzen.
03
Veröffentlichen statt kopieren
Farben und Komponenten erreichen die Produktdateien als Bibliotheksstyles und -instanzen, nicht als eingefügte Kopien, sodass eine Änderung in der Bibliothek alle vier Produkte erreichen kann.
04
Ein Satz Skalen für zwei Themes
Die helle Verkäufer-Website und die dunklen Profi-Tools greifen von entgegengesetzten Enden auf dieselben Skalen zu. So bleibt die Marke konsistent, und jede Zielgruppe bekommt die Dichte, die sie braucht.

05Lösung

Ein Zustand für jedes Bedienelement, ein Theme für jedes Produkt

Jede interaktive Komponente ist in jedem Zustand gezeichnet, den sie annehmen kann, nicht nur im Ruhezustand. Das Formularfeld-Board zeigt Standard, mit Icon, angehakt, Fehler, Hover und Dropdown, jeweils ausgewählt und nicht ausgewählt, hell und dunkel, damit niemand in der Entwicklung raten muss, wie ein Fehler im dunklen Theme aussieht.

Dieselben Skalen bedienen beide Themes. Die Website nutzt die hellen Enden der Grauskala für Flächen, die dunklen Produkte das dunkle Ende, und Primärgrün bleibt in beiden die konstante Aktionsfarbe.

Buttons: 90 Varianten
Texteingabe: 42 Varianten
Toggles und Auswahlelemente: 30 Varianten
Segmente, Paginierung, Breadcrumbs, Header, Footer, Toasts und Modals

Carsparency-Prüf-App im dunklen Theme, gebaut aus der gemeinsamen Bibliothek

Verkaufsassistent der Carsparency-Website im hellen Theme, gebaut aus derselben Bibliothek

06Ökosystem

Der Beleg, dass es genutzt und nicht nur gezeichnet wurde

Der stärkste Beleg für ein Designsystem liegt in den Dateien, die es nutzen. Frames in den Dateien Pro, Backoffice, Prüfung und Web beziehen ihre Farben alle aus denselben veröffentlichten Styles (den Skalen für Primärgrün und Grau) statt aus lokalen Kopien.

Auch ihre Komponenten stammen aus derselben Bibliothek. Texteingaben, Modals, Paginierung, Breadcrumbs, Buttons und System-Icons in den Produktdateien sind Instanzen von Bibliothekskomponenten, bis hin zu einem Toggle-Set, dessen falsch geschriebener Name in der Bibliothek und in der Prüf-App identisch ist.

07Meine Rolle

Sinas Anteil

Zusammengestellt anhand der Designsystem-Datei. Die Dateien halten nicht fest, wer sonst an der Bibliothek gearbeitet hat, und ihre Farbstyles werden aus einer Bibliotheksdatei außerhalb dieses Bestands veröffentlicht; dies ist also kein Anspruch auf alleinige Urheberschaft.

Verantwortet

Die Farbskalen und ihr Dokumentations-Board
Das Typo-Board
Komponentensets mit ihren Zustandsmatrizen: Buttons, Eingabefelder, Toggles, Segmente, Paginierung und Breadcrumbs
Muster: Toasts, Modals, Header und Footer
Die Anwendung der Bibliothek in den vier Produktdateien

Mitverantwortet

Mitgearbeitet

Kolleginnen und Kollegen aus der Entwicklung, in den Dateien nicht namentlich genannt

Die Boards sind mit Version 0.0.1 gekennzeichnet: eine frühe Fassung der Bibliothek, keine fertige.

08Ergebnisse

Was die Datei liefert

Zählungen gestalteter Arbeit, keine Ergebnisse. Ob die Entwicklung die Bibliothek als Code übernommen hat, ist nicht dokumentiert.

Komponentenvarianten: 265; Verteilt auf 15 Komponentensets; Gelieferter Output
Farbskalen: 12; Jeweils von 900 bis 50, mit markierter Hauptstufe; Gelieferter Output
Produktdateien, die sie nutzen: 4; Pro, Backoffice, Prüfung und Web; Gelieferter Output

Was geliefert wurde

Farbskalen
Typoskala
Buttons und Eingabefelder mit Zustandsmatrizen
Toggles, Segmente, Paginierung und Breadcrumbs
Toasts, Modals, Header und Footer
Icon-Seite

09Gelernt

Was diese Arbeit gelehrt hat

01
Nur die Nutzung zählt als Beweis
Eine Bibliothek verdient den Namen, wenn andere Dateien sie nutzen. Der Beleg liegt hier in den Ebenen der Produktdateien selbst, nicht in den Boards.
02
Zustände sind der teure Teil
Komponenten im Ruhezustand sind schnell gezeichnet. Die 265 Varianten sind überwiegend Zustände, und genau dort entscheidet sich die Konsistenz zwischen vier Produkten.
03
Namen reisen mit den Komponenten
Ein falsch geschriebener Komponentenname überlebt in jedem Produkt, das die Komponente nutzt. Deshalb lohnt es sich, die Benennung vor dem Veröffentlichen richtig zu machen.

Carsparency-Designsystem — eine Bibliothek unter vier Produkten

Vier Produkte, eine visuelle Sprache

Vier Zielgruppen, zwei Themes, ein Satz Bausteine

Von Skalen über Komponenten zu Produkten

Wie die Bibliothek geschichtet ist

Vier Entscheidungen, die die Bibliothek tragen

Skalen statt Palette

Jeden Zustand zeichnen

Veröffentlichen statt kopieren

Ein Satz Skalen für zwei Themes