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.
Zuletzt aktualisiert am
14. April 2022
- Adobe XD Benutzerhandbuch
- Einführung
- Neue Funktionen in Adobe XD
- Häufige Fragen
- Erstellen von Designs und Prototypen und Freigeben mit Adobe XD
- Farbmanagement
- Systemanforderungen
- Arbeitsbereich – Grundlagen
- Ändern der in Adobe XD angezeigten Sprache
- Zugriff auf UI-Design-Kits
- Barrierefreiheit in Adobe XD
- Tastaturbefehle
- Tipps und Tricks
- Design erstellen
- Zeichenflächen, Hilfslinien und Ebenen
- Formen, Objekte und Pfade
- Auswählen, Vergrößern, Verkleinern und Drehen von Objekten
- Verschieben, Ausrichten, Verteilen und Anordnen von Objekten
- Gruppieren, Sperren, Duplizieren, Kopieren und Spiegeln von Objekten
- Festlegen von Strichen, Flächen und Schlagschatten für Objekte
- Erstellen sich wiederholender Elemente
- Perspektivisches Design mit 3D-Transformationen
- Bearbeiten von Objekten mithilfe boolescher Operationen
- Text und Schriften
- Komponenten und Zustände
- Maskierung und Effekte
- Layout
- Videos und Lottie-Animationen
- Prototypen erstellen
- Erstellen interaktiver Prototypen
- Animieren von Prototypen
- Für Auto-Animate unterstützte Objekteigenschaften
- Erstellen von Prototypen mit Tastatur- und Gamepad-Nutzung
- Erstellen von Prototypen mit Sprachbefehlen und Audiowiedergabe
- Erstellen zeitgesteuerter Übergänge
- Hinzufügen von Overlays
- Sprachprototypen erstellen
- Erstellen von Ankerlinks
- Erstellen von Hyperlinks
- Testen von Designs und Prototypen
- Freigeben, Exportieren und Review
- Ausgewählte Zeichenflächen freigeben
- Freigeben von Designs und Prototypen
- Zugriffsberechtigungen für Links festlegen
- Arbeiten mit Prototypen
- Prototyp-Review
- Arbeiten mit Design-Spezifikationen
- Freigeben von Design-Spezifikationen
- Auswerten von Design-Spezifikationen
- Navigation in Design-Spezifikationen
- Reviews und Kommentarfunktion zu Design-Spezifikationen
- Exportieren von Design-Assets
- Exportieren und Herunterladen von Assets aus Design-Spezifikationen
- Gruppenfreigabe für Unternehmen
- Sichern oder übertragen von XD Elementen
- Design-Systeme
- Cloud-Dokumente
- Integrationen und Plug-ins
- Arbeiten mit externen Elementen
- Arbeiten mit Design-Elementen aus Photoshop
- Kopieren und Einfügen von Elementen aus Photoshop
- Importieren oder Öffnen von Photoshop-Designs
- Arbeiten mit Illustrator-Elementen in Adobe XD
- Öffnen oder Importieren von Illustrator-Designs
- Vektordateien aus Illustrator nach XD kopieren
- Plug-ins für Adobe XD
- Erstellen und Verwalten von Plug-ins
- Jira-Integration für Adobe XD
- Slack-Plug-in für XD
- Zoom-Plug-in für XD
- Designs von XD aus auf Behance freigeben
- XD für iOS und Android
- Fehlerbehebung
- Bekannte und behobene Probleme
- Installation und Updates
- Absturz beim Programmstart
- Adobe XD stürzt ab, wenn es auf Windows 10 gestartet wird
- XD wird beendet, wenn Sie sich von Creative Cloud abmelden
- Problem mit dem Abonnementstatus unter Windows
- Warnung zu blockierter Applikation, wenn XD auf Windows gestartet wird
- Generierung von Absturzbildern auf Windows
- Sammlung und Freigabe von Absturzprotokollen
- Cloud-Dokumente sowie Creative Cloud-Bibliotheken.
- Erstellen und Veröffentlichen von Prototypen und Durchführen von Reviews
- Prototyp-Interaktionen können unter macOS Catalina nicht aufgezeichnet werden
- Probleme mit Arbeitsabläufen für die Veröffentlichung
- Veröffentlichte Links werden in Browsern nicht angezeigt
- Prototypen werden in Browsern nicht korrekt dargestellt
- Kommentarfeld wird plötzlich bei freigegebenen Links angezeigt
- Bibliotheken können nicht veröffentlicht werden
- Importieren, exportieren und Zusammenarbeit mit anderen Applikationen
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.
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.
A. Farbbedienfeld B. Doppelklicken, um einen neuen Namen hinzuzufügen
Im Designmodus:
- Navigieren Sie zum Bedienfeld Elemente. Klicken Sie auf +, um die Farben und Zeichenstile anzuzeigen.
- 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.
?$pjpeg$&jpegSize=200&wid=934 "Share-(Updated)")
Im Freigabemodus:
- 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. - 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
?$pjpeg$&jpegSize=200&wid=751 "View-in-Link(Updated)")
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
So laden Sie die Designtoken in einem freigegebenen Design-Spezifikations-Link herunter:
- Öffnen Sie den freigegebenen Link in einem Browser.
- Navigieren Sie zu den CSS-Codefragmenten oder wählen Sie das Symbol { } aus.
- Klicken Sie auf CSS herunterladen, um diese Variablen als CSS-Code-Snippets herunterzuladen, die auch die Designtoken enthalten.
- 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?
