Design und Code mit Design Tokens synchronisieren

Manchmal verlangsamt die Erstellung eines Design-Systems das Tempo in einem Startup sogar. Das liegt an der mühsamen, repetitiven Arbeit, bei der Entwickler vom Designer geänderte Werte manuell in Code übertragen müssen. Dieser Prozess muss automatisiert werden, damit sich das Team auf die wesentlichen Aspekte des Produkts konzentrieren kann.

Vereinheitlichung der Designsprache durch Tokens

Verzichten Sie darauf, Werte aus Design-Tools manuell auf Code-Variablen abzubilden. Die Einführung von Design Tokens wandelt diese Verbindung in Daten um.

1. Primitive Tokens: Definieren grundlegende Farbwerte, wie z. B. blue-500.
2. Semantische Tokens: Spezifizieren den tatsächlichen Verwendungszweck, wie z. B. action.primary.bg, und referenzieren dabei die oben genannten primitiven Tokens.
3. Mapping auf CSS-Variablen: Speichern Sie semantische Tokens als CSS-Variablen.

Auf diese Weise muss ein Entwickler den Code nicht anrühren, selbst wenn der Designer die Farbwerte ändert. Das System aktualisiert die CSS-Dateien automatisch. Definieren Sie auch die Schriftskalierung mathematisch, indem Sie Basis und Verhältnis (Ratio) im Token-Panel von Penpot eingeben. Wenn Sie die Formel $Size_{n} = Base \times Ratio^{n}$ verwenden, wird die Design-Konsistenz erzwungen.

Automatisierung der Anbindung von Penpot und GitHub

Es ist ineffizient, wenn Entwickler Design-Änderungen manuell überprüfen müssen. Da Penpot den W3C-Standard für Design Tokens einhält, ist der Aufbau einer Pipeline möglich.

1. Erstellen Sie einen Penpot-API-Schlüssel.
2. Erstellen Sie eine Datei namens penpot-export.config.js im Projektstammverzeichnis. Hier konfigurieren Sie die zu extrahierenden Tokens und den Speicherpfad.
3. Installieren Sie das Paket @penpot-export/cli und führen Sie den Befehl npx penpot-export aus.

Hunderte von Token-Werten werden im Handumdrehen in die Codebasis übernommen. Menschliche Fehler, die bei der manuellen Eingabe entstehen, verschwinden. Große Dienste wie Shopify nutzen ebenfalls solche Token-basierten Workflows, um Designs sofort und ohne Code-Änderungen zu aktualisieren.

Erfassung der Design-Änderungsabsicht durch Git-Reviews

Kommunizieren Sie Design-Änderungen nicht per Slack-Nachricht oder mündlich. Verwalten Sie sie über Git, was Entwicklern am vertrautesten ist.

1. Erstellen Sie eine .github/workflows/design-sync.yml-Datei, um den Export der Design-Tokens zu automatisieren.
2. Verwenden Sie die Aktion peter-evans/create-pull-request, um automatisch einen Pull Request (PR) mit den Änderungen zu erstellen.
3. Sobald der PR vorliegt, prüfen Sie die Commit-Nachricht style(tokens) und sehen Sie sich die Diffs während des Code-Reviews an.

Entwickler erkennen im PR sofort, welche Werte warum geändert wurden. Dies spart Zeit, die sonst für Rückfragen zur Begründung der Änderungen aufgewendet würde.

Koexistenz mit Legacy-Code

Versuchen Sie nicht, den gesamten Code auf einmal umzustellen. Ein Fallback-Ansatz, bei dem altes CSS und neue Tokens gemischt werden, ist realistischer.

1. Legen Sie die automatisch generierten Token-Dateien im Verzeichnis src/styles/tokens ab.
2. Verwenden Sie im bestehenden CSS das Format var(--new-token, #legacy-value).

Komponenten, deren Tokens noch nicht definiert sind, behalten ihre ursprünglichen Werte bei. So können Sie das System schrittweise modernisieren, ohne Angst haben zu müssen, dass das UI zerstört wird. Beginnen Sie damit, ein einzelnes kleines Farb-Token mit der Pipeline zu verbinden. Dies ist eine Möglichkeit, massive technische Schulden, die in der Zukunft entstehen könnten, bereits jetzt zu verhindern.