Komponenten, States & Design Systematiken mit Adobe XD
Digitale Produkte werden modular und anhand von Design Systematiken gestaltet. Adobe XD unterstützt hierbei mit Funktionen für zentral gepflegte Farben, Schriften, Komponenten usw.

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.

Ä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.
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.

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).


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.

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.