Benutzerhandbuch Abbrechen

Exportieren von Design-Assets

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 ins PNG-, SVG-, JPG- oder PDF-Format exportieren. Diese exportierten Assets sind für die Bereitstellung auf iOS, Android oder in den Web-Applikationen 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“ 

Elemente in verschiedene Dateiformate exportieren

Elemente sind Designdateien, 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 Elemente Bitmap-Bilder, Symbole oder Hintergrundmuster, die Sie in folgenden Formaten exportieren können: PNGSVGPDF und JPG.

Mit XD 57 und späteren Versionen können Sie JPG-, PNG- und PDF-Elemente mit konsistenten Farbwiedergaben exportieren. Um dies zu erreichen, stellen Sie das Farbprofil des Dokuments auf sRGB um. Wenn Sie versuchen, ein Element aus einem Dokument zu exportieren, das über ein nicht verwaltetes Farbprofil verfügt, erhalten Sie eine Meldung, die Sie über eine mögliche Farbabweichung im exportierten Element informiert. Weitere Informationen finden Sie unter Farbmanagement.

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

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

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

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 aus: 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

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?