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!
Zuletzt aktualisiert am
3. September 2021
- Adobe XD Benutzerhandbuch
- Einführung
- Neue Funktionen in Adobe XD
- Häufige Fragen
- Erstellen von Designs und Prototypen und Freigeben mit Adobe XD
- Farbmanagement
- Systemanforderungen
- Arbeitsbereich – Grundlagen
- Ändern der in Adobe XD angezeigten Sprache
- Zugriff auf UI-Design-Kits
- Barrierefreiheit in Adobe XD
- Tastaturbefehle
- Tipps und Tricks
- Design erstellen
- Zeichenflächen, Hilfslinien und Ebenen
- Formen, Objekte und Pfade
- Auswählen, Vergrößern, Verkleinern und Drehen von Objekten
- Verschieben, Ausrichten, Verteilen und Anordnen von Objekten
- Gruppieren, Sperren, Duplizieren, Kopieren und Spiegeln von Objekten
- Festlegen von Strichen, Flächen und Schlagschatten für Objekte
- Erstellen sich wiederholender Elemente
- Perspektivisches Design mit 3D-Transformationen
- Bearbeiten von Objekten mithilfe boolescher Operationen
- Text und Schriften
- Komponenten und Zustände
- Maskierung und Effekte
- Layout
- Videos und Lottie-Animationen
- Prototypen erstellen
- Erstellen interaktiver Prototypen
- Animieren von Prototypen
- Für Auto-Animate unterstützte Objekteigenschaften
- Erstellen von Prototypen mit Tastatur- und Gamepad-Nutzung
- Erstellen von Prototypen mit Sprachbefehlen und Audiowiedergabe
- Erstellen zeitgesteuerter Übergänge
- Hinzufügen von Overlays
- Sprachprototypen erstellen
- Erstellen von Ankerlinks
- Erstellen von Hyperlinks
- Testen von Designs und Prototypen
- Freigeben, Exportieren und Review
- Ausgewählte Zeichenflächen freigeben
- Freigeben von Designs und Prototypen
- Zugriffsberechtigungen für Links festlegen
- Arbeiten mit Prototypen
- Prototyp-Review
- Arbeiten mit Design-Spezifikationen
- Freigeben von Design-Spezifikationen
- Auswerten von Design-Spezifikationen
- Navigation in Design-Spezifikationen
- Reviews und Kommentarfunktion zu Design-Spezifikationen
- Exportieren von Design-Assets
- Exportieren und Herunterladen von Assets aus Design-Spezifikationen
- Gruppenfreigabe für Unternehmen
- Sichern oder übertragen von XD Elementen
- Design-Systeme
- Cloud-Dokumente
- Integrationen und Plug-ins
- Arbeiten mit externen Elementen
- Arbeiten mit Design-Elementen aus Photoshop
- Kopieren und Einfügen von Elementen aus Photoshop
- Importieren oder Öffnen von Photoshop-Designs
- Arbeiten mit Illustrator-Elementen in Adobe XD
- Öffnen oder Importieren von Illustrator-Designs
- Vektordateien aus Illustrator nach XD kopieren
- Plug-ins für Adobe XD
- Erstellen und Verwalten von Plug-ins
- Jira-Integration für Adobe XD
- Slack-Plug-in für XD
- Zoom-Plug-in für XD
- Designs von XD aus auf Behance freigeben
- XD für iOS und Android
- Fehlerbehebung
- Bekannte und behobene Probleme
- Installation und Updates
- Absturz beim Programmstart
- Adobe XD stürzt ab, wenn es auf Windows 10 gestartet wird
- XD wird beendet, wenn Sie sich von Creative Cloud abmelden
- Problem mit dem Abonnementstatus unter Windows
- Warnung zu blockierter Applikation, wenn XD auf Windows gestartet wird
- Generierung von Absturzbildern auf Windows
- Sammlung und Freigabe von Absturzprotokollen
- Cloud-Dokumente sowie Creative Cloud-Bibliotheken.
- Erstellen und Veröffentlichen von Prototypen und Durchführen von Reviews
- Prototyp-Interaktionen können unter macOS Catalina nicht aufgezeichnet werden
- Probleme mit Arbeitsabläufen für die Veröffentlichung
- Veröffentlichte Links werden in Browsern nicht angezeigt
- Prototypen werden in Browsern nicht korrekt dargestellt
- Kommentarfeld wird plötzlich bei freigegebenen Links angezeigt
- Bibliotheken können nicht veröffentlicht werden
- Importieren, exportieren und Zusammenarbeit mit anderen Applikationen
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.
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.
.gif "Ansatz A")
- Erstellen Sie eine Primärkomponente für eine Schaltfläche.
- Fügen Sie eine kopierte Instanz der Schaltflächenkomponente in eine Gruppe ein.
- 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.
-4?$png$&jpegSize=100&wid=400 "Ansatz B")
- Erstellen Sie eine Primärkomponente für eine Schaltfläche.
- 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.
.gif "Ansatz A")
- Erstellen Sie eine Primärkomponente für ein Dialogfeld.
- Steuern Sie eine Schaltfläche innerhalb der Komponente an.
- 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
Fügen Sie eine Instanz der Schaltflächenkomponente in die Gruppe ein.
In eine Komponente konvertieren
Wählen Sie die Gruppe aus und wandeln Sie sie in eine Komponente um.
Eine Schaltflächen-Komponente erstellen
Erstellen Sie eine Schaltflächenkomponente für das Dialogfeld.
Ein Dialogfeld als Container erstellen
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
- Erstellen Sie eine Schaltfläche als erste Primärkomponente.
- Verschachteln Sie eine Instanz der Schaltfläche in einem Umschaltmenü.
- 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.
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:
Ä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:
Ä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:
Ä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:
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?
