XD-Dokumente für die Entwicklung freigeben (Developer Export)
Von: Jonas, Robert, Raimund Die reibungslose Übergabe von XD-Designs an die Entwicklung hängt maßgeblich davon ab, wie organisiert im Programm gearbeitet wurde und ob die XD-Funktionen für Design-Systematiken verwendet wurden.
Bei der Übergabe von XD-Dokumenten aus dem Design an die Entwicklung – auch »Hand-Off« genannt – sollten einige Dinge beachtet werden. Einerseits müssen in XD die richtigen Funktionen genutzt worden sein. Entscheidender ist jedoch ein ordentlich strukturiertes und aufgeräumtes Dokument.
Wir kennen die Herausforderungen aus Sicht eines Design-Teams und aus Sicht des Frontend-Teams sehr gut. Die folgenden Tipps fassen zusammen, was unserer Erfahrung nach für eine gute Übergabe notwendig ist und welche Fragen Personen in unseren XD-Schulungen gestellt haben.
XD Dokumente für die Entwicklung freigeben
XD verfügt über Funktionen, um Dateien per Klick an die Entwicklung zu übergeben. 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.
So unkompliziert die Funktion auch ist, die Qualität, die sich hinter diesem Link verbirgt hängt maßgeblich davon ab, ob ihr die nachfolgend beschriebenen Punkte berücksichtigt.
Datei organisieren
Räumt eure Datei auf! Zusammenhängende Sinnabschnitte sollten gruppiert sein. Zeichenflächen müssen sinnvoll benannt sein. Die Gestaltung sollte möglichst konsistent sein.
Wenn ihr Prototyping-Funktionen genutzt habt, könnt ihr verschiedene Klick-Strecken in einzelnen Flows organisieren. Ihr habt dann die Möglichkeit für jeden Flow einen eigenen Link zu erzeugen,.
Farben und Schriften
Farben und Schriften sollten in der Dokument-Bibliothek abgelegt und benannt sein. Insb. die Benennung hilft in der Entwicklung enorm, da direkt ersichtlich ist, welche Farbe für die Gestaltung verwendet wurde. Im Idealfall arbeitet ihr zu 100% mit Farben und Schriften, die als Stil in der Bibliothek abgelegt sind.
Wählt Namen, die den Zweck des Stils beschreiben, nicht das Aussehen. Nennt eure Farben also besser »Highlight Color« als »Orange« und eure Schriften besser »Page Heading« als »h1« usw.
XD exportiert alle in der Bibliothek abgelegten Stile als CSS-Variablen. Räumt die Bibliothek unbedingt auf, bevor ihr den Link für die Entwicklung erzeugt. Ihr könnt herausfinden, ob eine Farbe oder Schrift im Einsatz ist, indem ihr einen Rechtsklick auf den Eintrag in der Bibliothek macht. Anschließend wählt ihr »Auf Arbeitsfläche hervorheben«. Die Reihenfolge der Farbfelder wird 1:1 im Export angezeigt. Ihr könnt sie in XD per Drag & Drop verschieben.
Wenn ihr mit transparenten Farbwerten arbeitet, dann legt auch diese transparenten Farben in der Bibliothek ab. Wenn ihr innerhalb des Farbwählers die Deckkraft des Farbtons reduziert, könnt ihr auch transparente Farben abspeichern. Vermeidet es, Transparenzen über reduzierte Deckkraft von Objekten zu erzeugen.
Fasst die verwendeten Schriften bzw. Farben auf einer eigenen Zeichenfläche zusammen. Man sieht so auf einen Blick, welche Stile es gibt und kann die Werte an zentraler Stelle ablesen. Achtet dabei auf barrierefreie Farbkontraste.
Raster und Abstände
Wenn ihr mit Gestaltungsrastern für Zeichenflächen arbeiten möchtet, tut das gerne. Das Raster wird im Developer-Export allerdings nicht angezeigt und die exakte Breite von Spalten ist für eine moderne Umsetzung auch weniger relevant. Für das responsive Design müssen die Breitenangaben ohnehin in flexible Einheiten überführt werden.
Innen- und Außenabstände
Wichtig als das Gestaltungsraster sind die Abstände zwischen Objekten bzw. innerhalb eines Objekts. Wir empfehlen die Abstände so zu wählen, dass der Wert durch 8 oder durch 4 teilbar ist. Das entspricht dem sog. 8pt-Grid, lässt sich im Code unkompliziert abbilden und führt auch bei Zoom und Skalierung zu glatten Werten.
Arbeitet unbedingt mit Stapeln und Abständen in XD. Beide Funktionen bieten den Vorteil, dass die Abstände innerhalb oder zwischen Objekten immer eingehalten werden – auch wenn die Objekte selbst sich in der Größe verändern.
Spacing-Hierarchie
Ihr könnt auch mit einer sog. Spacing-Hierarchie arbeiten. Ähnlich wie bei Farben und Schriften legt ihr zentral einige Abstände fest, die ihr für bestimmte Situationen im Layout einsetzen wollt. Da XD dafür keine Funktion anbietet, bleibt euch aktuell nichts anderes übrig, als die Hierarchie auf einer eigenen Arbeitsfläche zu dokumentieren. In der technischen Umsetzung werden diese Abstände ebenfalls als Variablen festgelegt.
Container-Breiten
Denkt daran zu visualisieren, wie breit das Layout bzw. einzelne Layout-Bereiche maximal werden sollen. In den meisten Fällen hat eine Website eine maximale Breite. Auf sehr großen Bildschirmen stoppt das Layout an dieser Maximalbreite und richtet sich in der Bildschirmmitte aus. Farbige Flächen oder Fotos laufen häufig darüber hinaus und erstrecken sich bis zur Bildschirmkante.
Komponenten
Wiederkehrende Elemente müssen in Komponenten organisiert sein. Im Idealfall setzt ihr die einzelnen Seiten eures Layouts vollständig aus Komponenten zusammen. Damit ist auch der Umfang des Projekts gut erkennbar, da die Liste der zu programmierenden Komponenten feststeht.
Benennt die Komponenten in der Bibliothek mit einem englischen Namen ohne Leer- und Sonderzeichen. Die Benennung kann dann auf den Code übernommen werden, was auch die spätere Kommunikation dazu vereinfacht.
Achtet bei Komponenten darauf, dass keine unbenutzten Komponenten bei der Übergabe in der Bibliothek liegen. Ihr könnt herausfinden, ob eine Komponente irgendwo im Einsatz ist, indem ihr einen Rechtsklick auf die Komponente in der Bibliothek macht. Anschließend wählt ihr »Auf Arbeitsfläche hervorheben«.
Zustände (States)
Komponenten können mit Zuständen verstehen werden. Macht davon Gebrauch, wenn ihr z.B. farbliche Varianten oder geöffnete und geschlossene Zustände von Komponenten plant.
Für alle interaktiven Elemente sollten die in HTML/CSS vorgesehenen States ebenfalls abgebildet werden. Beachtet bitte, dass es z.B. bei Buttons mehr als nur Normal und Mouse-Over gibt – auch wenn XD diese Zustände nicht von Haus aus vorschlägt.
Eine Übersichts-Zeichenfläche pro Komponenten erstellen
Jede Komponente sollte auf einer eigenen Zeichenfläche organisiert sein. Auf dieser Zeichenfläche sollten auch alle Ausprägungen zu sehen sein, die diese Komponente einnehmen kann. Also z.B. die verschiedenen States, Größen etc.
Responsive Design
Erstellt alle Komponenten in der kleinsten möglichen Breite und nutzt XD-Funktionen wie »Responsive Resize« um die Komponente in der Breite vergrößern zu können. Dieses Vorgehen entspricht dem Mobile First-Prinzip.
Wenn die Komponente über Breakpoints verfügt, müsst ihr eine Komponente pro Layout erstellen. Wenn es also beispielsweise den Header in einer mobilen Ansicht und in einer Ansicht für Desktop-Computer gibt, dann legt ihr dafür in XD zwei Komponenten an. Jede dieser Komponenten wird in der schmalsten Version, die es für dieses Layout gibt, angelegt. In der technischen Umsetzung orientiert man sich dann an dieser kleinsten Größe und setzt dort den Breakpoint. Damit habt ihr in der Gestaltung die größtmögliche Kontrolle darüber, dass das umgesetzte Layout sich so verhält wie von euch geplant.
Wie bereits zuvor bei den Komponenten beschrieben, macht es Sinn eine Übersichts-Zeichenfläche pro Komponente anzulegen. Hier solltet ihr auch die verschiedenen responsiven Layouts dokumentieren.
Assets bereitstellen
Für die technische Umsetzung werden auch Icon, Fotos, Schriften etc. benötigt. Stellt diese sog. Assets der Entwicklung zur Verfügung.
Icons, Fotos und Grafiken aus XD exportieren
Damit im Entwickler-Export grafische Elemente wie Icons oder Fotos heruntergeladen werden können, sind zwei Schritte notwendig:
- Die Ebene, Komponente oder Gruppe muss in der Ebenenpalette für den Export markiert sein. Dazu aktiviert ihr das Export-Icon, welches euch per Mouse-Over über die Ebene in der Ebenepalette angezeigt wird.
- Im Freigabe-Dialog muss der Haken bei »Als Download verfügbar« gesetzt sein.
Wenn beide Voraussetzungen erfüllt sind, steht die markiere Ebene im Export-Link als Download zur Verfügung. Das Dateiformat kann dann frei zwischen jpg, png, svg und pdf gewählt werden.
Icons und Grafiken in Pfade umwandeln
Wenn ihr Objekte aus mehreren Ebenen zusammengesetzt habt, dann wählt »Objekt > Pfad > In Pfad konvertieren« um ein geschlossenes Pfad-Objekt zu erzeugen. Das verbessert u.a. den Export im SVG-Format.
Wenn ihr Konturen bei der Gestaltung von Icons und Grafiken verwendet habt, dann wandelt diese Konturen in Pfade um (Objekt > Pfad > Konturlinie).
Schriften bereitstellen
Schriften können in XD nicht heruntergeladen werden. Stellt der Entwicklung daher die Schriften in einem Webfont-Format (z.B. woff2) zur Verfügung.
Kommunikation
Kommuniziert nicht nur zum Zeitpunkt der Übergabe, sondern regelmäßig über den gesamten Projektverlauf hinweg. Das betrifft nicht nur Design und Entwicklung – auch Personen aus der SEO, Marketing oder Redaktion sollten frühzeitig Einfluss nehmen können.
Checkliste Adobe XD Export für Entwicklung
- Alle verwendeten Farben sind in der Bibliothek abgelegt und benannt
- Alle verwendeten Schriftstile sind in der Bibliothek abgelegt und benannt
- Es sind konsistente Abstände verwendet worden
- Wiederkehrende Objekte sind in Komponenten gestaltet. Für Varianten sind Zustände verwendet worden.
- Layouts und Komponenten sind »pro Breakpoint« in schmalster Breite abgebildet
- Maximale Breiten von Layout-Bereichen sind dokumentiert
- Für Links und Buttons sind die notwendigen States gestaltet
- Nicht benutzte Farben, Schriften und Komponenten sind aus der Bibliothek entfernt
Geschrieben von:
Robert Menzel
Raimund Büchner
