Produktionsreife Elemente aus Adobe XD als PNG-, SVG-, JPG- oder PDF-Dateien exportieren

Sie haben die Möglichkeit, produktionsreife Elemente für andere Entwickler freizugeben, damit diese sie in Websites und mobilen Apps verwenden können. Sie können Designelemente aus XD ins PNG-, SVG-, JPG- und PDF-Format exportieren, optimiert für die Bereitstellung auf iOS, Android oder Webseiten.

Sie können entweder bestimmte Elemente oder Text, bestimmte Zeichenflächen oder alle Zeichenflächen im Projekt exportieren. Wenn Sie XD auf dem Mac verwenden, können Sie Elemente auch in andere Applikationen exportieren. Weitere Informationen finden Sie unter Integration von Drittanbieterapplikationen.

Elemente oder Zeichenflächen exportieren

  1. Alle Zeichenflächen exportieren: 

    Stellen Sie sicher, dass weder Zeichenflächen noch Elemente ausgewählt sind. Um gegebenenfalls eine Auswahl von Objekten oder Zeichenflächen aufzuheben, können Sie auf die Montagefläche (den grauen Bereich um die Zeichenflächen) klicken.

    Bestimmte Elemente oder Zeichenflächen exportieren:

    Sie können das Element oder die Zeichenfläche auswählen, das bzw. die Sie exportieren möchten. Um eine Zeichenfläche auszuwählen, klicken Sie auf den Titel der Zeichenfläche (Cmd/Strg + Klicken). Oder Sie öffnen das Bedienfeld Ebenen und wählen dort die Zeichenflächen aus, die Sie exportieren möchten. 

    Sie können auch Elemente oder Zeichenflächen für den Export markieren und sie dann zu einem späteren Zeitpunkt in einem Schwung in jedes Format exportieren, das XD unterstützt. Um Elemente für den Export zu markieren, öffnen Sie das Bedienfeld Ebenen und klicken auf das Symbol Für Export markieren  . Sie können auch mit der rechten Maustaste auf ein Element im Bedienfeld Ebenen klicken und Für Export markieren wählen.

    Hinweis:

    Um mehrere Objekte als einzelnes Element zu exportieren, müssen Sie die Objekte gruppieren, bevor Sie sie exportieren.

  2. Mac: Wählen Sie Datei > Exportieren. Windows: Klicken Sie auf das Hamburgermenü und wählen Sie Exportieren

    Wenn Sie im Bedienfeld Ebenen Zeichenflächen ausgewählt haben, klicken Sie mit der rechten Maustaste und wählen Exportieren.

    Folgende Exportoptionen stehen zur Verfügung:

    • Markierte: Mit dieser Option können Sie alle Elemente exportieren, die mit der Option Für Export markieren bereits für den Export markiert wurden.
    • Nur Ausgewählte: Mit dieser Option können Sie alle ausgewählten Elemente exportieren.
    • Alle Zeichenflächen: Um alle Zeichenflächen im Design zu exportieren, wählen Sie Alle Zeichenflächen.
    Optionen für das Exportieren von Elementen und Zeichenflächen
  3. Wählen Sie eine Zielplattform (Web, iOS oder Android) aus sowie das Dateiformat (PNG, SVG, JPG oder PDF).

  4. Um die Ausgabedateien zu speichern, geben Sie den Ordner an.

  5. Wenn Sie dazu aufgefordert werden, geben Sie an, für welche Auflösung die Elemente gestaltet wurden. Wenn Sie sich bei der Auflösung nicht ganz sicher sind, behalten Sie die Standardauflösung (1x) bei.

  6. Klicken Sie auf Exportieren.

Dateien ins PNG-Format exportieren

Für das PNG-Format exportiert XD alle zugehörigen Auflösungen für dieses Objekt. Wählen Sie das Format, für das Sie das Objekt gestaltet haben, um die richtigen Exportgrößen zu erhalten.

Wenn Sie das Objekt beispielsweise für 1x gestaltet haben, wird ein Rechteck in der Größe 10 x 10 mit einer Auflösung von 10 px x 10 px, 20 px x 20 px und 30 px x 30 px exportiert. Wenn Sie es für 2x erstellt haben, wird ein Rechteck in der Größe 10 x 10 mit einer Auflösung von 5 px x 5 px und 15 px x 15px exportiert. 

Wenn Sie Elemente als PNG-Dateien exportieren, müssen Sie auch festlegen, für welche Plattform sie exportiert werden sollen: Design, Web, iOS oder Android.

Optionen beim Exportieren ins PNG-Format
Optionen beim Exportieren ins PNG-Format

Design

Design: Die Standardoption. Das Element wird bei gleicher Größe (Auflösung 1x) ins PNG-Format exportiert.

Web

Die Elemente werden bei einer Auflösung von 1x oder 2x exportiert.

iOS

iOS hat drei Exportgrößen. Die Elemente werden bei einer Auflösung von 1x, 2x oder 3x exportiert. 

Bei den Standardgrößen für Zeichenflächen für verschiedene iOS-Geräte wird von einer Auflösung von 1x ausgegangen. Wenn Sie also die Standardwerte verwendet haben, behalten Sie beim Exportieren die Auflösung 1x bei. Allerdings haben Sie die Möglichkeit, für 2x zu gestalten, indem Sie die Breite und Höhe der Zeichenfläche verdoppeln.

Die folgende Infografik veranschaulicht, wie Ihre Designelemente für iOS exportiert werden, wenn Sie für 1x und 2x gestalten.

Elemente als PNG-Datei für iOS exportieren
Elemente als PNG-Datei für iOS exportieren

Android

Elemente werden für die folgenden Android-Bildschirmdichten 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 %)

Die folgende Infografik veranschaulicht, wie Ihre Designelemente für Android exportiert werden, wenn Sie für verschiedene Auflösungen gestalten.

Optionen beim Exportieren ins PNG-Format für Android
Optionen beim Exportieren ins PNG-Format für Android

Dateien ins SVG-Format exportieren

Wenn Sie ein Element ins SVG-Format exportieren, können Sie festlegen, ob es mit eingebetteten Bildern oder nur mit einem Link exportiert werden soll.

Optionen beim Exportieren ins SVG-Format
Optionen beim Exportieren ins SVG-Format

Einbetten:

Wenn ein Bild als eingebettetes Bild exportiert wird, wird das Bitmap-Bild kodiert und in die SVG-Datei eingebunden.

Link:

Wenn nur der Link zu einem Bild exportiert wird, wird das Bitmap-Bild separat gespeichert und die SVG-Datei enthält einen Verweis auf dieses Bild. 

Optimiert (Minified):

Aktivieren Sie die Option „Optimiert (Minified)“, wenn Ihre Elemente optimiert werden sollen.

Dateien ins JPG-Format exportieren

Wenn Sie Elemente (z. B. Fotos) als JPG-Dateien exportieren, können Sie dafür eine Qualitätsstufe festlegen. Wählen Sie einen Prozentwert in der Dropdown-Liste Qualität, wählen Sie den Zielordner aus und klicken Sie auf Exportieren.

Optionen beim Exportieren ins JPG-Format
Optionen beim Exportieren ins JPG-Format

Dateien ins PDF-Format exportieren

Beim Exportieren ins PDF-Format können Sie die Elemente oder Zeichenflächen in einer einzigen oder in mehreren PDF-Dateien exportieren.

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

Einzelne PDF-Datei:

Sie können mehrere Zeichenflächen oder Elemente auswählen und alle zusammen in einer einzigen PDF-Datei exportieren. Beim Erstellen der PDF-Datei werden die verschiedenen Zeichenflächen oder Elemente jeweils auf einer eigenen Seite platziert.

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.

Integration von Drittanbieterapplikationen

Sie können Ihre Designs jetzt in andere Applikationen einlesen, die mit XD integriert sind: Zeplin, Avocode, Sympli (nur auf Mac), Kite Compositor und ProtoPie. 

Dieser Abschnitt bietet einen allgemeinen Überblick über den Arbeitsablauf anhand des Beispiels Zeplin und XD auf Mac.

Diese Vorgehensweise funktioniert ebenfalls in XD auf Windows.

Hinweis:

Die Vorgehensweise ist geringfügig anders als bei der Applikation, die Sie verwenden. Genauere Informationen finden Sie in der Dokumentation zu Ihrer Applikation:

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

    Elemente nach Zeplin exportieren
    Elemente nach Zeplin exportieren

    Hinweis:

    Haben Sie mehrere Applikationen mit XD integriert, startet die Tastenkombination für Exportieren nach (⌥⌘E) die zuletzt verwendete Applikation.

  2. Klicken Sie in dem Dialogfeld, das geöffnet wird, 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 Ihre Anmerkungen zu verlieren.

    Der Importbildschirm in Zeplin
    Der Importbildschirm in Zeplin

    Die Zeichenflächen werden in Zeplin importiert.

    Die Zeichenflächen in Zeplin
    Die Zeichenflächen in Zeplin

Elementextrahierung in Design-Spezifikationen

Um Zeit zu sparen, können Sie den Entwicklern die Möglichkeit geben, Elemente aus Design-Spezifikationen zu extrahieren und herunterzuladen. Verwenden Sie diese Funktion, um Ebenen als Elemente für den Export zu markieren und als Design-Spezifikations-Link zu senden. Entwickler können alle Vektorelemente als SVG-, PNG- oder PDF-Dateien herunterladen und Bitmap-Elemente als PNG- oder PDF-Dateien.

Weitere Informationen finden Sie unter Elementextrahierung in Design-Spezifikationen.

Exportoptionen werden in Adobe XD nicht angezeigt?

Wenn Applikationen von Drittanbietern nicht unter der Option Datei > Exportieren angezeigt werden, lesen Sie die Informationen unter Unable to see supported third-party app in Export options (Unterstützte Applikation eines Drittanbieters wird in den Exportoptionen nicht angezeigt).

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie