Arbeiten mit verschachtelten Komponenten in Adobe XD

Mit verschachtelten Komponenten in verschiedenen Design-Systemen in Adobe XD arbeiten

Das Erstellen eines Design-Systems erfordert die Fähigkeit, Komponenten auf molekularer Ebene zu erstellen, um eine optimale Wiederverwendbarkeit und Flexibilität zu gewährleisten. Mit XD können Sie beim Erstellen von Komponenten diese ineinander verschachteln und komplexe Objekte wie Menüs, kartenbasierte Layouts und vieles mehr erstellen. 

Im Folgenden wird erläutert, wie Sie verschachtelte Komponenten erstellen und verwenden und dadurch beim Design effektiver arbeiten können.

Komponenten
Arbeiten mit verschachtelten Komponenten in XD

Bereits Benutzer von Adobe XD?

XD aktualisieren

Überblick über die neuen Funktionen

Vorbereitung

Machen Sie sich mit den folgenden Konzepten vertraut:

Terminologie zu Komponenten

Machen wir uns zunächst mit einigen Begriffen vertraut, die mit verschachtelten Komponenten verknüpft sind:

  • Primärkomponente: Die Primärkomponente ist die Komponente, die alle Komponenteneigenschaften definiert und steuert.
  • Komponenteninstanz: Eine Komponenteninstanz ist eine Kopie der Primärkomponente und erbt Änderungen, die an der Primärkomponente vorgenommen wurden.
  • Verschachtelte Komponente: Eine verschachtelte Komponente ist eine Komponente innerhalb einer anderen Komponente.
  • Äußere Komponente: Eine äußere Komponente ist eine Komponente, in der sich eine andere Komponente befindet.

Verschachtelte Komponenten erstellen

Mithilfe verschachtelter Komponenten können Sie robustere Design-System erstellen.Wenn Sie eine Primärkomponente aktualisieren, erhalten alle Instanzen diese Aktualisierung, selbst wenn die Aktualisierung in einer Komponente vorgenommen wurde, die in die Primärkomponente verschachtelt ist.

Zum Erstellen von verschachtelten Komponenten können Sie folgende Ansätze verwenden:

Ansatz A: Sie können eine kopierte Komponenteninstanz in eine Gruppe einfügen und die Gruppe in eine Komponente konvertieren.

  1. Erstellen Sie eine Primärkomponente für eine Schaltfläche.
  2. Fügen Sie eine kopierte Instanz der Schaltflächenkomponente in eine Gruppe ein.
  3. Wählen Sie die Gruppe aus und konvertieren Sie sie in eine Komponente. 

Ansatz B: Sie können eine Komponenteninstanz kopieren und in eine bereits vorhandene Komponente einfügen.

Fügen Sie eine Instanz der Schaltflächenkomponente in die Gruppe ein

  1. Erstellen Sie eine Primärkomponente für eine Schaltfläche.
  2. Kopieren Sie eine Instanz der Schaltflächenkomponente und fügen Sie sie in eine andere Komponente ein.

Ansatz C: Sie können einen Teil einer Komponente ansteuern und diesen in eine Komponente konvertieren.

  1. Erstellen Sie eine Primärkomponente für ein Dialogfeld.
  2. Steuern Sie eine Schaltfläche innerhalb der Komponente an.
  3. Konvertieren Sie diesen Teil (hier eine Schaltfläche) in eine Komponente.

Beispiel

Verwenden wir Ansatz A, um eine Dialogfeldkomponente zu erstellen.

Eine Schaltflächeninstanz einfügen

Die Instanz einfügen

Fügen Sie eine Instanz der Schaltflächenkomponente in die Gruppe ein.

In eine Komponente konvertieren

Die Komponente erstellen

Wählen Sie die Gruppe aus und wandeln Sie sie in eine Komponente um.

Eine Schaltflächen-Komponente erstellen

Eine Schaltflächen-Komponente erstellen

Erstellen Sie eine Schaltflächenkomponente für das Dialogfeld.

Ein Dialogfeld als Container erstellen

Der Dialogfeld-Container

Erstellen Sie einen Dialogfeld-Container, der Text und andere Objekte enthält, als Gruppe.

Best Practices

Hier einige Best Practices für das Erstellen von verschachtelten Komponenten:

  • Sie können eine Komponente erstellen, in die mehrere Instanzen verschachtelt sind. Bei Komponenten mit mehreren Zuständen mit vielen Objekten ist jedoch Vorsicht geboten, denn dadurch kann die Performance beeinträchtigt werden. Für eine optimale Performance sollten Sie daher Komponenten auf maximal drei Ebenen verschachteln und je Ebene die Anzahl der Zustände auf maximal zehn Zustände pro Komponente begrenzen.
  • Verschachteln Sie eine Komponente nicht in sich selbst. Dies könnte zu einer ungültigen Komponente führen, da Komponenten selbstreferenzierend sind.
  • Wenn Sie in einer äußeren Primärkomponente eine verschachtelte Komponente mit mehreren Zuständen haben, können Sie den Zustand der verschachtelten Komponente ändern. Diese Zustandsänderung(en) werden dann an alle Instanzen der äußeren Komponente übertragen.

Verschachtelte Komponenten synchronisieren

Werden verschachtelte Komponenten synchronisiert, so werden Änderungen an Komponenten, die innerhalb einer Primärkomponente verschachtelt sind, auf alle Instanzen dieser Primärkomponente übertragen. 

Mal sehen, wie das funktioniert. 

Beispiel 1: Eine Schaltfläche in einem Container, die Änderungen von der Primärschaltfläche empfängt

  1. Erstellen Sie eine Schaltfläche als erste Primärkomponente.
  2. Verschachteln Sie eine Instanz der Schaltfläche in einem Umschaltmenü.
  3. Verschachteln Sie eine Instanz des Umschaltmenüs in einem Container.

Alle an der Schaltflächen-Primärkomponente vorgenommenen Änderungen werden auf alle im Umschaltmenü und im Container verschachtelten Schaltflächen übertragen.

Fügen Sie eine Instanz der Schaltflächenkomponente in die Gruppe ein

Erstellen Sie nun zwei Instanzen der Primärschaltfläche, zwei Instanzen des Primärumschaltmenüs und eine Instanz des Primärcontainers.

Schauen wir uns einige Szenarien an.

Szenario 1:

Szenario 1

Ändern Sie die Farbe der im Primärumschaltmenü verschachtelten Schaltfläche in Blau. 

Bei allen Schaltflächen, die in den Instanzen des Umschaltmenüs und in den Containern verschachtelt sind, wird die Farbe ebenfalls in Blau geändert.

Die Farbe der beiden Instanzen der Primärschaltfläche wird jedoch nicht geändert. Das liegt daran, dass Änderungen an verschachtelten Komponenten einen Kontextbezug zu deren Containern haben. Die Farbänderung wird nur auf die Instanzen der Schaltfläche innerhalb des Umschaltmenüs angewendet. 

Szenario 2:

Szenario 2

Ändern Sie die Farbe der Schaltfläche innerhalb des Primärcontainers in Rosa. Die Schaltfläche in der Instanz des Containers wird ebenfalls Rosa.

Beachten Sie, dass die Farbe der anderen Schaltflächen nicht geändert wird. Das liegt daran, dass Änderungen an verschachtelten Komponenten einen Kontextbezug zu deren Containern haben. Die Farbänderung wird nur auf die Instanzen der Schaltfläche innerhalb des Containers angewendet. 

Szenario 3:

Szenario 3

Ändern Sie die Farbe der in der Containerinstanz verschachtelten Schaltfläche in Grün.

Keine der anderen Schaltflächen wird in Grün geändert, da diese Änderung als Modifizierung an einer Instanz und nicht an einer Primärkomponente vorgenommen wurde. 

Szenario 4:

Szenario 4

Dieses Szenario schließt an Szenario 3 an. Ändern Sie jetzt die Farbe der im Primärcontainer verschachtelten Schaltfläche in Violett. 

Die verschachtelte Schaltfläche der Containerinstanz ändert ihre Farbe nicht, da sie bereits modifiziert wurde und Modifikationen Vorrang vor vererbten Eigenschaften haben.

Worauf Sie achten sollten

  • Verschachtelte Komponenten können keine Primärkomponenten sein. Wenn Sie also an der Primärkomponente eine Änderung vornehmen müssen, klicken Sie mit der rechten Maustaste auf die verschachtelte Komponente und wählen Sie Primärkomponente bearbeiten. 
  • Wenn eine verschachtelte Komponente in einer Instanz der äußeren Komponente ausgetauscht wird und Sie im Kontextmenü der verschachtelten Primärkomponente Auf Primärzustand zurücksetzen wählen, wird die Instanz mit der ausgetauschten Komponente nicht geändert. 

Best Practices

Hier einige Best Practices für die Arbeit mit Modifikationen in verschachtelten Komponenteninstanzen:

  • Um eine Variation der Komponente zu erstellen, die wiederverwendet wird, erstellen Sie nicht eine Instanz mit Modifikationen, sondern legen in der Primärkomponente einen Zustand fest.
  • Beim Modifizieren von Instanzen müssen Sie darauf achten, dass Sie nur Eigenschaften modifizieren, die keine Aktualisierungen von der Primärkomponente benötigen. Wenn Sie beispielsweise in einer Schaltflächenkomponente den Text modifizieren, bleibt die Beschriftung unterschiedlich, aber Größe und Farbe werden weiterhin mit der Primärkomponente synchronisiert.

Verschachtelte Komponenten aus Creative Cloud-Bibliotheken hinzufügen

Mit Creative Cloud-Bibliotheken können Sie die Formate und Komponenten Ihres Design-Systems so verteilen, dass sie in Ihren Dokumenten konsistent wiederverwendet werden können. Um ein Design-System zu erstellen und über Creative Cloud-Bibliotheken zu verteilen, kuratieren Sie Ihre Design-System-Elemente, indem Sie Farben, Zeichenformate und Komponenten zum Bedienfeld „Dokument-Assets“ hinzufügen und diese als Bibliothek veröffentlichen. Dadurch können sie in allen Ihren XD Designs und auch in anderen Creative Cloud-Applikationen wiederverwendet werden. Weitere Informationen zur Verwendung von Creative Cloud-Bibliotheken finden Sie unter Arbeiten mit Creative Cloud-Bibliotheken in XD.

Häufige Fragen

In früheren Versionen von XD wurden Änderungen, die an einer verschachtelten Komponente vorgenommen wurden, in anderen Instanzen der äußeren Komponente nicht aktualisiert. Damit Sie mit dieser verbesserten Funktionalität arbeiten können, sollten Sie Ihre Dokumente in der neuesten Version von XD öffnen.

Nein. Wenn Sie ein vorhandenes Dokument mit verschachtelten Komponenten in der neuesten Version von XD öffnen, migriert XD diese Komponenten automatisch auf das neue Modell, damit Sie so schnell wie möglich damit arbeiten können.

Beim Öffnen Ihres Dokuments durch XD stimmten diese spezifischen Komponenten nicht mit deren Version im Bedienfeld „Elemente“ überein. Um ohne Datenverlust zu migrieren, wurden diese Primärkomponenten in Instanzen auf der Arbeitsfläche konvertiert. Wenn Sie die Primärkomponente wieder auf die Arbeitsfläche bringen möchten, klicken Sie mit der rechten Maustaste auf die äußere Instanz und wählen Primärkomponente bearbeiten. Wenn Sie dann möchten, dass Ihre Primärkomponente wie die Instanz auf der Arbeitsfläche aussieht, können Sie alle erforderlichen Modifikationen von Ihrer Instanz auf die Primärkomponente übertragen. 

Öffnen Sie die verknüpften Dokumente in der neuesten Version von XD, um Aktualisierungen zu erhalten. Auch alle Dokumente, die in Zukunft verknüpft werden, sollten in der neuesten Version von XD geöffnet werden. Nur dadurch können Sie ein korrektes Verhalten sicherstellen. 

Das Verschachteln einer Primärkomponente in eine anderen Primärkomponente wird ab Version XD 34 nicht mehr unterstützt. Wenn Sie etwas tun, das zuvor eine verschachtelte Primärkomponente erstellt hätte, wird die innere Komponente in eine Instanz geändert. 

Weitere Informationen

Im folgenden Video erfahren Sie mehr über verschachtelte Komponenten in XD.
Dauer: 10 Minuten

Wie geht’s weiter?

Jetzt haben Sie die Grundlagen der Arbeit mit Komponenten in XD kennengelernt. Lernen Sie als Nächstes, wie Sie Ihre Designs für andere Designer und Stakeholder freigeben, um Feedback einzuholen.

Noch Fragen oder Ideen?

Fragen Sie die Community

Haben Sie eine Frage oder eine Idee, die Sie uns mitteilen möchten? Werden Sie Teil der Adobe XD Community. Wir freuen uns schon auf Ihre Beiträge und Kreationen!

Adobe-Logo

Bei Ihrem Konto anmelden