Benutzerhandbuch Abbrechen

Exportieren von Design-Assets

  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

Hier erfahren Sie, wie Sie produktionsreife Assets aus Adobe XD ins PNG-, SVG-, JPG- oder PDF-Dateiformat exportieren können.

Sie können Elemente wie Bitmap-Bilder, Symbole und Hintergrundmuster, Text und Zeichenflächen von XD als PNG-, SVG-, JPG- oder PDF-Format exportieren. Diese exportierten Assets sind für die Bereitstellung auf iOS, Android oder in den Web-Anwendungen optimiert.

Wenn Sie auf macOS mit XD arbeiten, können Sie Ihre Designs jetzt auch in Integrationen von Drittanbietern wie Zeplin, Avocode, Sympli, Kite Compositor und Protopie einlesen.

Assets und Zeichenflächen für den Export auswählen

macOS

Wählen Sie ein Objekt oder eine Zeichenfläche aus und wählen Sie Datei > Exportieren oder drücken Sie Cmd + E.    

Windows

Wählen Sie ein Objekt oder eine Zeichenfläche aus und wählen Sie Datei > Exportieren.  

  • Markierte: Mit dieser Option können Sie alle Elemente exportieren, die mit der Option Für Export markieren im Eigenschafteninspektor bereits für den Export markiert wurden. Um mehrere Objekte als einzelnes Asset zu exportieren, müssen Sie die Objekte vor dem Export gruppieren.
  • Nur ausgewählte: Mit dieser Option können Sie bestimmte Elemente auswählen und exportieren.
  • Alle Zeichenflächen: Sie können alle Zeichenflächen für den Export in ein Design-Projekt auswählen.
  • After Effects: Sie können das Element auswählen, das nach After Effects exportiert werden soll.

Ebenen für den Export markieren

Für den Export markierte Ebenen werden in den Design-Spezifikationen als Assets bereitgestellt. Um Assets für den Export zu markieren, wählen Sie eine beliebige Ebene auf der Arbeitsfläche aus und verwenden eine der folgenden Optionen: 

  • Klicken Sie auf der Arbeitsfläche mit der rechten Maustaste auf die Ebene und wählen Sie im Dropdown-Menü die Option „Für Export markieren“ aus. 
  • Öffnen Sie das Bedienfeld „Ebenen“ und klicken Sie neben dem Ebenennamen auf das Symbol „Für Export markieren“ 

Assets in verschiedene Dateiformate exportieren

Assets sind Design-Dateien, die von den Entwicklern benötigt werden, um Ihre Designs mit HTML/CSS/JS in Form einer Website bzw. mit nativen Sprachen wie Swift oder Java in Form einer iOS- und Android-App neu zu erstellen.

Im Allgemeinen sind die häufigsten Assets Bitmap-Bilder, Symbole oder Hintergrund-Muster, die Sie in diesen Formaten exportieren können: PNGSVGPDFJPG.

Als PNG exportieren

Als PNG exportieren
Als PNG exportieren

Wählen Sie eine gängige oder plattformspezifische Exportgröße oder legen Sie eine benutzerdefinierte Exportgröße fest:

  • Vorgegebene oder benutzerdefinierte Exportgröße: Wählen Sie eine der vorgegebenen Exportgrößen: 0,5x, 1x, 1,5x, 2x, 3x, 4x. Sie können auch benutzerdefinierte Exportgrößen von 0,1x bis 10x eingeben.
  • Web: Die Elemente werden bei einer Auflösung von 1x oder 2x exportiert.
  • iOS: Die Elemente werden bei einer Auflösung von 1x, 2x oder 3x exportiert.
  • Android – Elemente werden für die folgenden in Android definierten Pixeldichten optimiert und exportiert:
    • ldpi – geringe Dichte (75 %)
    • mdpi – mittlere Dichte (100 %)
    • hdpi – hohe Dichte (150 %)
    • xhdpi – extra hohe Dichte 1 (200 %)
    • xxhdpi – extra hohe Dichte 2 (300 %)
    • xxxhdpi – extra hohe Dichte 3 (400 %)

Als SVG exportieren

Als SVG exportieren
Als SVG exportieren

Wenn Sie Objekte oder Zeichenflächen als SVG exportieren, können Sie die folgenden Optionen einstellen:

Visueller Stil:

  • Präsentationsattribute: Verwendet separate XML-Attribute für jede einzelne Formateigenschaft in jedem SVG-Tag. Diese Formatierung muss SVG-Assets mit Android Studio verwenden.
  • Internes CSS: Verwendet mit CSS-Klassen ein einziges Formatierungs-Tag und wendet dieselben Formatierungseinstellungen auf alle Objekte mit derselben Formatierung an, wodurch die Dateigröße reduziert wird.

Eingebettete bzw. verknüpfte Bilder:

  • Einbetten: Das Bitmap-Bild ist im Code der SVG-Datei enthalten.
  • Link: Das Bitmap-Bild wird separat mit einem Verweis auf die SVG-Datei gespeichert.

Als PDF exportieren

Als PDF exportieren
Als PDF exportieren

Sie können Elemente auf die folgenden Arten als PDF exportieren:

  • Einzelne PDF-Datei: Sie können mehrere Zeichenflächen oder Elemente auswählen und alle zusammen in eine einzige PDF-Datei exportieren. 
  • Mehrere PDF-Dateien: Sie können mehrere Zeichenflächen oder Elemente auswählen und jeweils als separate PDF-Datei exportieren. Für jede der ausgewählten Elemente oder Zeichenflächen werden separate PDF-Dateien erstellt.

Als JPG exportieren

Als JPG exportieren
Als JPG exportieren

Wenn Sie Elemente als JPG exportieren, können Sie die folgenden Optionen einstellen:

Qualität: Wählen Sie 20 %, 40 %, 60 %, 80 % oder 100 % aus.

Exportgröße:

  • Vorgegebene oder benutzerdefinierte Exportgröße: Wählen Sie eine der vorgegebenen Exportgrößen: 0,5x, 1x, 1,5x, 2x, 3x, 4x. Sie können auch benutzerdefinierte Exportgrößen von 0,1x bis 10x eingeben.
  • Web: Die Elemente werden bei einer Auflösung von 1x oder 2x exportiert.

JPGs werden nicht in PDFs konvertiert. Rasterbilder werden als Bilder importiert und scheinen daher in PDFs umgewandelt zu werden.

Assets in Programme von Drittanbietern exportieren

Sie können Ihre Designs aus XD jetzt in andere Programme wie Zeplin, Avocode, Sympli, Kite Compositor und Protopie einlesen. 

Hier ein beispielhafter Workflow von XD auf macOS mit Zeplin:

  1. Wählen Sie in Ihrer XD Datei eine Zeichenfläche oder Ebene aus und wählen Sie Datei > Exportieren > Zeplin.

    Haben Sie mehrere Programme mit XD integriert, startet der Tastaturbefehl ⌥⌘E das zuletzt verwendete Programm.

    Elemente nach Zeplin exportieren
    Elemente nach Zeplin exportieren

  2. Klicken Sie auf Import. Sollen Bildschirme mit gleichen Namen in Zeplin ersetzt werden, aktivieren Sie die Option Replace screens with the same name(Bildschirme mit gleichem Namen ersetzen). Zeplin fügt ihn als neue Version dieses Bildschirms hinzu, ohne dass Ihre Anmerkungen verloren gehen.

    Wenn beim Arbeiten mit Zeplin in XD Probleme auftreten, finden Sie Lösungen unter Unable to see supported third-party app in Export options (Unterstützte Applikation eines Drittanbieters wird in den Exportoptionen nicht angezeigt).

Fehlerbehebung

Haben Sie Probleme mit dem Exportieren von Assets? Informationen zum Beheben von exportbezogenen Problemen finden Sie unter Warum kann ich bestimmte Dateien nicht in Adobe XD importieren oder exportieren?

Noch Fragen oder Ideen?

Fragen Sie die Community

Möchten Sie, dass Ihr Designtool zusätzliche Workflows bereitstellt? Auf XD UserVoice
können Sie eine Funktion vorschlagen oder für vorhandene Vorschläge Ihre Stimme abgeben.

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.

Optionen beim Exportieren ins PDF-Format
Optionen beim Exportieren ins PDF-Format

Adobe-Logo

Bei Ihrem Konto anmelden

[Feedback V2 Badge]