Vorbereitung zur Definition von Token
Nachdem Sie die Checkliste der Voraussetzungen und die Markenanalyse abgeschlossen haben, wird im nächsten Schritt die Figma-Umgebung vorbereitet. Es gibt zwei grundlegende Möglichkeiten für den Einstieg, abhängig von den Anforderungen Ihres Projekts.
Möglichkeit 1: Mit einer Jutro-App-Vorlage anfangen (empfohlen)
Diese Vorgehensweise wird für die meisten Projekte empfohlen. So wird sichergestellt, dass Ihre Designdatei mit allen erforderlichen Komponenten und einem vorkonfigurierten Token-Satz ordnungsgemäß eingerichtet wird.
Jutro-App-Vorlage importieren
Zunächst müssen Sie eine der Jutro-App-Vorlagen importieren, die die Basis-Token-Sätze enthält, die Sie als Ausgangspunkt verwenden. Das folgende Video zeigt die entsprechende Vorgehensweise.
Möglichkeit 2: Bei null anfangen mit Token-Dateien
Verwenden Sie diese Methode, wenn Sie eine Jutro-Startvorlage verwenden oder mit einer leeren Figma-Datei beginnen und die standardmäßigen Jutro-Token-Sätze manuell importieren möchten.
1. Token-Dateien herunterladen und entpacken
Zunächst müssen Sie die Token-Dateien herunterladen.
- Navigieren Sie zur Seite Design-Token-Dateien.
- Laden Sie den gewünschten Token-Satz herunter.
- Entpacken Sie die Datei auf dem lokalen Computer. In einem späteren Schritt wählen Sie den gesamten entpackten Ordner aus.
2. Token in eine neue Figma-Datei importieren
Im folgenden Video wird gezeigt, wie Sie mit dem Tokens Studio-Plugin eine neue Figma-Datei erstellen und den Token-Ordner importieren. Die entsprechenden Schritte sind nachfolgend auch schriftlich aufgeführt.
Schritt-für-Schritt-Anleitung:
- Erstellen Sie in Figma eine neue, leere Designdatei.
- Öffnen Sie das Plugin Tokens Studio.
- Klicken Sie im Willkommensfenster des Plugins auf New empty file.
- Suchen Sie im Hauptfenster des Plugins das Symbol Tools unten links und klicken Sie darauf.
- Wählen Sie im dann angezeigten Menü die Option Load from file/folder or preset aus.
- Klicken Sie im Dialogfeld „Import“ auf Choose folder.
- Wählen Sie den gesamten Ordner mit Token aus, den Sie im vorherigen Schritt entpackt haben, und klicken Sie auf Upload.
Nachdem der Import abgeschlossen ist, sind die Token-Sätze und Themes im Plugin verfügbar.
Nächste Schritte für beide Methoden
Unabhängig davon, ob Sie mit einer Vorlage oder von Grund auf neu begonnen haben, sind die folgenden Schritte zum Erstellen eines neuen Theme und zum Synchronisieren mit einem Repository identisch.
Token-Satz duplizieren
Nachdem die Vorlage importiert wurde, wird im nächsten Schritt ein vorhandener Token-Satz dupliziert. Dieser duplizierte Token-Satz dient als Grundlage für Ihr neues Theme, sodass Sie Änderungen vornehmen können, ohne die ursprünglichen Basis-Token zu verändern. Die folgende Bildschirmaufzeichnung veranschaulicht, wie die Token-Sätze dupliziert werden.
Synchronisierungsanbieter einrichten
Abschließend müssen Sie das Tokens Studio-Plugin mit Ihrer Token-Bibliothek verbinden, indem Sie einen Synchronisierungsanbieter einrichten. Dadurch können Sie Ihren neuen Token-Satz in ein freigegebenes Repository übertragen. Im folgenden Beispiel wurde GitHub ausgewählt, Designer können jedoch den von ihrem Unternehmen verwendeten bevorzugten Anbieter auswählen.
Wenn Sie einen Synchronisierungsanbieter hinzufügen, müssen in Tokens Studio verschiedene Details eingegeben werden. Dazu gehören ein Name für die Verbindung, ein persönliches Zugriffstoken von Ihrem Git-Anbieter (z. B. GitHub), der Repository-Pfad und der Zweig, in dem Sie arbeiten werden.
Da die genaue Einrichtung häufig vom Arbeitsablauf Ihres Unternehmens abhängt, empfiehlt sich die Abstimmung mit Entwicklern, um sicherzustellen, dass diese Informationen korrekt eingegeben werden. Der folgende Screenshot zeigt ein Beispiel für die Felder, die Sie ausfüllen müssen.
