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

Adobe XD unterstützt einen Workflow anhand von User Flows (Prototyping) und auf Grundlage von Design Systemen/Bibliotheken. Die Elemente einer Bibliothek stehen in allen Dokumenten zur Verfügung, die mit der Bibliothek verknüpft sind. Wenn nachträglich Änderungen an der Bibliothek vorgenommen werden, aktualisieren sich die abhängigen Dateien.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: Adobe XD

Dokumentstruktur in Adobe XD

Aus unserer praktischen Erfahrung mit XD-Projekten empfiehlt es sich folgende Dokumentenstruktur.

  • XD-Datei 1 dient als Quelle für die Bibliothek und beinhaltet Farben, Texte, Komponenten etc.
  • XD-Datei 2 wird mit dem Design System verknüpft und zeigt einen oder mehrere User Flows.

Es sind auch stärker verzweigte Abhängigkeiten möglich. Auch kann ein XD-Dokument Daten aus verschiedenen Bibliotheken beziehen etc.

Bibliotheken aus XD-Dokumenten erstellen

Wenn ein XD-Dokument Design-Systematiken wie Farben, Zeichenformate oder Komponenten beinhaltet, kann aus dem Dokument eine Bibliothek erzeugt werden. Öffnet dazu das Bibliotheken-Bedienfeld von XD und klickt anschließend oben rechts auf das »Teilen«-Icon oder wählt im Menü »Datei → Bibliotheken verwalten«. Es erscheint ein Dialog zum Erzeugen der Bibliothek. 

Freigabe-Icon zur Erzeugung von Bibliotheken in Adobe XD
Freigabe-Icon zur Erzeugung von Bibliotheken in Adobe XD
Erzeugung einer Bibliothek aus einem XD-Dokument
Erzeugung einer Bibliothek aus einem XD-Dokument

Bibliotheken in anderen XD-Dokumenten nutzen

Sobald eine Bibliothek veröffentlich wurde, kann diese für alle eingeladenen Personen in anderen XD-Dokumenten aufgerufen werden. Dazu muss im Bedienfeld »Bibliothek« oben von den »Dokument-Assets« zurück navigiert werden. Anschließend wird die gewünschte Bibliothek ausgewählt und die Bestandteile wie gewohnt benutzt. 

Auswahl einer Bibliothek in Adobe XD
Auswahl einer Bibliothek in Adobe XD

Komponenten aus der Bibliothek erkennt ihr an dem grünen Verkettungs-Symbols oben links. Wenn die Komponente von der Bibliothek gelöst werden soll, wählt im Kontextmenü (Rechtsklick) den Eintrag »Verknüpfung der Komponente aufheben«. 

Mit einer Bibliothek verkettete Komponente
Mit einer Bibliothek verkettete Komponente

Aktualisierung der Bibliothek

Wenn im ursprünglichen XD-Dokument eine Änderung vorgenommen wird, informiert euch XD darüber, dass die Bibliothek in der Cloud noch aktualisiert werden muss, damit die Änderung auch in allen abhängigen Dateien sichtbar wird. Solltet ihr die dazu kurz angezeigte Meldung verpassen, wählt unter »Datei → Bibliotheken verwalten« den Eintrag »Aktualisieren«. 

Die abhängigen Dokumente zeigen anschließend blau an, welche Objekte verändert wurden. Per Klick können die Änderungen akzeptiert werden. 

XD Bibliotheken vs. Cloud Bibliotheken

Es gibt einen Unterschied zwischen Bibliotheken die aus XD-Dokumenten erzeugt wurden, interaktive Komponenten beinhalten und mit einem XD-Quelldokument verbunden sind und Bibliotheken die aus einem anderen Adobe-Programm erzeugt wurden und eher statische Assets wie Grafiken o.ä. enthalten. 

Sowohl in der Creative Cloud App als auch in XD selbst, erkennt ihr die XD-Bibliotheken an einem Verkettungs-Icon vor dem Namen der Bibliothek. Unterschiede bestehen u.a. in folgenden Punkten: 

  • XD Bibliotheken können funktionale Komponenten mit Resizing-Verhalten oder States beinhalten. 
  • XD Bibliotheken können auch Grafiken, Farben etc enthalten
  • XD-Bibliotheken können nicht frei segmentiert werden. Eigene Kategorien wie »Icons« o.ä. sind daher nicht möglich
  • Creative Cloud Bibliotheken können keine funktionalen Komponenten enthalten, sondern nur statische Assets
  • Creative Cloud Bibliotheken können frei segmentiert werden. 

Es hat sich je nach Projekt- bzw. Unternehmensstruktur als praktikabel erwiesen, folgende Struktur anzulegen: 

  • Globale »Brand- oder Marketing-Assets« wie Schrift, Icons, Farben, Fotos etc. legt ihr in einer Creative Cloud Bibliothek ab und organisiert diese mit Segmenten wie gewünscht. 
  • Diese Creative Cloud Bibliothek nutzt ihr in einem XD-Dokuement als Quelle und erzeugt daraus die interaktiven Komponenten. Aus diesem XD-Dokument wird dann eine XD-Bibliothek erzeugt. 
  • Anschließend erstellt ihr weitere XD-Dokumente und nutzt dort die Komponenten wie gewünscht. 
  • Wenn sich später übergreifende Design-Charakteristika in der Creative Cloud-Bibliothek ändern (z. B. Icons oder eine Farbe), dann wirkt sich das auf die XD-Bibliothek aus. Diese wiederum wirkt sich auf alle abhängigen XD-Dokumente aus. 
Creative Cloud App mit ausgewählter CC-Bibliothek.
Creative Cloud App mit ausgewählter CC-Bibliothek.

Geschrieben von Jonas

thumb

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 →