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

Bereits Benutzer von Adobe XD?

Applikation aktualisieren

Überblick über die neuen Funktionen

Jetzt testen

Beispiel-UI-Kit abrufen

.xd; 7 MB

Vorbereitung

Machen Sie sich mit den folgenden Konzepten vertraut:

Verschachtelte Komponente erstellen

Mithilfe verschachtelter Komponenten können Sie robustere Design-System erstellen. Wenn Sie eine Primärkomponente aktualisieren, erhalten alle Instanzen diese Aktualisierungen, selbst wenn die Aktualisierung in der verschachtelten Komponente vorgenommen wird.

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.

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

Ansatz B: Sie können eine kopierte Komponente in eine andere 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. Fügen Sie eine kopierte Instanz der Schaltflächenkomponente in eine andere Komponente ein.

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

Ansatz C
  1. Erstellen Sie eine Primärkomponente für ein Dialogfeld.
  2. Steuern Sie einen Teil 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ä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 mit Text und anderen Objekten als Gruppe.

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

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

Fügen Sie eine Instanz der Schaltflächenkomponente in die Gruppe ein
  1. Erstellen Sie eine Schaltfläche als erste Primärkomponente.
  2. Verschachteln Sie die Schaltfläche in ein Umschaltmenü.
  3. Verschachteln Sie das Umschaltmenü in einen Container.

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

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.

Mit Bibliotheken können Sie die Stile 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 Bibliotheken zu verteilen, kuratieren Sie Ihre Design-System-Elemente, indem Sie Farben, Zeichenformate und Komponenten zum Bedienfeld „Dokumentelemente“ 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.

Mit verschachtelten Komponenten arbeiten, die in früheren Versionen von XD erstellt wurden

In früheren Versionen von XD werden Ä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. 

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 eine Frage oder Idee?

ask the 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!