Exportieren von Designsystem-Tokens von Figma nach WordPress

Eine der größten Herausforderungen beim Betrieb einer Site oder einer Reihe von Sites in großem Umfang besteht darin, die Designkonsistenz und die Einhaltung eines Designsystems sicherzustellen. Oft lebt die Definition des Designsystems in Figma, wird aber manuell in Code implementiert. Wenn während der Entwicklung Änderungen am System oder umfangreiche Ersetzungen beim Retheming vorgenommen werden, geraten Definition und Implementierung aus dem Takt.

Um diese Herausforderung zu lösen, haben wir ein Tool entwickelt, um Designsysteme in Figma mit WordPress-Designs zu synchronisieren. Wir haben es auf unserer eigenen Website, wpvip.com, verwendet und festgestellt, dass es diesen Prozess erheblich vereinfacht und gleichzeitig Konsistenz gewährleistet.

Unser Ziel ist es, eine einzige Quelle der Wahrheit für das Designsystem zu haben, damit es keine Trennung zwischen Design und Implementierung gibt. Durch die Verwendung des Figma-Tokens-Plug-ins erstellen wir diese Single Source of Truth, bewahren alle unsere Design-Token in einem Versionskontrollsystem auf und automatisieren Aktualisierungen des Designsystems im Themencode.

Der Prozess funktioniert wie folgt:

1. Das Designsystem ist in einem Figma-Dokument definiert.
2. Wir verwenden das Figma-Tokens-Plugin, um in Figma verwendete Design-Token zu definieren.
3. Mit dem GitHub-Speicher von Figma Token exportieren wir Token in ein Repository.
4. Mit dem Tool vip-design-system-bridge fügen wir Design-Token über den benutzerdefinierten Abschnitt theme.json in WordPress ein.
5. In Code und CSS verwenden wir von WordPress generierte –-wp–custom-Klassen, um auf die Design-Token zu verweisen.

Dadurch lassen sich Änderungen am Designsystem und Redesigns einfach in den Code übertragen. Wenn Änderungen in Figma vorgenommen werden, werden sie mit Figma-Tokens synchronisiert, und wir führen das vip-design-system-bridge-Tool aus. Design-Token werden dann in der Konfiguration unseres Designs aktualisiert, ohne dass andere Code- oder CSS-Änderungen vorgenommen werden.

Wir haben ein Beispiel für ein Designsystem und ein Design zusammengestellt, um den Prozess von Figma zu WordPress zu demonstrieren. In diesem Beitrag behandeln wir die Schritte, um:

1. Erstellen Sie eine Kopie eines Beispieldesignsystems.
2. Verwenden Sie das Figma-Tokens-Plugin, um Design-Token hinzuzufügen.
3. Ändern Sie einen Farbtoken in Figma und exportieren Sie neue Designtoken.
4. Führen Sie eine lokale Kopie von WordPress mit dem lokalen Umgebungsmanager von VIP aus, um das WordPress-Beispieldesign anzuzeigen.
5. Verwenden Sie das Tool vip-design-system-bridge, um das WordPress-Design mit neuen Design-Token zu aktualisieren.

Diese Ressourcen sind ebenfalls verfügbar, um Ihnen den Einstieg zu erleichtern:

• Einfaches Design-Dokumentsystem in Figma basierend auf der Material 3 Design Kit-Vorlage.
• Satz von Design-Tokens, die zur Integration mit Figma-Tokens verwendet werden.
• Beispiel für ein WordPress-Theme, das so konfiguriert ist, dass es die vom Designsystem bereitgestellten Farben und Typografien verwendet.

Richten Sie Figma-Token ein

Wir beginnen mit dem Designer-Workflow, indem wir ein Designsystem in Figma verwenden und Design-Token exportieren.

Um Figma-Tokens zu installieren, melden Sie sich bei Figma an und besuchen Sie die Figma-Tokens-Plugin-Seite. Klicken Sie oben rechts auf die Schaltfläche „Ausprobieren“. Klicken Sie auf der nächsten Seite auf die Schaltfläche „Ausführen“. Nach der Installation steht das Plugin zur Verwendung in Figma-Dokumenten zur Verfügung.

1. Holen Sie sich eine Kopie des Designsystems

Für unser Beispiel verwenden wir ein kleines Designsystem in Figma, das auf der Vorlage Material 3 Design Kit basiert.

1. Öffnen Sie das Beispiel-Designsystem Figma. Wir erstellen eine lokale Kopie dieses Dokuments zur Verwendung mit dem Figma-Tokens-Plugin.

2. Klicken Sie auf der rechten Seite des Dokumenttitels auf den Abwärtspfeil und wählen Sie „In Ihre Entwürfe duplizieren“:

3. Klicken Sie im Popup unten auf der Seite auf die Schaltfläche „Öffnen“:

2. Verbinden Sie Figma-Token mit Design-Token

Wir haben eine Reihe von Design-Token erstellt, die mithilfe von Figma-Token in das Designsystemdokument importiert werden können. Diese Design-Token wurden mithilfe des Figma-Tokens-Plugins direkt in Figma erstellt. So verbinden Sie das Figma-Tokens-Plugin mit den vorhandenen Design-Tokens:

1. Öffnen Sie das Figma-Dokument aus dem vorherigen Schritt. Klicken Sie oben links auf der Seite auf die Hauptmenü-Schaltfläche und wählen Sie Plugins -> Figma Tokens.

2. Wählen Sie nach dem Start von Figma Tokens die Schaltfläche „Erste Schritte“. Sie sollten auf der nächsten Seite einen leeren Satz von Token sehen:

3. Klicken Sie oben im Plugin auf die Registerkarte „Einstellungen“. Klicken Sie im Abschnitt „Token-Speicher“ auf die Schaltfläche „URL“:

Klicken Sie auf die Schaltfläche „Neue Zugangsdaten hinzufügen“. Geben Sie im Feld „Name“ einen beliebigen Namen ein (z. B. Beispiel-Token). Geben Sie im URL-Feld diese URL ein:

 https://raw.githubusercontent.com/Automattic/vip-design-system-bridge/trunk/docs/design-tokens-example/tokens.json

4. Das Ergebnis sollte in etwa so aussehen:

5. Klicken Sie unter „Tokenspeicher“ auf die Schaltfläche „Lokales Dokument“. Klicken Sie im Bestätigungs-Popup auf „Ja, auf lokal festlegen“.

6. Aufgrund eines kleinen Fehlers in Figma Tokens muss die Seite aktualisiert werden, um Änderungen an den aus der URL importierten Token zu ermöglichen. Beachten Sie, dass in einem echten Designprozess Token über die Token-Speicheroption von GitHub synchronisiert werden können – dieser Schritt ist nur für dieses Lernprogrammbeispiel erforderlich.

• Nachdem Sie die Token-Speicheroption auf „Lokales Dokument“ geändert haben, laden Sie die Seite neu.
• Öffnen Sie Figma Tokens erneut über das Plugin-Menü.

7. Gehen Sie in Figma Tokens auf die Registerkarte „Tokens“, um alle Tokens anzuzeigen. Wählen Sie mit den Kontrollkästchen auf der linken Seite die Token-Sets „global“, „material-3-color“ und „material-3-text“ aus. Sie sollten jetzt Typ- und Farbdesign-Token im Hauptfenster anzeigen können:

Das „globale“ Set stellt die vollständige Farbpalette und Typografieoptionen dar, die im Designsystem verfügbar sind. Das „Material-3-Farben“-Set enthält benannte Design-Token-Farben, die vom Designsystem verwendet werden, zum Beispiel „Thema/Licht/Primär“ und „Thema/Licht/Hintergrund“. Der „Material-3-Text“ enthält Typografieoptionen, die vom Designsystem verwendet werden.

Hinweis: Dieses Tutorial verwendet URL-Token-Speicher, um die Einrichtung zu vereinfachen. In einem echten Designsystemdokument sollte stattdessen ein versioniertes Token-Speichersystem wie „GitHub“ oder „GitLab“ verwendet werden. Diese ermöglichen es, Token direkt von Figma zu ziehen und in einem Repository zu veröffentlichen.

3. Ändern Sie ein Design-Token und exportieren Sie es

Dieser Abschnitt behandelt das Ändern eines Designtokens für den Hintergrund auf einen neuen Wert und das Exportieren der aktualisierten Tokendatei zur Verwendung in einem Designsystem.

1. Klicken Sie in Figma Tokens auf den Farbsatz „Material-3-Farbe“. Wählen Sie als Nächstes im Figma-Dokument unter dem Abschnitt „Light Theme“ den Block „Background“ aus und prüfen Sie, ob das passende Design-Token in Figma Tokens ausgewählt ist:

2. Klicken Sie in Figma Tokens mit der rechten Maustaste auf das Token für die Hintergrundfarbe und wählen Sie „Token bearbeiten“. Ändern Sie den Wert in {color.error.70} (oder ein anderes Palettenfarbtoken Ihrer Wahl) und klicken Sie auf „Aktualisieren“:

Wie oben gezeigt, sollte sich der ausgewählte Hintergrundfarbblock ändern, um mit dem neuen Farbtoken übereinzustimmen.

3. Klicken Sie unten rechts im Figma-Tokens-Plugin auf „Exportieren“. Aktivieren Sie „Alle Token-Sätze“, gehen Sie dann zum Ende des Dialogfelds und klicken Sie auf die Schaltfläche „Exportieren“.

Hinweis: Bei Verwendung eines versionierten Token-Speichersystems wie „GitHub“ können Token-Änderungen direkt in einen Repository-Zweig gepusht werden, anstatt über den Browser heruntergeladen zu werden.

Setup-Tools für WordPress

In den nächsten beiden Schritten verwenden wir die exportierten Design-Token von Figma, um ein lokal ausgeführtes WordPress-Design zu aktualisieren. Die Verwendung dieser Tools erfordert etwas Erfahrung mit GitHub, dem Ausführen von Terminalbefehlen und npm. Folgen Sie mit den folgenden Tools:
Laden Sie eine Kopie des Repositorys vip-design-system-bridge herunter oder klonen Sie sie. WordPress-VIP-Kunden können auch direkt ihren bestehenden WordPress-Code mit einer Kopie des Token-Theme-Themas verwenden.

1. Installieren Sie das Terminal-Tool vip dev-env, das verwendet wird, um eine Kopie von WordPress auszuführen und Token-Änderungen anzuzeigen:

 $ npm install -g @automattic/vip

Hinweis: Möglicherweise müssen Sie auch Node.js und Docker Desktop als Voraussetzungen für vip dev-env installieren. Weitere Informationen finden Sie im Abschnitt „Voraussetzungen“ auf dieser Dokumentationsseite.

4. Führen Sie eine lokale Kopie von WordPress aus

Um unser Design-Token-Update zu sehen, führen Sie eine lokale Kopie von WordPress mit npm und vip dev-env aus. Stellen Sie sicher, dass die VIP-CLI installiert ist und eine Kopie des vip-design-system-bridge-Repositorys lokal heruntergeladen wurde.

1. Wenn der Repository-Ordner vip-design-system-bridge lokal heruntergeladen wurde, führen Sie diese Befehle aus, um eine lokale WordPress-Website zu erstellen:

 cd vip-design-system-bridge/docs/design-tokens-example vip dev-env create --multisite=false --php=8.0 --wordpress=6.1 --mu-plugins=demo --elasticsearch=false --phpmyadmin=false --xdebug=false --app-code=token-site/ --slug=token-site --title=Tokens

2. Führen Sie nach Abschluss der Installation diesen Befehl aus, um die Umgebung zu starten

 vip dev-env start --slug=token-site

Das Ergebnis sollte so aussehen:

3. Als nächstes aktivieren Sie das Token-Design, indem Sie Folgendes ausführen:

 vip dev-env exec --slug=token-site -- wp theme activate token-theme

Die lokale Version von WordPress sollte jetzt mit aktiviertem Token-Design laufen.

4. Besuchen Sie die lokal ausgeführte WordPress-Instanz unter http://token-site.vipdev.lndo.site/. Sie sollten eine WordPress-Seite mit dem vereinfachten Material 3-UI-Design sehen:

5. Verwenden Sie Token, um das WordPress-Design zu aktualisieren

Jetzt, da das Standarddesign sichtbar ist, können wir unser Design direkt aktualisieren und die Ergebnisse der Token-Änderungen anzeigen.

Navigieren Sie in einem Terminal zum heruntergeladenen vip-design-system-bridge-Repository und installieren Sie npm-Abhängigkeiten für das Token-Verarbeitungsskript:

 cd vip-design-system-bridge/ npm install

Führen Sie als Nächstes den folgenden Befehl aus. Aktualisieren Sie –tokenPath so, dass es mit dem Pfad von tokens.json übereinstimmt, der in Schritt 3 heruntergeladen wurde:

 node ingest-tokens.js --tokenPath=~/Downloads/tokens.json --themePath=./docs/design-tokens-example/token-site/themes/token-theme --sourceSet=global --layerSets=material-3-color,material-3-text --overwrite

Hier ist eine Aufschlüsselung der in diesem Befehl verwendeten Flags:

 –tokenPath=~/Downloads/tokens.json # The path to the tokens.json file downloaded from Figma Tokens. Change # this to match the path of the tokens.json file downloaded in step 3. --themePath=./docs/design-tokens-example/token-site/themes/token-theme # The path to the WordPress theme folder that'll receive the updated tokens --sourceSet=global # Use the tokens in the “global” set as a source. Source sets are excluded # from the output, but can still be referenced by other token sets. This # option is used to avoid including the whole color palette and typography # choices in the resulting tokens. --layerSets=material-3-color,material-3-text # Use the “material-3-color” and “material-3-text” token sets to produce the # final output. All tokens included in these sets will be available to # WordPress.

Wenn der obige Befehl ausgeführt wird, sollte er diese Ausgabe erzeugen:

 Using source and layer sets for tokens (source: global, layers: material-3-color, material-3-text) ︎ Processed with token-transformer wordpress-theme-json ︎ src/build/tokens.json ︎ Processed with Style Dictionary ︎ Wrote theme file: ~/vip-design-system-bridge/docs/design-tokens-example/token-theme/theme.json

Nachdem die Token in WordPress aktualisiert wurden, besuchen Sie http://token-site.vipdev.lndo.site/ oder aktualisieren Sie die Seite. Sie sollten sehen, dass sich die Hintergrundfarbe in den in Figma zugewiesenen Tokenwert geändert hat:

Abschließend

Wir haben den End-to-End-Prozess zur Erstellung einer Single Source of Truth für ein Designsystem und dessen Übertragung in ein WordPress-Theme demonstriert. Es gibt jedoch wichtige und komplexe Themen, die in diesem Beitrag nicht behandelt wurden, wie z. B. das Erstellen von Token für Figma-Token und das Entwerfen eines WordPress-Blockdesigns, das diese Token nutzen kann.

Wir hoffen jedoch, dass dies einen nützlichen Prozess für diejenigen bietet, die mit der Implementierung von Designsystemen in WordPress ringen, und dass der Beispielcode als Ausgangspunkt verwendet werden kann.

Verwandte Designsystemthemen finden Sie in diesen Ressourcen:

Figma-Tokens-Plugin – Erste Schritte.

Autoren

Alec Geatches, leitender Softwareentwickler bei Automattic

Enterprise-WordPress-Entwickler und Enthusiast für Designsysteme, der in Taipeh, Taiwan, lebt.

Gopal Krishnan, leitender Softwareentwickler bei Automattic

Gopal arbeitet am entkoppelten WordPress-Angebot von WordPress VIP mit Interesse an Designsystemen und Gutenberg. Er hat seinen Sitz in Sydney, Australien, und ist kürzlich von Kanada hierher gezogen.