Komponenten, States & Design Systematiken mit Adobe XD

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 (Primärkomponente) 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 (Cmd/Strg + K). Auf der Bühne sind Komponenten an einer grünen Markierung erkennbar. Das Original hat oben links eine grüne Markierung.

Wir empfehlen alle Primärkomponenten an zentraler Stelle im Dokument zu pflegen (oder in einer Library) 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.

Komponenten in XD: Die verschiedenen Icons an der Komponente zeigen den Status an

Angepasste Instanzen resetten

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

Weitere Elemente zur Master-Komponente hinzufügen

Wenn eine Komponente bereits angelegt wurde, kann man in der Ebenenpalette keine Ebene in diese Komponente hineinschieben. Um Ebenen, die außerhalb liegen, in die Komponente zu verschieben, muss die gewünschte Ebene zunächst ausgeschnitten werden (Cmd/Strg. + X). Anschließend muss eine Ebene innerhalb der Komponente ausgewählt werden. Im letzten Schritt wird die ausgeschnittene Ebene wieder eingefügt (Cmd/Strg + V). Sie wird oberhalb der markierten Ebene platziert.

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

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.

Design Tokens

Farben und Schriften werden im Entwickler-Export als CSS-Variablen exportiert. Es müssen daher alle abgelegten Stile benannt werden, da ansonsten eine große Liste mit unbenannten Variablen entsteht.

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

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 →