Import & Export mit Adobe XD
Von Jonas Beim Export von XD solltet ihr einige Dinge beachten, damit gute Ergebnisse erreicht werden.
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.
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.
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
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.
