Exportieren von Design-Assets

Produktionsreife Assets aus Adobe XD ins PNG-, SVG-, JPG- oder PDF-Format exportieren

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-Anwendungen optimiert.

Wenn Sie auf dem Mac mit XD arbeiten, können Sie Ihre Designs jetzt auch in Integrationen von Drittanbietern wie ZeplinAvocodeSympliKite Compositor oder Protopie einlesen.

Elemente und Zeichenflächen exportieren

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 Designprojekt 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 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 Assets Bitmap-Bilder, Symbole oder Hintergrund-Muster, die Sie in den folgenden Formaten exportieren können:

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.

Wenn Sie Assets im JPG-Format 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.

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

Wenn Sie Objekte oder Zeichenflächen im SVG-Format exportieren, können Sie den visuellen Stil auf Präsentationsattribute oder Internes CSS setzen. 

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

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.

Wenn Sie PNG auswählen, können Sie die Assets für die folgenden Plattformen exportieren:

  • 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: 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.

  • 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 %)

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

  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 in diesem Artikel Lösungen.

Weitere Informationen

Im folgenden Tutorial lernen Sie, wie Sie Assets aus XD exportieren.

Dauer: 2 Minuten

Fehlerbehebung

Haben Sie Probleme mit dem Exportieren von Assets? Lesen Sie diesen Artikel, um exportbezogene Probleme zu beheben.

Noch Fragen oder Ideen?

Fragen Sie die Community

Möchten Sie, dass Ihr Design-Tool zusätzliche Arbeitsabläufe 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