Benutzerhandbuch Abbrechen

Arbeiten mit Designtoken

Mit Designtoken können Sie Farben und Zeichenformaten selbstdefinierte Variablennamen zuweisen.

Sie können in Adobe XD Designtoken hinzufügen, um selbstdefinierte allgemeine Namen für Farben und Zeichenformate bereitstellen, die im Bedienfeld Elemente angezeigt werden.

Designtoken in XD

Dank Designtoken müssen Sie sich keine langen und komplexen Hexadezimalcodes und CSS-Snippets für Ihre Elemente merken. Sie können einfachere Namen hinzufügen, die leicht zu erkennen sind. 

Nachdem Sie Ihre Designspezifikation veröffentlicht und für andere Stakeholder freigegeben haben, sind die selbstdefinierten Namen für sie sichtbar.

 Wenn Sie keine selbstdefinierten Variablen zuweisen, erstellt Adobe XD automatisch einen eindeutigen Namen und eine Klasse aus den Farb- und Zeichenformateigenschaften und dem Präfix „unbenannt“.

Vorbereitung

Voraussetzungen:

  • Machen Sie sich mit Design-Spezifikationen und Designsystemen vertraut.
  • Teilen Sie die vereinbarten Namenskonventionen für Farben und Zeichenformate Ihren Entwicklern mit.

Designtoken erstellen

Sie können Designtoken für eine neue Zeichenfläche oder für eine vorhandene Zeichenfläche erstellen, zu der Sie bereits Farben und Zeichenformate hinzugefügt haben.

 Das Umbenennen von Schriftnamen, -größen oder anderen Eigenschaften wird in Adobe XD zurzeit nicht unterstützt.

Designmodus

A. Farbbedienfeld B. Doppelklicken, um einen neuen Namen hinzuzufügen 

Im Designmodus:

  1. Navigieren Sie zum Bedienfeld Elemente. Klicken Sie auf +, um die Farben und Zeichenstile anzuzeigen. 
  2. Doppelklicken Sie auf den Standardnamen für das Element und geben Sie einen neuen Namen ein. Die Namen werden zur Erstellung von entsprechenden Variablen und Klassen für Farben und Zeichenformate verwendet.

 XD erstellt automatisch Namen für Farben und Zeichenformate, die nicht umbenannt werden und normalerweise mit Unbenannt beginnen.

Designtoken freigeben

Nachdem Sie die Designtoken erstellt haben, können Sie sie den Entwicklern über die Design-Spezifikationen zur Verfügung stellen.

share-design-token
Wählen Sie unter „Anzeigeeinstellung“ die Option „Entwicklung“ aus

Im Freigabemodus:

  1. Wählen Sie in der Dropdown-Liste Anzeigeeinstellung die Option Entwicklung. 
    Vergewissern Sie sich, dass die Option Exportieren für Web ausgewählt ist, da die Funktion zum Freigeben von Links nur in Links von Design-Spezifikationen unterstützt wird, die für das Web exportiert wurden.
  2. Klicken Sie auf Link erstellen. Kopieren Sie den generierten Link und geben Sie ihn für Entwickler frei. Weitere Informationen finden Sie unter Freigeben von Designs und Prototypen.

Informationen zum Überprüfen des im Freigabemodus erstellten Links finden Sie unter „Designtoken anzeigen“.

 

Designtoken anzeigen

view-design-tokens

A. Spezifikationen anzeigen B. Variablen anzeigen 

Um die Designtoken in einem Freigabelink für die Design-Spezifikation anzuzeigen, öffnen Sie den Freigabelink in einem Browser und gehen Sie wie folgt vor:

  • Um das Designtoken und seinen Hexadezimalcode anzuzeigen, klicken Sie auf </>.  Im Bedienfeld werden die entsprechenden Designtoken angezeigt. Bewegen Sie den Mauszeiger über die Designtoken, um deren Hexadezimalcode anzuzeigen.
  • Um die Variablen anzuzeigen, klicken Sie auf { }

Designtoken herunterladen

Designtoken herunterladen
Designtoken herunterladen

So laden Sie die Designtoken in einem freigegebenen Design-Spezifikations-Link herunter:

  1. Öffnen Sie den freigegebenen Link in einem Browser.
  2. Navigieren Sie zu den CSS-Codefragmenten oder wählen Sie das Symbol { } aus.
  3. Klicken Sie auf CSS herunterladen, um diese Variablen als CSS-Code-Snippets herunterzuladen, die auch die Designtoken enthalten.
  4. Nachdem Sie die Snippets heruntergeladen haben, kopieren Sie sie und fügen Sie sie in Ihren Implementierungscode ein.

Weitere Informationen

Sehen Sie sich das folgende Video an, um weitere Informationen zu Designtoken zu erhalten.

Dauer: 4 Minuten

Wie geht’s weiter?

Sie wissen jetzt, wie Sie Designtoken erstellen und für Ihre Stakeholder freigeben. Lernen Sie als Nächstes, wie Sie Design-Spezifikationen auswerten.

Noch Fragen oder Ideen?

Fragen Sie die Community

Wenn Sie noch Fragen haben oder eigene Ideen weitergeben möchten, beteiligen Sie sich an unserer Adobe XD Community. Wir freuen uns schon auf Ihre Beiträge und Kreationen.

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?