Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Import & Export mit Adobe XD

Adobe XD verfügt über integrierte Präsentations- und Übergabe-Funktionen. Erstellte Layouts und Prototypen können über die Adobe Cloud Kunden und Steakholdern präsentiert werden. Eine Kommentarfunktion kann ebenfalls genutzt werden.

Entwickler sehen zusätzlich Schriftgrößen, Farben, Abstände, CSS-Code und andere notwendige Funktionen. Elemente die innerhalb von XD für den Export vorgesehen wurden, stehen als Download in den Formaten SVG, PNG und PDF zur Verfügung.

Inhalte

XD-Dokumente für den Export freigeben

Um den Export anzustoßen, wechselt in den Modus »Freigeben« und wählt rechts den Export für die Entwicklung aus. Ihr generiert einen Link zur Adobe-Cloud, der mit jeder Person geteilt werden kann – unabhängig davon, ob diese Person selbst eine XD-Lizenz besitzt.

Screenshot von Adobe XD mit aktivem Export-Dialog für die Entwicklung
Die Freigabe von Dokumenten in der Adobe Cloud

Alle Zeichenflächen und Screens exportieren

Standardmäßig exportiert Adobe XD nur die Screens, die in einem Prototypen miteinander verbunden wurden. In der Praxis führt diese Funktion regelmäßig zu Verwirrung, da einzelne Zeichenflächen versehentlich nicht an die Entwicklung übergeben werden.

Der Trick besteht darin, dass Home-Icon, welches üblicherweise den Startpunkt eines Prototypen festlegt, zu deaktivieren. Anschließend werden alle Screens exportiert.

Oben: Das Standardverhalten von XD. Es wird exportiert was verbunden ist. Unten: Export aller Screens

Editierbare Vektoren aus anderen Adobe-Programmen importieren

Mockups können sehr schön mit Adobe Comp erstellt werden. Da das Programm bisher keinen direkten Export zu XD ermöglicht, muss der Umweg über Illustrator gegangen werden. Das funktioniert einwandfrei.

Auch aus Photoshop können Vektoren kopiert werden. Am einfachsten ist es, wenn die Vektor-Form in Photoshop über einen Rechtsklick im Ebenenbedienfeld als SVG kopiert wird. Anschließend kann in XD alles wieder eingefügt werden.

SVG-Code kann per Copy & Paste in XD importiert werden. Der sich in der Zwischenablage befindende Code wird dann auf der Arbeitsfläche von XD direkt gerendert und die Grafik dargestellt.

Import aus anderen Adobe-Anwendungen bzw. der Creative Cloud

Wenn vollständige Dokumente aus einem anderen Adobe-Programmen in XD übernommen werden sollen, importiert das Dokument über »Datei öffnen«.

Wenn nur einzelne Grafiken oder Assets, die in der Creative Cloud Bibliothek liegen, importiert werden sollen, öffnet über »Datei > CC Bibliothek öffnen« das entsprechende Bedienfeld. Anschließend können per Drag and Drop Elemente auf der Bühne platziert werden. Wenn nachträglich Änderungen im Ursprungsprogramm (z. B. Photoshop oder Illustrator) gemacht werden, aktualisiert XD diese Änderungen automatisch über die Adobe Cloud.

Zeichenflächen oder Elemente als Datei exportieren

Um einzelne Zeichenflächen oder Elemente als JPG-, PNG oder SVG-Datei zu exportieren, müssen zunächst die gewünschten Objekte für den Export markiert werden. Aktiviert dazu zunächst das Export-Icon im Bedienfeld Ebenen. Das Icon wird per Mouse-Over angezeigt.  Anschließend wählt ihr »Datei > Exportieren > Nur ausgewählte«. Das Dateiformat kann im darauffolgenden Dialogfenster gewählt werden.

Alternativ zu den ausgewählten Objekten, können über »Datei > Exportieren« auch alle Zeichenflächen oder alle markierten Objekte/Zeichenflächen exportiert werden.

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, UX/UI und Frontend-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →