Exportieren von Design-Assets

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.

• 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: PNG, SVG, PDF 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:

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?