Benutzerhandbuch Abbrechen

Tipps und Tricks

  1. Adobe XD Benutzerhandbuch
  2. Einführung
    1. Neue Funktionen in Adobe XD
    2. Häufige Fragen
    3. Erstellen von Designs und Prototypen und Freigeben mit Adobe XD
    4. Systemanforderungen
      1. Hardware- und Softwareanforderungen
      2. Adobe XD, Big Sur und Apple silicon | macOS 11
    5. Arbeitsbereich – Grundlagen
    6. Ändern der in Adobe XD angezeigten Sprache
    7. Zugriff auf UI-Design-Kits
    8. Barrierefreiheit in Adobe XD
    9. Tastaturbefehle
    10. Tipps und Tricks
    11. Adobe XD-Abo-Varianten
    12. Änderungen am XD Starter-Abo
  3. Design erstellen
    1. Zeichenflächen, Hilfslinien und Ebenen
      1. Erste Schritte mit Zeichenflächen
      2. Verwenden von Hilfslinien und Rastern
      3. Bildlauffähige Zeichenflächen erstellen
      4. Arbeiten mit Ebenen
      5. Erstellen von Bildlaufgruppen
    2. Formen, Objekte und Pfade
      1. Auswählen, Vergrößern, Verkleinern und Drehen von Objekten
      2. Verschieben, Ausrichten, Verteilen und Anordnen von Objekten
      3. Gruppieren, Sperren, Duplizieren, Kopieren und Spiegeln von Objekten
      4. Festlegen von Strichen, Flächen und Schlagschatten für Objekte
      5. Erstellen sich wiederholender Elemente
      6. Perspektivisches Design mit 3D-Transformationen
      7. Bearbeiten von Objekten mithilfe boolescher Operationen
    3. Text und Schriften
      1. Arbeiten mit Zeichen- und Textwerkzeugen
      2. Schriften in XD
    4. Komponenten und Zustände
      1. Arbeiten mit Komponenten
      2. Arbeiten mit verschachtelten Komponenten
      3. Hinzufügen mehrerer Zustände zu Komponenten
    5. Maskierung und Effekte
      1. Erstellen einer Maske mit Formen
      2. Arbeiten mit Weichzeichnen-Effekten
      3. Erstellen und Ändern von Farbverläufen
      4. Fülleffekte anwenden
    6. Layout
      1. Responsive Resize und Bedingungen
      2. Festlegen fester Innenabstände für Komponenten und Gruppen
      3. Erstellen dynamischer Designs mit Stapeln
    7. Videos und Lottie-Animationen
      1. Arbeiten mit Videos
      2. Erstellen von Prototypen mit Videos
      3. Arbeiten mit Lottie-Animationen
  4. Prototypen erstellen
    1. Erstellen interaktiver Prototypen
    2. Animieren von Prototypen
    3. Für Auto-Animate unterstützte Objekteigenschaften
    4. Erstellen von Prototypen mit Tastatur- und Gamepad-Nutzung
    5. Erstellen von Prototypen mit Sprachbefehlen und Audiowiedergabe
    6. Erstellen zeitgesteuerter Übergänge
    7. Hinzufügen von Overlays
    8. Sprachprototypen erstellen
    9. Erstellen von Ankerlinks
    10. Erstellen von Hyperlinks
    11. Testen von Designs und Prototypen
  5. Freigeben, Exportieren und Review
    1. Ausgewählte Zeichenflächen freigeben
    2. Freigeben von Designs und Prototypen
    3. Zugriffsberechtigungen für Links festlegen
    4. Arbeiten mit Prototypen
    5. Prototyp-Review
    6. Arbeiten mit Design-Spezifikationen
    7. Freigeben von Design-Spezifikationen
    8. Auswerten von Design-Spezifikationen
    9. Navigation in Design-Spezifikationen
    10. Reviews und Kommentarfunktion zu Design-Spezifikationen
    11. Exportieren von Design-Assets
    12. Exportieren und Herunterladen von Assets aus Design-Spezifikationen
    13. Gruppenfreigabe für Unternehmen
  6. Design-Systeme
    1. Design-Systeme mit Creative Cloud-Bibliotheken
    2. Arbeiten mit Dokumentelementen in Adobe XD
    3. Arbeiten mit Creative Cloud-Bibliotheken in Adobe XD
    4. Von verknüpften Elementen zu Creative Cloud-Bibliotheken migrieren
    5. Arbeiten mit Designtoken 
    6. Verwenden von Elementen aus Creative Cloud-Bibliotheken
  7. Cloud-Dokumente
    1. Cloud-Dokumente in Adobe XD
    2. Zusammenarbeit und Co-Editing
    3. Co-Editing bei für Sie freigegebenen Dokumenten
  8. Integrationen und Plug-ins
    1. Arbeiten mit externen Elementen
    2. Arbeiten mit Design-Elementen aus Photoshop
    3. Kopieren und Einfügen von Elementen aus Photoshop
    4. Importieren oder Öffnen von Photoshop-Designs
    5. Arbeiten mit Illustrator-Elementen in Adobe XD
    6. Öffnen oder Importieren von Illustrator-Designs
    7. Vektordateien aus Illustrator nach XD kopieren
    8. Plug-ins für Adobe XD
    9. Erstellen und Verwalten von Plug-ins
    10. Jira-Integration für Adobe XD
    11. Slack-Plug-in für XD
    12. Zoom-Plug-in für XD
    13. Designs von XD aus auf Behance freigeben
  9. XD für iOS und Android
    1. Testen der Prototypen auf iOS/Android
    2. Adobe XD unter iOS/Android – Häufige Fragen
  10. Fehlerbehebung
    1. Bekannte und behobene Probleme
      1. Bekannte Probleme
      2. Behobene Probleme
    2. Installation und Updates
      1. XD scheint unter Windows nicht kompatibel zu sein
      2. Fehlercode 191
      3. Fehlercode 183
      4. Probleme beim Installieren von XD Plug-ins
      5.  Aufforderung zur Deinstallation und erneuten Installation von XD | Windows 10
      6. Probleme mit der Migration von Einstellungen
    3. Absturz beim Programmstart
      1.  Adobe XD stürzt ab, wenn es auf Windows 10 gestartet wird
      2.  XD wird beendet, wenn Sie sich von Creative Cloud abmelden
      3. Problem mit dem Abonnementstatus unter Windows
      4. Warnung zu blockierter Applikation, wenn XD auf Windows gestartet wird
      5. Generierung von Absturzbildern auf Windows
      6. Sammlung und Freigabe von Absturzprotokollen
    4. Cloud-Dokumente sowie Creative Cloud-Bibliotheken.
      1. Probleme mit XD Cloud-Dokumenten
      2. Probleme mit verknüpften Komponenten
      3. Probleme mit Bibliotheken und Links
    5. Erstellen und Veröffentlichen von Prototypen und Durchführen von Reviews
      1. Prototyp-Interaktionen können unter macOS Catalina nicht aufgezeichnet werden
      2. Probleme mit Arbeitsabläufen für die Veröffentlichung
      3. Veröffentlichte Links werden in Browsern nicht angezeigt
      4. Prototypen werden in Browsern nicht korrekt dargestellt
      5. Kommentarfeld wird plötzlich bei freigegebenen Links angezeigt
      6. Bibliotheken können nicht veröffentlicht werden
    6. Importieren, exportieren und Zusammenarbeit mit anderen Applikationen
      1. Import und Export in XD
      2. Photoshop-Dateien in XD
      3. Illustrator-Dateien in XD
      4. Von XD nach After Effects exportieren
      5. Sketch-Dateien in XD
      6. Apps von Drittanbietern sind im Export nicht sichtbar

Tipps und Tricks zum schnellen Entwerfen und Erstellen von Prototypen in Adobe XD.

Hier finden Sie einige Tricks für die Arbeit mit Adobe XD.

Allgemeine Tipps und Tricks

  • Anstatt Gruppen von Elementen in Ihrem Design per Kopieren und Einfügen zu duplizieren, können Sie im Eigenschafteninspektor die Option „Wiederholungsraster“ verwenden.
  • Sie können eine Form duplizieren, indem Sie sie auswählen und bei gedrückter Wahltaste (macOS) bzw. Alt-Taste (Windows) eine Kopie an eine andere Stelle ziehen.
  • Auf dem Mac können Elemente mit Objekt > Sperren (oder Cmd + L) gesperrt werden. Dieser Befehl dient zum Umschalten, sodass er auch zum Aufheben der Sperre verwendet wird. Auf Windows klicken Sie mit der rechten Maustaste auf ein Objekt und wählen im Kontextmenü die Option „Sperren“.
  • Aktivieren Sie die Direktauswahl, indem Sie die Cmd- bzw. Strg-Taste gedrückt halten. Auf diese Weise können Sie verschachtelte Objekte auswählen.
  • Eine Maske lässt sich schnell erstellen, indem Sie ein Bild auf eine Form ziehen: auf der Fläche dieser Form wir nun das Bild angezeigt.
  • Sie können eine bearbeitbare Maske erstellen, indem Sie ein Bild importieren und dann eine Form zeichnen. Wählen Sie beide aus und wählen Sie dann Objekt > Mit Form maskieren (macOS) oder klicken Sie mit der rechten Maustaste auf die Objekte und wählen Sie im Kontextmenü die Option „Mit Form maskieren“. Sie können die Maske oder das Bild später mit einem Doppelklick auf die maskierte Gruppe bearbeiten.

Zeichnen und Text

  • Sie können das Ausrichten an Hilfslinien deaktivieren, indem Sie beim Zeichnen die Cmd-/Strg-Taste gedrückt halten.
  • Um zwischen einer Kurve und einem Winkel zu wechseln, doppelklicken Sie auf einen beliebigen Ankerpunkt.
  • Halten Sie beim Ziehen eines Kurvengriffs die Wahl-/Alt-Taste gedrückt, um den Kurvengriff unabhängig zu machen. (Um ihn wieder abhängig zu machen, doppelklicken Sie, um zu einem Winkel zurückzukehren, und doppelklicken dann erneut).
  • Sie können Ankerpunkte auswählen, wenn Sie mit dem Zeichenstift zeichnen.
  • Um den Bearbeitungsmodus einer Gruppe zu aktivieren (d. h., Sie können einzelne Elemente der Gruppe bearbeiten oder neue hinzufügen), doppelklicken Sie auf die Gruppe oder Sie halten die Cmd-/Strg-Taste gedrückt, während Sie auf ein Objekt der Gruppe klicken.
  • Wenn Sie ein Textelement auswählen und dann ein neues erstellen, werden alle Formateigenschaften des ersten Texts für den zweiten übernommen.
  • Pfadkombinationen (Addieren/Subtrahieren/Schnittmenge bilden/Überlappung ausschließen) sind nicht destruktiv. Sie können aktiviert bzw. deaktiviert werden.

Inhalte importieren

  • Um Inhalte aus Illustrator einzubinden, wählen Sie in Illustrator die Vektorform aus, kopieren sie und fügen sie dann in Adobe XD ein.
  • Um Bitmap-Inhalte aus Photoshop einzubinden, wählen Sie mit Cmd + A bzw. Strg + A alle Elemente in einer Bitmap- oder Textebene aus (oder wandeln zuerst eine Vektorebene oder Gruppe in ein Smart-Objekt um), kopieren diese und fügen sie dann in Adobe XD ein. Die Ebene wird als Bitmap eingefügt. Sie können auch Inhalte aus Photoshop kopieren, indem Sie sie mit dem Auswahlrechteck auswählen und dann „Bearbeiten“ > „Kopieren“ wählen. Auf diese Weise werden Elemente aus allen Ebenen (innerhalb der Auswahl) ausgewählt.
  • Um Inhalte aus Sketch einzubinden, wählen Sie eine oder mehrere Ebenen oder Gruppen aus und klicken auf „Make Exportable“ (Exportierbar machen). Wählen Sie das SVG-Format aus und ziehen Sie die Ebene von Sketch zu Adobe XD. Dadurch erhalten Sie bearbeitbare Vektorinhalte in Adobe XD.
  • Mac: Um Elemente (PNG-, JPG-, TIFF-, GIF- oder SVG-Dateien) zu importieren, wählen Sie Datei > Importieren oder ziehen Bilder vom Finder auf die Arbeitsfläche von Adobe XD oder kopieren sie und fügen sie in Adobe XD ein.
    Windows: Klicken Sie auf das Hamburgermenü und wählen Sie „Importieren“ oder ziehen Sie Bilder vom Windows-Explorer auf die Arbeitsfläche von Adobe XD oder kopieren Sie sie und fügen sie in Adobe XD ein.
    Sie können auch Inhalte im Webbrowser kopieren und in Adobe XD einfügen.

Tastaturbefehle für die Bearbeitung

  • Um den Eckenradius eines Rechtecks anzupassen, halten Sie die Wahltaste gedrückt, wenn Sie nur eine einzelne Ecke ändern wollen.
  • Um das Einrasten vorübergehend zu deaktivieren, halten Sie beim Verschieben, Vergrößern oder Verkleinern von Elementen die Cmd- bzw. Strg-Taste gedrückt.
  • Halten Sie die Umschalttaste gedrückt, wenn Sie die Größe eines Elements ändern, damit das Seitenverhältnis beibehalten wird.
  • Halten Sie beim Zeichnen einer Form die Alt-Taste gedrückt, wenn sie von ihrer Mitte heraus gezeichnet werden soll und nicht, wie üblich, bei einem Ende beginnend.
  • Um schnell die Deckkraft eines ausgewählten Elements zu ändern, drücken Sie die folgenden Zifferntasten: 1 = 10 %, 2 = 20 % usw. bis 0 = 100 %.
  • Wenn Sie eine Form oder einen Kontrollpunkt mithilfe der Pfeiltasten verschieben, halten Sie die Umschalttaste gedrückt, um die Objekte in Schritten von 10 Pixel zu verschieben.
  • Halten Sie die Leertaste gedrückt, um den Handmodus zu aktivieren. Wenn Sie im Handmodus ziehen, wird die Arbeitsfläche verschoben.

Zeichenflächen

  • Um eine Zeichenfläche auszuwählen, klicken Sie auf ihren Titel oder klicken bei gedrückter Cmd-/Strg-Taste auf den Hintergrund. Sie können auch auf den Hintergrund doppelklicken.
  • Um eine leere Zeichenfläche auszuwählen, klicken Sie auf den Hintergrund der Zeichenfläche.
  • Um eine Zeichenfläche (und ihren Inhalt) zu duplizieren, wählen Sie die Zeichenfläche aus und ziehen bei gedrückter Cmd-Taste (macOS) bzw. Alt-Taste (Windows), um eine Kopie zu erstellen.
  • Um eine Zeichenfläche umzubenennen, doppelklicken Sie auf ihren Titel.

Wiederholungsraster

  • Um den Abstand zwischen sich wiederholenden Elementen in einem Raster anzupassen, wählen Sie das Wiederholungsraster aus und halten dann den Cursor über den Abstand zwischen zwei Elementen und ziehen. Wenn Sie ein Element in einem Wiederholungsraster bearbeiten, müssen Sie die Esc-Taste drücken, um den Bearbeitungsmodus zu verlassen.

Prototyperstellung und Vorschau

  • Wählen Sie ein Objekt auf einer Zeichenfläche (oder die gesamte Zeichenfläche) aus und ziehen Sie eine Verdrahtung auf eine andere Zeichenfläche, um eine Interaktion zwischen den beiden Zeichenflächen auszulösen.
  • Um eine Verdrahtung wieder zu entfernen, ziehen Sie sie vom Ziel auf eine freie Stelle außerhalb der Montagefläche.
  • Bei Webdesigns sollten Sie den Übergang „Ausblenden“ verwenden.
  • Sie können alle Verdrahtungen zwischen Ihren Zeichenflächen anzeigen (außer denen, die direkt von Zeichenflächen ausgelöst werden), indem Sie im Prototypmodus Cmd + A (macOS) bzw. Strg + A (Windows) drücken.
  • Im Vorschaufenster wird jeweils die ausgewählte Zeichenfläche angezeigt. Ist keine Zeichenfläche ausgewählt, wird im Vorschaufenster die Startseite angezeigt.
  • Sie können über das Vorschaufenster ein Video Ihres interaktiven Prototyps aufzeichnen. Dazu klicken Sie in der Titelleiste auf „Aufzeichnen“.
  • Wenn Sie erneut auf „Aufzeichnen“ klicken oder die Esc-Taste drücken, wird die Aufzeichnung beendet.
  • Sie können Tastatur- oder Gamepad-Trigger für Prototypen verwenden, je nachdem, welche Art von Erlebnis sie erstellen wollen. 

Prototypen freigeben

  • Damit Sie Prototypen freigeben können, müssen Sie mit Ihrem Adobe-Konto entweder beim Adobe Creative Cloud-Client oder bei einer andere Adobe-Applikation (wie Photoshop oder Illustrator) angemeldet sein.Dabei werden sowohl Adobe IDs, Enterprise IDs als auch Federated IDs unterstützt.
  • Wenn Sie Ihre Designdatei ohne Interaktionen freigeben, werden alle Zeichenflächen hochgeladen und die Benutzer können mithilfe der Pfeiltasten durch den Prototyp navigieren. Die Reihenfolge, in der Ihre Zeichenflächen aufgerufen werden, ist von oben links nach unten rechts.
  • Enthält Ihr Design Interaktionen, werden nur die mit der Startzeichenfläche verdrahteten Zeichenflächen hochgeladen und freigegeben.
  • Die als Startseite definierte Zeichenfläche ist die erste Zeichenfläche, die die Benutzer sehen, wenn sie ein freigegebenes Design anzeigen.
  • Sie können eine andere Zeichenfläche zur Startseite machen, indem Sie im Prototypmodus neben der Zeichenfläche auf das Startseitensymbol klicken. Das Startseitensymbol wird nur bei einer ausgewählten Zeichenfläche angezeigt.
  • Wenn Sie einen Prototyp in einem mobilen Webbrowser anzeigen, können Sie auf dem Startbildschirm des Geräts eine Verknüpfung zu diesem Prototyp speichern. Dadurch erinnert ein Prototyp beim Vorführen eher an eine native Applikation.
Adobe-Logo

Bei Ihrem Konto anmelden