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

Sie haben die Möglichkeit, produktionsreife Assets 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- oder 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.

Designelemente und Zeichenflächen exportieren

  1. Mac: Um Designelemente zu exportieren, 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: Wenn Sie diese Option wählen Sie, werden alle Zeichenflächen in Ihrem Design exportiert.

    Wie Sie Elemente in Design-Spezifikationen einbinden, erfahren Sie unter Assets aus Design-Spezifikationen exportieren

    Optionen für das Exportieren von Elementen und Zeichenflächen

    Hinweis:

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

  2. Wählen Sie eine Zielplattform (Web, iOS oder Android) aus sowie das Dateiformat (PNG, SVG, JPG oder PDF).

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

  4. 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.

  5. Klicken Sie auf Exportieren.

Design-Assets ins PNG-Format exportieren

  1. Mac: Um Designelemente zu exportieren, wählen Sie Datei > Exportieren. Windows: Klicken Sie auf das Hamburgermenü und wählen Sie Exportieren

  2. Wählen Sie in der Dropdown-Liste Format die Option PNG aus. XD exportiert alle zugehörigen Auflösungen für dieses Objekt.

  3. Wählen Sie die Plattform aus, für die sie exportiert werden sollen: DesignWebiOS oder Android und klicken Sie auf Exportieren.

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

Designelemente 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

Design-Assets ins SVG-Format exportieren

  1. Mac: Um Designelemente zu exportieren, wählen Sie Datei > Exportieren. Windows: Klicken Sie auf das Hamburgermenü und wählen Sie Exportieren

  2. Wählen Sie in der Dropdown-Liste Format die Option SVG aus.

  3. Wählen Sie eine Formatierungsoption aus und legen Sie fest, ob die Bilder als eingebettete oder verknüpfte Bilder (Link) gespeichert werden sollen.

    • Formatierung: Wählen Sie aus, ob visuelle Formatierungsinformationen im SVG-Markup als Präsentationsattribute oder Internes CSS gespeichert werden. Für SVG ist die Formatierung standardmäßig auf Präsentationsattribute gesetzt, da es die Kompatibilität mit gängigen Entwicklertools verbessert, z. B. beim Exportieren von SVG-Dateien in Android Studio.
      • 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.

    Bilder speichern: Sie können Bilder als eingebettete oder verknüpfte Bilder (Link) speichern.

    • 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. 
    Design-Assets ins SVG-Format exportieren
    Design-Assets ins SVG-Format exportieren
  4. Mit der Option Dateigröße optimieren (Minify) (Mac) bzw. Optimiert (Minified) unter Dateigröße (Windows) können Sie Elemente optimieren.

Design-Assets ins JPG-Format exportieren

  1. Mac: Um Designelemente zu exportieren, wählen Sie Datei > Exportieren. Windows: Klicken Sie auf das Hamburgermenü und wählen Sie Exportieren.

  2. Wählen Sie in der Dropdown-Liste Format die Option JPG aus.

    Design-Assets ins JPG-Format exportieren
    Design-Assets ins JPG-Format exportieren
  3. Wenn Sie Assets (z. B. Fotos) als JPG-Dateien exportieren, können Sie dafür eine Qualitätsstufe festlegen. Wählen Sie in der Dropdown-Liste Qualität einen Prozentwert aus und aktivieren Sie neben Exportieren für die Option Design oder Web.

Design-Assets ins PDF-Format exportieren

  1. Mac: Um Designelemente zu exportieren, wählen Sie Datei > Exportieren. Windows: Klicken Sie auf das Hamburgermenü und wählen Sie Exportieren.

  2. Wählen Sie in der Dropdown-Liste Format die Option PDF aus. Sie können sie als die Elemente oder Zeichenflächen in einer einzigen oder in mehreren PDF-Dateien exportieren.

    Design-Assets ins PDF-Format exportieren
    Design-Assets ins PDF-Format exportieren
  3. 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.

  4. Klicken Sie dann auf Exportieren.

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. 

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

Die 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 der Tastaturbefehl 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

Assets für Design-Spezifikationen extrahieren

Verwenden Sie diese Funktion, um Ebenen als Assets 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 Exportieren und Herunterladen von Assets aus Design-Spezifikationen.

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).

Wenn Sie Ihre Datei nicht exportieren können, lesen Sie die Seite Why can't I import or export files in Adobe XD? (Warum kann ich Dateien in Adobe XD nicht importieren oder exportieren?)

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

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