kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Adobe XD – Einstieg und Praxis-Tipps

Adobe XD ist ein Programm für UX- und Interface-Designer. Mit XD können einzelne Screens im sog. »Design Mode« gestaltet und anschließend im »Prototype Mode« miteinander verknüpft werden. Somit lässt sich das Verhalten der finalen Anwendung in Form eines visuellen Clickdummies simulieren. Das Ergebnis kann anschließend als Video gespeichert oder in die Adobe-Cloud exportiert werden.

Das offizielle deutschsprachige Benutzerhandbuch ist sehr gut und soll hier nicht wiederholt werden. Wir möchten in übersichtlicher Form typische Anwendungsfälle schildern, sowie häufige Fragen unserer Seminar-Teilnehmer klären.

Workshops und Seminare von kulturbanause

Adobe XD, Performance, Responsive Design, Sketch, Visual Prototyping, Web Animationen, Corporate Design …

Jetzt Frühbucher-Rabatte sichern!

Dokument einrichten

Adobe XD unterstützt einen Workflow anhand von User Stories (Prototyping) und in Form von Design Systemen (Komponenten und Elemente). Da in der Freigabe von Dokumenten nur zusammenhängende Klick-Strecken exportiert werden, hat sich bei kulturbanause in der Praxis folgende Dokumentenstruktur als sinnvoll ergeben:

  • Datei 1 enthält das Design System (Farben, Texte, Komponenten etc.)
  • Datei 2 wird mit dem Design System verknüpft und zeigt eine einzelne User Story.
  • Weitere User Stories werden in weiteren Dateien angelegt.

Design Systeme verknüpfen

Um in einer Datei mit den Komponenten aus einer anderen Datei arbeiten zu können, muss diese verknüpft werden. Im Bedienfeld »Elemente« kann die Verknüpfung von Creative Cloud-Dokumenten eingerichtet werden.

Ausschnitt mit dem Bedienfeld »Elemente« aus dem Interface von Adobe XD
Im Bedienfeld »Elemente« können andere Dateien verknüpft werden

Zeichenflächen einrichten

Zeichenflächen erstellen

Adobe XD organisiert die verschiedenen Screens einer Website oder App auf einzelnen Zeichenflächen. Es ist üblich, dass ein Adobe XD-Dokument zahlreiche Zeichenflächen beinhaltet – auch in verschiedenen Größen.

Um eine neue Zeichenfläche hinzuzufügen, wählt das Zeichenflächenwerkzeug (A) aus. Rechts in den Eigenschaften stehen nun populäre Gerätegrößen als Voreinstellung zur Auswahl. Wenn ihr eine eigene Größe für die Zeichenfläche wählen möchtet, zieht einfach einen Rahmen auf. Zwischen Hoch- und Querformat kann erst gewechselt werden, wenn die Zeichenfläche erstellt wurde. Markiert die Zeichenfläche und stellt die gewünschte Ausrichtung rechts in den Eigenschaften ein.

Zeichenflächen anordnen

Neue Zeichenflächen werden von Adobe XD automatisch positioniert. Wenn eine Datei mehrere Zeichenflächen beinhaltet, möchte man jedoch häufig umorganisieren. Per Klick auf den Namen einer Zeichenfläche kann diese auf der Bühne verschoben werden.

Hilfslinien

Um Hilfslinien zu zeichnen, bewegt den Cursor links oder oben direkt neben die Zeichenfläche. Anschließend kann eine Hilfslinie ins die Zeichenfläche gezogen werden.

Raster und Layouts einblenden

Wenn eine Zeichenfläche ausgewählt ist, können Raster-Optionen gewählt werden. In den Eigenschaften können dazu Rasterkästchen oder Rasterspalten (Layout) konfiguriert werden. Zeilen werden aktuell noch nicht unterstützt.

Wenn Rasterkästen gewählt sind, bietet es sich an das Raster auf 10 Pixel einzustellen. Elemente können dann mit gedrückter Shift-Taste und den Pfeiltasten um genau eine Rasterzelle verschoben werden.

Zeichenflächen scrollbar machen

Die Abmessungen von Zeichenflächen können höher werden als der sichtbare Bereich (Viewport) der Zeichenfläche. Ist das der Fall, kann im Vorschau-Modus gescrolled werden. Dafür muss in den Einstellungen der Zeichenfläche das vertikale Scrollen erlaubt werden, sofern es sich nicht automatisch eingeschaltet hat.

Objekte erstellen und gestalten

Formen zeichnen und kombinieren

Über die Werkzeuge »Rechteck«, »Ellipse« und »Zeichenstift« können Vektor-Formen erzeugt werden. Zusätzlich können Vektoren aus anderen Programmen – z.B. aus Comp oder Illustrator – auf die Bühne kopiert werden.

Um zwei Formen miteinander zu kombinieren, markiert beide Objekte und wählt anschließend eine der sog. »Boolschen Optionen« aus. Formen können so miteinander verschmolzen oder voneinander abgezogen werden. Auch Schnittmengen etc. sind möglich.

In der Liste der Ebenen werden kombinierte Formen als entsprechende Gruppe gekennzeichnet. Es können jedoch nach wie vor alle Einzelbestandteile editiert werden.

»Responsive Design«

Adobe XD unterstützt in Höhe und Breite flexibel gestaltete Elemente. Gruppen von Elementen skalieren also nicht zwingend proportional, sondern richten sich aneinander aus: Wenn mehrere Elemente übereinander gezeichnet werden, erkennt XD automatisch das wahrscheinlich gewünschte Verhalten und nimmt entsprechende Einstellungen vor.

Das markierte Objekt soll immer unten rechts in der Gruppe positioniert werden und sich in Höhe und Breite nicht verändern.

Wenn das automatische Verhalten nicht zu gewünschten Ergebnissen führt, kann auf eine manuelle Einstellung umgeschaltet werden. Hier kann die Position in der Gruppe sowie eine feste Höhe und/oder Breite eingestellt werden. Dabei können folgende Tipps helfen:

  • Gruppiert die Objekte, die zusammen reagieren sollen!
  • Während der Skalierung einer Auswahl entstehen dünne rosafarbene Linien über den Objekten. Diese Linien zeigen an, wie die Objekte vom Verhalten eingestellt wurden
  • Wenn ihr während der Skalierung Shift gedrückt haltet, deaktiviert ihr das responsive Verhalten und transformiert die Gruppe wie aus Photoshop, Illustrator & Co. gewohnt.

Wenn das responsive Verhalten generell nicht gewünscht ist, kann es über das Bedienfeld rechts deaktiviert werden.

Farben, Verläufe und Grafiken einfügen

Wenn eine Form ausgewählt wurde, kann rechts in den Eigenschaften Füllfarbe, Kontur und Schatten hinzugefügt werden. Als Füllfarbe stehen auch lineare und radiale Verläufe zur Verfügung. Wenn eine Grafik als Hintergrund  eingefügt werden soll, zieht sie einfach per Drag and Drop auf die Form.

Farbfelder verwenden

Unten im Farbwähler können über ein Klick auf das Plus(+)-Icon Farbfelder hinzugefügt werden. Farbfelder ermöglichen schellen Zugriff auf häufig verwendete Farben. Um eine Farbe zu löschen, muss sie per Drag and Drop aus dem Bedienfeld gezogen werden.

Pfade editieren

Mit dem Pfad-Werkzeug können Pfade gezeichnet oder bestehende Formen editiert werden. Wenn ein bestehender Pfad um neue Pfadpunkte ergänzt werden soll, doppelklickt das Objekt mit dem Auswahlwerkzeug(!) auf der Bühne. Anschließend können neue Pfadpunkte gesetzt und bearbeitet werden.

Wenn der Pfad weitergezeichnet werden soll, wechselt nach dem Doppelklick auf das Pfadwerkzeug. Es wird der letzte Pfadpunkt angezeigt. Von dort aus kann der Pfad weitergezeichnet werden.

Bildausschnitte ändern

Wenn eine Form mit einem Bildhintergrund gefüllt wurde, kann der Bildausschnitt festgelegt werden, indem per Doppelklick »in das Objekt hinein navigiert wird«. Das Bild wird dann auch über die Kanten der Form hinaus sichtbar und kann skaliert oder positioniert werden.

Masken

Objekte und Grafiken können in XD auch maskiert werden. Dazu muss die Form, die als Maske dienen soll, in der Ebenenpalette oberhalb der Ebene liegen, die maskiert werden soll.

Anschließend wird über »Objekt → Mit Form maskieren« die Maske erstellt. In der Ebenenliste wird nun ein neues Icon für die Maske angezeigt. Per Klick auf das Icon kann die Maske geöffnet werden. So lassen sich beide Formen nachträglich editieren.

Texte erstellen und formatieren

Textrahmen vs. Textzeile

Wenn das Textauswahlwerkzeug gewählt ist, könnt mit einem Klick auf der Arbeitsfläche einen Punkttext erzeugen. Dieser kann über den Anfasser unten in der Mitte des Textes leicht in der Größe verändert werden.

Wenn ihr hingegen einen Rahmen mit dem Textwerkzeug aufzieht, erstellt ihr einen Textrahmen an dem der Fließtext umbricht.

Ihr könnt im Inspektor Punktexte in Textrahmen umwandeln und umgekehrt.

Mit diesen beiden Schaltflächen können Punkttexte in Textrahmen umgewandelt werden – und umgekehrt

Design Systeme

Komponenten

In Adobe XD können Objekte oder Gruppen als sog. Komponenten abgespeichert werden. Wenn eine Komponente mehrfach zum Einsatz kommt, sind Änderungen am Original (Master) in allen Instanzen sichtbar. 

Um eine Komponente zu erstellen, muss zunächst ein Element oder die Gruppe von Elementen auf der Bühne markiert werden. Anschließend kann im Bedienfeld »Elemente« die Auswahl als Komponente gespeichert werden. Auf der Bühne sind Komponenten an einer grünen Markierung erkennbar. Das Original hat oben links eine grüne Markierung.

Wir empfehlen alle Master-Komponenten an zentraler Stelle im Dokument zu pflegen und auf den einzelnen Zeichenflächen nur mit Instanzen zu arbeiten.

Eine XD-Komponente im Original (erkennbar an der grünen Markierung), mit Instanz rechts daneben

 

Änderungen an Primärkomponenten und Instanzen

Wenn eine Änderung an der Primärkomponente vorgenommen wird, aktualisieren sich alle davon abhängigen Instanzen. Wenn in einer Instanz eine Änderung vorgenommen wird, überschreibt diese Eigenschaft das Original. Es können also ausgehend vom Original beliebige Anpassungen vorgenommen werden.

Wenn eine Primärkomponente bearbeitet wird, obwohl Änderungen an den Instanzen vorgenommen wurden, wirkt sich die Anpassung am Original nur auf die Eigenschaften aus, die nicht verändert wurden. Das ermöglicht maximale Flexibilität im Design-Prozess.

Angepasste Instanzen resetten

Mit »Rechtsklick > Auf Primärkomponente zurücksetzen« können Anpassungen in den Instanzen zurückgesetzt werden.

Komponenten austauschen

Komponenten können in Adobe XD ausgetauscht werden, indem sie per Drag and Drop aus der Komponenten-Bibliothek auf die Komponente gezogen werden, die ersetzt werden soll.

Austausch des Hamburger-Icons durch das Home-Icon

Verknüpfte Komponenten

Komponenten können auch aus einem zweiten XD-Dokument kopiert werden. Sie sind dann mit dem Ursprungsdokument verknüpft. Erkennbar ist dies an einem grünen Verknüpfungs-Icon. Wenn die Komponente im Original-Dokument geändert wird, aktualisieren sich alle verknüpften Komponenten. Die Veränderung wird in XD per Mouse-Over in der Komponenten-Übersicht angezeigt. Änderungen an der verknüpften Komponente können nur vorgenommen werden, wenn die Verknüpfung über Rechtsklick > zuvor gelöst wird.

Component States

Komponenten können verschiedene Zustände (States) einnehmen, zwischen denen gewechselt werden kann. Auch ein Wechsel der Zustände in einem Prototypen ist möglich. Mit Component States können u.a. Mouse-Over-Effekte (Hover) und unterschiedliche Varianten von Komponenten umgesetzt werden.

Um States zu erstellen, muss zunächst eine Komponente erstellt werden. Anschließend stehen rechts in der Seitenleiste die States zu Verfügung. Es können beliebige Zustände eingerichtet und gestaltet werden. Es wird immer der Zustand verändert, der aktiv ist.

Im Prototyping-Mode muss zunächst in den gewünschten Ausgangszustand gewechselt werden. Dann wird als Ziel der Zustand gewählt, der erreicht werden soll.

Um hin und her schalten zu können, muss im zweiten Schritt vom neuen Zustand zurück in den Standardzustand gewechselt werden.

Wiederholungsraster

Adobe XD verfügt über ein sog. Wiederholungsraster. Wenn ein Objekt oder eine Gruppe von Objekten ausgewählt ist, kann über »Wiederholungsraster erstellen« in den Eigenschaften die Auswahl umgewandelt werden. Die farbige Markierung auf der Bühne wird zur Unterscheidung grün und der Auswahlrahmen erhält Anfasser. Wenn der Rahmen vergrößert wird, entstehen Kopien des Elements. Die Abstände zwischen den Kopien können per »Klick und ziehen« eingestellt werden.

Links im Ebenenbedienfeld wird das Wiederholungsraster als Gruppe angezeigt. Wenn ein Objekt innerhalb des Raster ausgewählt und verändert wird, wirken sich diese Änderungen auf alle Kopien aus.

Text und Bild im Wiederholungsraster

Das Wiederholungsraster kann sehr schön genutzt werden um komplexe sich wiederholende Komponenten mit unterschiedlichen Inhalten zu erzeugen.

Wenn beispielsweise ein Ordner mit Bildern genutzt werden soll, um ein Rechteck im Wiederholungsraster bei jeder Kopie mit einem anderen Bild zu füllen, zieht per Drag and Drop die Bildauswahl auf das Rechteck. Adobe XD »mischt« die Bilder dann ins Layout. Bei Texten funktioniert es ebenso – sofern die Textquelle im Reintext vorliegt (*.txt).

Per Drag and Drop können Bilder im Wiederholungsraster auf das Rechteck gezogen werden.
XD fügt die Bilder dann automatisch in allen Kopien ein.

Auf repeatgrid.com kann eine Textdatei mit Demo-Inhalten erzeugt werden. Das Tool ist für Adobe XD erstellt worden – kann aber auch in anderem Umfeld genutzt werden.

Tipps im Umgang mit dem Wiederholungsraster

  • Nutzt das Raster auch für kleine Elemente wie Icons, Trennlinien, Navigationen etc.
  • Wenn das Wiederholungsraster Texte Bilder oder beinhaltet, können diese in den Kopien verändert werden. Nachträgliche gestalterische Änderungen am Originaltext/-bild werden übernommen, die inhaltlichen Änderungen jedoch beibehalten.

Zeichenformate

Wenn ein Textrahmen unterschiedlich gestaltete Textabschnitte enthält, werden separate Zeichenformate erzeugt, sobald in den Elementen ein Format hinzugefügt werden soll.

Farbsets

In den Elementen können Farben zur mehrmaligen Verwendung gespeichert werden. Wenn eine Farbe nachträglich geändert werden soll, kann über einen Rechtsklick der Farbwähler wieder aktiviert werden. Es ändern sich alle Vorkommnisse dieser Farbe im Dokument.

Prototyping

Elemente beim Scrollen fixieren

Wenn Elemente beim Scrollen fixiert werden sollen, markiert das entsprechende Objekt und setzt den Haken »feste Position« in den Eigenschaften. Die Eigenschaft ist seit Juni 2019 im Bereich »Prototyping« untergebracht.

Objekte können im Prototyp-Modus fixiert werden. Sie bleiben beim Scrollen stehen.

Animation nicht auswählbar

Wenn in Adobe XD der Animationstyp von einer Zeichenfläche zu einer anderen nicht auswählbar ist, sondern ausgegraut auf der Einstellung »Ausblenden« steht, stimmen die Größen der Viewports bzw. Zeichenflächen nicht überein. Adobe XD kann Übergange nur animieren, wenn der Viewport der Start- und Ziel-Zeichenfläche identisch ist.

Overlays im Prototyp positionieren

Im Prototyping-Modus kann nicht nur von einer Zeichenfläche zu einer anderen navigiert werden – eine Zeichenfläche kann auch als Overlay verwendet werden. Wenn das Overlay kleiner ist als die Zeichenfläche vor der es positioniert werden soll, kann es über die grünen Anfasser positioniert werden.

Zur »vorherigen Seite« im Prototyp verlinken

In vielen Prototypen kommt es vor, dass ein gestalteter Screen von mehreren Ausgangspunkten aus erreichbar ist. Es wäre beispielsweise denkbar in einem Online-Shop von verschiedenen Unterseiten aus den Warenkorb zu betreten. Wenn man nun den Warenkorb wieder schließt, möchte man voraussichtlich zu der Seite zurückkehren von der aus man den Warenkorb geöffnet hat. Der Schließen-Button des Warenkorbs muss dazu in Adobe XD mit der »vorherigen Seite« verlinkt werden. Eine manuelle Verlinkung mit einer bestimmten Zeichenfläche führt hier nicht zum Erfolg.

Bitte beachtet, dass die Verlinkung zur »vorherigen Seite« in der Adobe XD-Vorschau nicht funktionieren kann, wenn zuvor keine Seite besucht wurde.

Auto-Animationen

Mit Auto-Animationen können Veränderungen an Objekten zwischen zwei Zeichenflächen animiert werden.

  • Wenn ein Objekt nicht auf allen an der Animation beteiligten Zeichenflächen vorhanden ist, entsteht häufig ein unerwünschter Effekt. XD kann nur dann eine saubere Animation erstellen, wenn Start- und Endzustand des Objekts definiert sind. Wenn Elemente also aufgefahren oder eingeblendet werden sollen, kann es helfen die Deckkraft auf 0% zu reduzieren bzw. in Höhe oder Breite auf 1px zu reduzieren und die Farbe anzupassen. Das Element wird somit im Ursprungszustand optisch unsichtbar – ist aber technisch auf der Zeichenfläche vorhanden.
  • Sollte die Animation trotzdem nicht wie gewünscht funktionieren, hilft es den Ebenennamen in allen an der Animation beteiligten Zeichenflächen einheitlich zu wählen.

Designing with Data

Mit dem Plugin Data Populator kann eine JSON-Datei als Datenquelle genutzt werden. JSON ist ein strukturiertes Datenformat. Folgender Code kann als Beispiel verwendet werden um eine Liste von drei Büchern zu laden.

[
  {
    "title": "WordPress-Themes entwickeln und gestalten",
    "cover": "https://media.kulturbanause.de/2016/03/wordpress-themes-erstellen-gestalten-jonas-hellwig-rheinwerk-verlag-2-129x180.jpg"
  },

  {
    "title": "Responsive Webdesign",
    "cover": "https://media.kulturbanause.de/2014/12/responsive-webdesign-cover-1-125x180.jpg"
  },

  {
    "title": "Modernes Webdesign mit Jonas Hellwig",
    "cover": "https://media.kulturbanause.de/2014/07/modernes-webdesign-jonas-hellwig-cover1-1-125x180.jpg"
  }
]

Um in XD mit JSON-Daten zu arbeiten, muss ein Wiederholungsraster verwendet werden. Die Ebenennamen innerhalb des Rasters müssen so gewählt sein, dass eine Zuordnung stattfinden kann. Dazu wird immer der Wert in geschwungenen Klammern verwendet. Wenn beispielsweise das Buchcover aus der Beispieldatei geladen werden soll, muss die Ebene {cover} genannt werden.

Unter »Plug-In > Data Populator > Populate with JSON« kann die JSON-Datei geladen werden.

Nach einem Klick auf »Populate« werden die Daten geladen.

Wenn nun erkennbar ist, dass die echten Daten nicht so funktionieren wie erwartet, kann das Wiederholungsraster unkompliziert angepasst werden.

Import, Export und Präsentation

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

Über den Freigeben-Button kann die Präsentation für Reviewer bzw. der Export an Entwickler angestoßen 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.

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.

Versionierung

Wenn das Dokument in der Cloud gespeichert wurde, erstellt XD automatische Zwischenschritte der Datei. Erreichbar sind diese Versionen über einen Klick auf den Dateinamen oben im Programm. Die Versionen können markiert oder benannt werden.

Tastaturbefehle / Shortcuts

In Adobe XD stehen zahlreiche Tastaturbefehle (Shortcuts) zur Verfügung um häufige Programmfunktionen schneller aufrufen zu können. Die folgenden Tastaturbefehle werden besonders häufig benötigt.

  • cmd + 1 Dokument auf 100% zoomen
  • cmd + 2 Dokument auf 200% zoomen
  • cmd + 3 Das ausgewählte Objekt so nah heranzoomen wie möglich
  • cmd + 0 Alle Zeichenflächen zeigen
  • cmd + shift + ü Layout einblenden
  • cmd + ü Rasterkästchen einblenden
  • cmd + ä Ausgewähltes Objekt in der Ebenenhierarchie nach oben schieben (optisch nach vorne)
  • cmd + ö Ausgewähltes Objekt in der Ebenenhierarchie nach unten schieben (optisch nach hinten)

Eine Liste aller Tastaturbefehle lässt sich im Handbuch von XD nachschlagen.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

6 Kommentare

  1. Frauke Baumann

    Verfasst am 27. Februar 2019 um 10:38 Uhr.

    Vielen Dank für diese gut ausgearbeitete Einführung in XD. Im Zeichnen, Male, Designen, bin ich recht gut und kann mit XD wunderschöne Layouts erstellen. Aber dann weiter. Wie komme ich als „normaler durchschnittlicher“ Kenner von HTML und CSS, zu einer Internetseite mit gleichem, oder ähnlichem Aussehen. Dieser Schrittfehlt mir. Auch auf den ADOBE-Videos sieht man immer nur, wie etwas designt wurde, aber wie das dann umgesetzt wird? Dieser Schritt und Erkenntnis, fehlt mir noch.

    • Jonas Hellwig

      Verfasst am 27. Februar 2019 um 17:58 Uhr.

      Hallo Frauke, mit XD erstellt man Layouts und Prototypen, keine fertigen Websites. Es gibt lediglich die Möglichkeit eine Design-Spezifikation bzw. einzelne Elemente für Entwickler freizugeben.

  2. JK

    Verfasst am 29. August 2019 um 14:08 Uhr.

    Interessanter Überblick!
    Ich hätte mir noch ein wenig mehr Info zum handoff an den Programmierer gewünscht.

    Ein Tippfehler bei Import, Export und Präsentation hat mich auch sehr amüsiert:
    „… und Steakholdern präsentiert werden.“

    Den Job nehme ich!

    ;-)

    • Jonas Hellwig

      Verfasst am 29. August 2019 um 15:55 Uhr.

      haha – sehr gut. Ist geändert :)
      Die Funktionen zu Export etc. ändern sich aktuell noch sehr häufig. Sobald sich das beruhigt gehen wir hier mit Videos und Texten in die Tiefe. Aktuell fassen wir in diesem Beitrag nur die typischen Fragen aus Schulungen zusammen.

  3. Olli

    Verfasst am 27. November 2019 um 10:21 Uhr.

    Hallo,
    besteht die Möglichkeit (oder gibt es ein Plugin, das ich noch nicht gefunden habe), die Design Spezifikationen gleich mit anzuzeigen (für alle Komponenten auf einer Seite)?
    Man kann sich ja einen Link für Entwickler generieren und dann über den Link die Design Spezifikationen aktivieren. Man muss dann aber immer auf eine jeweilige Komponente mit der Maus gehen um die Maße bzw Abstände zu sehen.
    Ich hatte mal ein Plugin für Fireworks, Specctr hieß das (www.Specctr.com)… Das konnte das. Das gibt es denke ich noch für ID, ID und PS…
    Für XD leider nicht, aber gibt es ein ähnliches Plugin bzw. gibt es eine ähnliche Funktion in XD?

    Danke schon mal

    • Jonas Hellwig

      Verfasst am 27. November 2019 um 18:24 Uhr.

      Hallo Olli,
      ich kenne kein direktes Plugin für XD – verstehe aber dein Bedürfnis nach dieser Übersicht sehr gut. In Zeplin kannst du Design Specs wahrscheinlich so darstellen wir gewünscht. Aber das ist eine eigenständige, kostenpflichtige Software. Für ein Projekt gibt es eine Demo.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.