Zum Hauptinhalt springen

Design-Token-Dateien

Überblick​

Diese Dateien enthalten die Jutro-Design-Token im JSON-Format als Alternative zu der in den Jutro-App-Vorlagen eingebetteten Theme-Definition.

Diese Methode eignet sich für Benutzer, die keine vordefinierten Vorlagen verwenden, beispielsweise für Benutzer, die bei null anfangen und kein Standarddesign haben, oder für Entwickler, die direkten programmgesteuerten Zugriff auf die Token-Werte benötigen.

Theme-Dateien​

Die folgenden Dateien enthalten die Design-Token für das Jutro Consumer-Theme.

Consumer-Theme​

Verwendung dieser Dateien​

Für Designer (in Figma)​

So wird die Theme-Definition in einer neuen Figma-Datei hinzugefügt:

  1. Öffnen Sie eine neue, leere Figma-Datei, in die Sie die Design-Token importieren möchten.
  2. Starten Sie das Plugin Tokens Studio.

Da noch keine Token verbunden sind, können Sie mit dem Plugin eine Datei importieren. Eine vollständige Schritt-für-Schritt-Anleitung zum Durchführen des Importvorgangs finden Sie auf der Seite Vorbereitung zur Definition von Token.

Warning: Diese Methode ist nur für neue Dateien vorgesehen, die noch nicht mit einem Token-Satz verbunden sind. Sie kann nicht zum Aktualisieren oder Upgraden eines vorhandenen Token-Satzes in Figma verwendet werden.

Für Entwickler​

Entwickler verwenden diese JSON-Dateien als Eingabe für die Generierung von Themes. Die Kernaufgabe besteht darin, ein Befehlszeilenskript auszuführen, um diese Design-Token in die CSS-Variablen umzuwandeln, die das Design der Anwendung bestimmen.

Eine vollständige Schritt-für-Schritt-Anleitung für diesen Umwandlungsprozess finden Sie in der Dokumentation zur Umwandlung in CSS-Variablen.

Important: Bei Verwendung einer Theme-Datei zur Aktualisierung von einer früheren Version ist eine manuelle Überprüfung erforderlich. Beachten Sie, dass Token-Werte geändert und Token zwischen den Releases hinzugefügt oder entfernt werden können. Sie müssen die neue Datei mit Ihrem vorhandenen Theme vergleichen, um diese Änderungen zu identifizieren und zu integrieren.