Alle mit den gleichen komponenten

1. Adobe XD Benutzerhandbuch
   
2. Einführung
   1. Neue Funktionen in Adobe XD
   2. Häufige Fragen
   3. Erstellen von Designs und Prototypen und Freigeben mit Adobe XD
   4. Systemanforderungen
      1. Hardware- und Softwareanforderungen
      2. Adobe XD, Big Sur und Apple silicon | macOS 11
   5. Arbeitsbereich – Grundlagen
   6. Ändern der in Adobe XD angezeigten Sprache
   7. Zugriff auf UI-Design-Kits
   8. Barrierefreiheit in Adobe XD
   9. Tastaturbefehle
   10. Tipps und Tricks
   11. Adobe XD-Abo-Varianten
   12. Änderungen am XD Starter-Abo
3. Design erstellen
   1. Zeichenflächen, Hilfslinien und Ebenen
      1. Erste Schritte mit Zeichenflächen
      2. Verwenden von Hilfslinien und Rastern
      3. Bildlauffähige Zeichenflächen erstellen
      4. Arbeiten mit Ebenen
      5. Erstellen von Bildlaufgruppen
   2. Formen, Objekte und Pfade
      1. Auswählen, Vergrößern, Verkleinern und Drehen von Objekten
      2. Verschieben, Ausrichten, Verteilen und Anordnen von Objekten
      3. Gruppieren, Sperren, Duplizieren, Kopieren und Spiegeln von Objekten
      4. Festlegen von Strichen, Flächen und Schlagschatten für Objekte
      5. Erstellen sich wiederholender Elemente
      6. Perspektivisches Design mit 3D-Transformationen
      7. Bearbeiten von Objekten mithilfe boolescher Operationen
   3. Text und Schriften
      1. Arbeiten mit Zeichen- und Textwerkzeugen
      2. Schriften in XD
   4. Komponenten und Zustände
      1. Arbeiten mit Komponenten
      2. Arbeiten mit verschachtelten Komponenten
         
      3. Hinzufügen mehrerer Zustände zu Komponenten
   5. Maskierung und Effekte
      1. Erstellen einer Maske mit Formen
      2. Arbeiten mit Weichzeichnen-Effekten
      3. Erstellen und Ändern von Farbverläufen
      4. Fülleffekte anwenden
   6. Layout
      1. Responsive Resize und Bedingungen
      2. Festlegen fester Innenabstände für Komponenten und Gruppen
      3. Erstellen dynamischer Designs mit Stapeln
   7. Videos und Lottie-Animationen
      
      1. Arbeiten mit Videos
      2. Erstellen von Prototypen mit Videos
      3. Arbeiten mit Lottie-Animationen
4. Prototypen erstellen
   1. Erstellen interaktiver Prototypen
   2. Animieren von Prototypen
   3. Für Auto-Animate unterstützte Objekteigenschaften
   4. Erstellen von Prototypen mit Tastatur- und Gamepad-Nutzung
   5. Erstellen von Prototypen mit Sprachbefehlen und Audiowiedergabe
   6. Erstellen zeitgesteuerter Übergänge
   7. Hinzufügen von Overlays
   8. Sprachprototypen erstellen
   9. Erstellen von Ankerlinks
   10. Erstellen von Hyperlinks
   11. Testen von Designs und Prototypen
5. Freigeben, Exportieren und Review
   1. Ausgewählte Zeichenflächen freigeben
   2. Freigeben von Designs und Prototypen
   3. Zugriffsberechtigungen für Links festlegen
   4. Arbeiten mit Prototypen
      
   5. Prototyp-Review
      
   6. Arbeiten mit Design-Spezifikationen
   7. Freigeben von Design-Spezifikationen
   8. Auswerten von Design-Spezifikationen
   9. Navigation in Design-Spezifikationen
   10. Reviews und Kommentarfunktion zu Design-Spezifikationen
   11. Exportieren von Design-Assets
   12. Exportieren und Herunterladen von Assets aus Design-Spezifikationen
   13. Gruppenfreigabe für Unternehmen
6. Design-Systeme
   1. Design-Systeme mit Creative Cloud-Bibliotheken
   2. Arbeiten mit Dokumentelementen in Adobe XD
   3. Arbeiten mit Creative Cloud-Bibliotheken in Adobe XD
   4. Von verknüpften Elementen zu Creative Cloud-Bibliotheken migrieren
   5. Arbeiten mit Designtoken 
   6. Verwenden von Elementen aus Creative Cloud-Bibliotheken
7. Cloud-Dokumente
   1. Cloud-Dokumente in Adobe XD
   2. Zusammenarbeit und Co-Editing
   3. Co-Editing bei für Sie freigegebenen Dokumenten
8. Integrationen und Plug-ins
   1. Arbeiten mit externen Elementen
   2. Arbeiten mit Design-Elementen aus Photoshop
   3. Kopieren und Einfügen von Elementen aus Photoshop
   4. Importieren oder Öffnen von Photoshop-Designs
   5. Arbeiten mit Illustrator-Elementen in Adobe XD
   6. Öffnen oder Importieren von Illustrator-Designs
   7. Vektordateien aus Illustrator nach XD kopieren
   8. Plug-ins für Adobe XD
      
   9. Erstellen und Verwalten von Plug-ins
   10. Jira-Integration für Adobe XD
   11. Slack-Plug-in für XD
   12. Zoom-Plug-in für XD
   13. Designs von XD aus auf Behance freigeben
9. XD für iOS und Android
   1. Testen der Prototypen auf iOS/Android
   2. Adobe XD unter iOS/Android – Häufige Fragen
10. Fehlerbehebung
    1. Bekannte und behobene Probleme
       1. Bekannte Probleme
       2. Behobene Probleme
    2. Installation und Updates
       1. XD scheint unter Windows nicht kompatibel zu sein
       2. Fehlercode 191
       3. Fehlercode 183
       4. Probleme beim Installieren von XD Plug-ins
       5.  Aufforderung zur Deinstallation und erneuten Installation von XD | Windows 10
       6. Probleme mit der Migration von Einstellungen
    3. Absturz beim Programmstart
       1.  Adobe XD stürzt ab, wenn es auf Windows 10 gestartet wird
       2.  XD wird beendet, wenn Sie sich von Creative Cloud abmelden
       3. Problem mit dem Abonnementstatus unter Windows
       4. Warnung zu blockierter Applikation, wenn XD auf Windows gestartet wird
       5. Generierung von Absturzbildern auf Windows
       6. Sammlung und Freigabe von Absturzprotokollen
    4. Cloud-Dokumente sowie Creative Cloud-Bibliotheken.
       1. Probleme mit XD Cloud-Dokumenten
       2. Probleme mit verknüpften Komponenten
       3. Probleme mit Bibliotheken und Links
    5. Erstellen und Veröffentlichen von Prototypen und Durchführen von Reviews
       1. Prototyp-Interaktionen können unter macOS Catalina nicht aufgezeichnet werden
       2. Probleme mit Arbeitsabläufen für die Veröffentlichung
       3. Veröffentlichte Links werden in Browsern nicht angezeigt
       4. Prototypen werden in Browsern nicht korrekt dargestellt
       5. Kommentarfeld wird plötzlich bei freigegebenen Links angezeigt
       6. Bibliotheken können nicht veröffentlicht werden
    6. Importieren, exportieren und Zusammenarbeit mit anderen Applikationen
       1. Import und Export in XD
       2. Photoshop-Dateien in XD
       3. Illustrator-Dateien in XD
       4. Von XD nach After Effects exportieren
       5. Sketch-Dateien in XD
       6. Apps von Drittanbietern sind im Export nicht sichtbar

Wie Sie in Adobe XD in verschiedenen Design-Systemen mit denselben Komponenten arbeiten

Komponenten sind Design-Elemente mit einzigartiger Flexibilität, mit denen Sie Elemente, die immer wieder vorkommen, erstellen und verwalten können. Dabei können Sie die Instanzen für unterschiedliche Kontexte und Layouts abwandeln, etwa eine Schaltfläche, die in verschiedenen Kontexten verwendet wird.

Im Folgenden wird erläutert, wie Sie mit Komponenten mehrere Versionen des gleichen Grundelements verwalten.

Vorbereitung

Machen Sie sich mit den folgenden Konzepten in XD vertraut:

Komponente erstellen

Um eine Komponente zu erstellen, wählen Sie Objekt > Komponente erstellen. Sie können auch ein Objekt oder eine Objektgruppe auswählen und eine der folgenden Optionen verwenden:

Klicken Sie im Eigenschafteninspektor im Bereich Komponente auf das Pluszeichen (+).

Klicken Sie im Bedienfeld Elemente im Bereich Komponenten auf das Pluszeichen (+).

Klicken Sie mit der rechten Maustaste auf das Objekt und wählen Sie Komponente erstellen (Cmd/Strg + K).

Wenn Sie in XD eine Komponente zum ersten Mal erstellen, wird sie zu einer Primärkomponente, die links oben durch eine ausgefüllte grüne Raute gekennzeichnet ist. Sie können eine Komponente genauso bearbeiten wie jedes andere Element. 

Worauf Sie achten sollten

• In XD gibt es keine separate Ansicht zum Bearbeiten von Primärkomponenten. Wenn Sie eine Primärkomponente bearbeiten, geschieht dies auf der Arbeitsfläche.
• Wenn Sie eine Primärkomponente auf der Arbeitsfläche löschen, können Sie weiterhin eine Instanz davon auswählen und im Kontextmenü auf die Option Primärkomponente bearbeiten zugreifen. XD generiert dann eine Primärkomponente auf der Arbeitsfläche.
• Wenn Sie die Verknüpfung einer bestimmten Komponenteninstanz aufheben möchten, verwenden Sie im Kontextmenü die Option Komponentengruppierung aufheben. Wenn Sie jedoch die Verknüpfungen aller Instanzen auf der Arbeitsfläche aufheben möchten, verwenden Sie die Option „Löschen“ im Bedienfeld „Elemente“.
• Um sicherzustellen, dass Sie die Primärkomponente bearbeiten, achten Sie auf die ausgefüllte grüne Raute links oben im Begrenzungsrahmen.

Best Practices

Hier einige Best Practices für die Arbeit mit Komponenten:

• Sie erstellen ein großes Design-System aus Komponenten? Dann sollten Sie die zugehörigen Primärkomponenten auf separaten Zeichenflächen organisieren. Zum Beispiel Schaltflächen auf einer Zeichenfläche und Navigationsleisten auf einer anderen Zeichenfläche.
• Stellen Sie beim Erstellen Ihres Design-Systems sicher, dass die Komponenten auf niedrigster, grundlegender Ebene aufgebaut werden, damit sie flexibel und möglichst universell wiederverwendet werden können. Wenn Sie beispielsweise eine Dialogfeldkomponente erstellen, vergewissern Sie sich, dass die Schaltflächen für dieses Dialogfeld Instanzen sind, die in der Dialogfeldkomponente verschachtelt sind.

Mit Komponenteninstanzen arbeiten

Jede Kopie der Primärkomponente wird als Instanz bezeichnet. Komponenteninstanzen sind in ihrer oberen linken Ecke durch eine grüne, nicht ausgefüllte Raute gekennzeichnet. Wenn Sie Änderungen an der Primärkomponente vornehmen, werden diese Änderungen auf alle Instanzen angewendet.

Modifikationen sind einmalige Änderungen, die nur für diese Instanz und nicht für die Primärkomponente gelten. Wenn Sie eine Eigenschaft in einer Instanz ändern, kennzeichnet XD diese Eigenschaft als Modifikation. Sie können die Eigenschaften einer Instanz modifizieren, ohne die Verbindung mit der Primärkomponente aufzuheben. 

Best Practices

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

• Sie möchten eine Komponentenvariation ausprobieren? Wählen Sie im Kontextmenü Komponentengruppierung aufheben, um die Instanz von der Primärkomponente zu trennen.
• Sie können Folgendes schnell anzeigen:
  • Alle Instanzen einer Komponente auf der Arbeitsfläche: Klicken Sie im Bedienfeld Elemente mit der rechten Maustaste auf die Komponente und wählen Sie Hervorhebung auf der Arbeitsfläche.
  • Die Primärkomponente, während Sie mit einer Instanz arbeiten: Klicken Sie mit der rechten Maustaste auf die Instanz und wählen Sie Primärkomponente bearbeiten.

Primärkomponente bearbeiten

Wenn Sie eine Primärkomponente bearbeiten, werden alle Instanzen aktualisiert, es sei denn, diese enthalten Modifikationen für die betreffende Eigenschaft. 

Um eine Primärkomponente zu bearbeiten, wählen Sie auf der Arbeitsfläche eine Instanz oder eine Komponente aus und verwenden eine der folgenden Optionen:

Klicken Sie auf der Arbeitsfläche mit der rechten Maustaste auf eine Instanz und wählen Sie Primärkomponente bearbeiten.

Klicken Sie im Bedienfeld Elemente mit der rechten Maustaste auf eine Komponente und wählen Sie Primärkomponente bearbeiten.

Wählen Sie neben dem Standardzustand im Bereich Komponente das Stiftsymbol zum Bearbeiten aus.

Worauf Sie achten sollten

• Eigenschaften hinsichtlich Drehung und Deckkraft werden zurzeit nicht von der Primärkomponente auf die Instanzen übertragen.
• Um sicherzustellen, dass Sie die Primärkomponente bearbeiten, achten Sie auf die ausgefüllte grüne Raute links oben im Begrenzungsrahmen.
  

Best Practices

Eine Best Practice für das Bearbeiten von Primärkomponenten:

• Wenn Sie eine Primärkomponente aus der Arbeitsfläche löschen, klicken Sie mit der rechten Maustaste auf eine Instanz und wählen Sie Primärkomponente bearbeiten. XD generiert dann eine Primärkomponente auf der Arbeitsfläche. 

Komponenteninstanz modifizieren

Primärkomponenten bieten die erforderliche Konsistenz für die Verwaltung eines Design-Systems. Alle an der Primärkomponente vorgenommenen Änderungen werden automatisch auf ihre Instanzen übertragen. Ein Design-System ist jedoch nur so nützlich wie der Grad an Flexibilität, den es bietet. Sie können mit demselben Ausgangselement beginnen, müssen es jedoch je nach Kontext, in dem es verwendet wird, anpassen. Hier kommen Instanzen ins Spiel.

Modifikationen sind einmalige Änderungen, die nur für diese Instanz und nicht für die Primärkomponente gelten. Wenn Sie eine Eigenschaft in einer Instanz ändern, kennzeichnet XD diese Eigenschaft als Modifikation. Modifizierte Eigenschaften bleiben immer erhalten, selbst wenn diese Eigenschaft in der Primärkomponente bearbeitet wird.  

Um Modifikationen zu löschen und auf die Primärkomponente zurückzusetzen, klicken Sie mit der rechten Maustaste auf die Instanz und wählen Auf Primärkomponente zurücksetzen. 

Arten von Modifikationen

Hier einige Modifikationsarten und Beispiele für deren Verwendung:

• Text: Sie können den Textinhalt in einer Komponenteninstanz bearbeiten, etwa wenn Sie die Beschriftung für eine Schaltflächenkomponente ändern. 
• Bitmap: Sie können die Bitmap-Grafik in einer Komponenteninstanz ersetzen, um beispielsweise ein Profilbild in einer Komponente auszutauschen.
• Größe: Wenn Sie mit Innenabständen und Responsive Resize arbeiten, können Sie die Größe einer Instanz ändern, etwa wenn Sie die Größe der Textfelder in einem Formular ändern möchten.
• Erscheinungsbild: Sie können Eigenschaften des Erscheinungsbilds wie Flächenfarbe, Rahmen und Weichzeichnen ändern, wenn Sie beispielsweise die Hintergrundfarbe für Benachrichtigungen ändern.
• Layout und Struktur: Sie können Objekte innerhalb einer Komponenteninstanz hinzufügen, löschen oder verschieben, wenn Sie beispielsweise ein Dropdown-Menü so modifizieren, dass es zusätzliche Menüoptionen enthält.

Größenmodifikationen

Auch die Größe von Komponenten kann geändert werden, wobei die leistungsstarken Funktionen von Responsive Resize ebenfalls zur Verfügung stehen. Wenn Sie die Größe der Primärkomponente ändern, wird automatisch die Größe aller Instanzen geändert, deren Größe nicht modifiziert wurde. Daher bleibt die Position von Instanzen nach einer Größenänderung als Modifikation erhalten. 

Wie funktioniert die Größenänderung in einer Primärkomponente und ihren Instanzen?

• Sie können die Größe einer Instanz unabhängig von der Primärkomponente ändern.
• Sie können die Größe der gesamten Komponente ändern und das Layout der darin enthaltenen Elemente bearbeiten.
• Sie können Komponenteninstanzen unabhängig von der angepassten Größe ändern.

Wie bei Responsive Resize ordnet XD Ihre Elemente bei einer Größenänderung auf der größeren bzw. kleineren Fläche neu an.

Im Eigenschafteninspektor können Sie Responsive Resize von Automatisch zu Manuell und umgekehrt umschalten. Mit „Manuell“ können Sie den Vorgang selbst steuern, indem Sie die Bedingungen bearbeiten.

Modifikationen im Erscheinungsbild

Die Möglichkeit, die ursprünglichen Elemente je nach Kontext zu ändern, ist beim Erstellen wiederverwendbarer Elemente wichtig. Infolgedessen können Sie alle Eigenschaften des Erscheinungsbilds einer Instanz modifizieren. Durch Modifikationen lassen sich eine Reihe von Variationen durchführen, wobei jedoch die Verbindung zur Primärkomponente erhalten bleibt. 

Modifikationen von Layout und Struktur

Sie können nicht nur die Größe einer Komponente oder das Layout der darin enthaltenen Elemente modifizieren, sondern die Komponenten auch strukturell modifizieren. Dies bedeutet, dass Sie Elemente in der Primärkomponente und ihren Instanzen hinzufügen oder entfernen können.

Wenn Sie zur Primärkomponente ein Objekt hinzufügen, wird es auch in die entsprechenden Instanzen eingefügt. Wenn Sie ein Objekt hinzufügen, wendet XD den Algorithmus für Responsive Resize an und legt die Bedingungen automatisch für das Objekt fest. Dies hängt von der Position des neuen Objekts relativ zu seinem Container ab. Wenn ein Objekt aus der Primärkomponente gelöscht wird, wird es auch in allen Instanzen entfernt.

Elemente können auch zu einer Instanz hinzugefügt oder daraus entfernt werden, und beim Hinzufügen eines Objekts werden automatisch Bedingungen auf dieses Objekt angewendet. Wenn ein Element aus einer Instanz gelöscht wird, wird es nur in dieser Instanz entfernt. Das gleiche Element ist in der Primärkomponente weiterhin vorhanden. 

Worauf Sie achten sollten

• Sie können alle Modifikationen auf die Primärkomponente zurücksetzen, nicht aber einzelne Modifikationen. 
• Wenn Sie eine Eigenschaft als Modifikation für eine Instanz markiert haben, wählen Sie Auf Primärzustand zurücksetzen, um sie wieder auf die Primärkomponente einzustimmen. 

Best Practices

Hier einige Best Practices für die Arbeit mit Modifikationen in 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. 

Zustände von Komponenten festlegen

Durch Komponentenzustände haben Sie die Möglichkeit, verschiedene Varianten der Komponente für eine zustandsabhängige Wiederverwendung zu speichern. Wenn Sie Modifikationen für die Primärkomponente vornehmen, können Sie aus diesen Modifikationen einen Zustand erstellen, damit sie leicht wiederverwendet werden kann.

Sie können beispielsweise eine Schaltflächenkomponente mit verschiedenen Varianten wie „vorrangig“ und „zweitrangig“ erstellen. Mit Zuständen können Sie Varianten mithilfe von Modifikationen an der Primärkomponente erstellen. 

Beachten Sie beim Arbeiten mit Zuständen und Komponenten die folgenden Hinweise:

• Zustände, die für die Primärkomponente erstellt wurden, stehen für alle Instanzen dieser Komponente zur Verfügung. Auf diese Weise können Sie Komponenten mit mehreren Instanzen erstellen und einfach den Zustand wechseln.
• Sie können Zustände im Eigenschafteninspektor umbenennen und löschen.
• Sie können einen Trigger mit einer Aktion hinzufügen, damit Sie von einem Zustand einer Komponente in einen anderen wechseln können. So können Sie beispielsweise vom Standardzustand in den Hover-Zustand wechseln, wenn Sie den Mauszeiger über eine Schaltflächenkomponente führen. 

Zustände hinzufügen

Nachdem Sie eine Komponente erstellt haben, wird sie im Eigenschafteninspektor mit einem Standardzustand aufgelistet. Sie können dann für die Komponenten drei Arten von Zuständen definieren: Neuer Zustand, Hover-Zustand und Zustand „Umschalten“.

Neuen Zustand festlegen

Verwenden Sie Neuer Zustand bei Szenarien, in denen Sie unterschiedliche Zustände einer Komponente anzeigen möchten, etwa eine deaktivierte oder angeklickte Version einer Komponente.

Klicken Sie im Designmodus im Eigenschafteninspektor neben dem Standardzustand der Primärkomponente auf das Pluszeichen (+) und wählen Sie Neuer Zustand.

Standardmäßig besitzt der neue Zustand noch keine eigene Interaktivität. Wie Sie eine Interaktion mit Komponenten verdrahten, wird unter Interaktivität zu Komponenten hinzufügen erläutert.

Hover-Zustand festlegen

Verwenden Sie den Hover-Zustand, wenn die Komponente einen anderen Zustand anzeigen soll, sobald der Benutzer bei der Interaktion mit dem Prototyp den Mauszeiger über die Komponente führt.

Klicken Sie im Designmodus im Eigenschafteninspektor neben dem Standardzustand der Primärkomponente auf das Pluszeichen (+) und wählen Sie Hover-Zustand.

Standardmäßig besitzt der Hover-Zustand noch keine eigene Interaktivität. 

Zustand „Umschalten“ festlegen

Verwenden Sie den Zustand „Umschalten“, wenn Sie Komponenten mit interaktivem Umschaltverhalten erstellen möchten, z. B. Ein-/Aus-Schalter, Optionsfelder, Kontrollkästchen usw. 

Klicken Sie im Designmodus im Eigenschafteninspektor neben dem Standardzustand der Primärkomponente auf das Pluszeichen (+) und wählen Sie Zustand „Umschalten“.

Sobald der Zustand „Umschalten“ erstellt wurde, bindet XD standardmäßig automatisch zwei bidirektionale Antippen-Interaktionen zwischen dem Standardzustand und dem Zustand „Umschalten“ ein und macht dadurch die Komponente vollständig interaktiv.

Zustände anzeigen und verwalten

Nachdem Sie die Zustände für Ihre Komponente erstellt haben, können Sie die Eigenschaften Ihrer Komponente bearbeiten und visualisieren, wie Ihre Komponente dem Benutzer angezeigt wird, der mit ihr interagiert. Es folgen einige Workflows für die Arbeit mit Zuständen:

Wählen Sie im Eigenschafteninspektor die Komponente aus und wechseln Sie zwischen verschiedenen Zuständen.

Doppelklicken Sie im Eigenschafteninspektor auf den Komponentenzustand und geben Sie einen neuen Namen ein. Zustände können nur in der Primärkomponente umbenannt und gelöscht werden. Sie können den Standardzustand nicht umbenennen.

Klicken Sie mit der rechten Maustaste auf den Komponentenzustand und wählen Sie Löschen. Wenn Sie einen Komponentenzustand aus der Primärkomponente löschen, werden Komponenteninstanzen, für die dieser Zustand aktiv ist, wieder in den Standardzustand zurückversetzt.

Modifikationen in Zuständen

Änderungen, die Sie am Standardzustand der Primärkomponente vornehmen, werden im Standardzustand aller Instanzen übernommen. Gleichermaßen führt die Bearbeitung eines bestimmten Zustands in der Primärkomponente dazu, dass alle Instanzen diese Bearbeitungen für den betreffenden Zustand erhalten. Vergewissern Sie sich stets, dass Sie den Zustand in der Primärkomponente bearbeiten, damit er für alle Instanzen aktualisiert wird.

Bei Zuständen können Sie Eigenschaften wie Text, Bitmap, Größe, Layout und Erscheinungsbild modifizieren. Wenn Sie eine Zustandseigenschaft in einer Instanz modifizieren, empfängt diese für die betreffenden Eigenschaften keine Aktualisierungen mehr von der Primärkomponente.

Wenn Sie mit den Ergebnissen Ihrer Modifikationen nicht zufrieden sind, können Sie die Komponente auf die Eigenschaften der Primärkomponente zurücksetzen, indem Sie mit der rechten Maustaste auf eine Instanz klicken und Auf Primärzustand zurücksetzen wählen. Dadurch werden alle Modifikationen einer Instanz gelöscht und die Eigenschaften werden auf die der Primärkomponente zurückgesetzt.

Interaktivität hinzufügen

Im Prototypmodus können Sie mithilfe der Trigger Antippen, Hover, Tasten & Gamepad und Sprache Interaktionen zwischen Komponentenzuständen verdrahten. Das Verdrahten von Interaktionen zwischen Komponentenzuständen funktioniert ähnlich wie das Verdrahten von Interaktionen zwischen zwei Zeichenflächen. Der Hauptunterschied besteht darin, dass Sie beim Verdrahten von Komponentenzuständen anstelle einer Zeichenfläche einen Zustand als Ziel auswählen.

1. Wechseln Sie zur Registerkarte „Prototyp“.
2. Wählen Sie den Komponentenzustand aus, von dem aus Sie die Interaktion erstellen wollen. 
3. Klicken Sie auf der Arbeitsfläche auf den Pfeil (>) oder im Eigenschafteninspektor im Bereich „Interaktion“ auf das Pluszeichen (+), um eine Interaktion hinzuzufügen.
4. Wählen Sie als Trigger Antippen (für Klick-Ereignisse), Hover (für Aktionen, bei denen der Benutzer auf die Komponente zeigt), Tasten & Gamepad (Navigation und Barrierefreiheit-Anwendungsfälle) oder Sprache (Navigation und Barrierefreiheit-Anwendungsfälle) .
5. Wählen Sie eine Aktion aus (z. B. „Auto-Animate“ oder „Übergang“).
6. Wählen Sie einen Zustand als Ziel aus.
7. Öffnen Sie das Vorschaufenster und testen Sie die Interaktionen der Komponente.

Sie können mehrere Interaktionen für denselben Komponentenzustand definieren. Wenn Sie beispielsweise einen Ein/Aus-Schalter haben, der sowohl über den Zustand „Hover“ als auch über den Zustand „Antippen“ verfügt, können Sie diese Interaktionen definieren, indem Sie die Schritte 4 bis 7 zweimal wiederholen, um den Zustand „Hover“ und den Zustand „Antippen“ zu definieren. Nachdem Sie mehrere Interaktionen erstellt haben, werden im Bereich „Interaktion“ die definierten Interaktionen angezeigt. Wechseln Sie zwischen diesen Interaktionen, und passen Sie die Interaktionseigenschaften an Ihre Anforderungen an. 

Wenn Sie verschachtelte Hover-Interaktionen wie Flyout-Menüs oder Popups mit Schaltflächen mit mehreren Zuständen erstellen wollen, können Sie Komponenten mit Hover-Zuständen auch verschachteln.

Worauf Sie achten sollten

• Wenn Sie auf eine Komponente doppelklicken, wird die Zustandsauswahl im Eigenschafteninspektor ausgeblendet.
• XD unterstützt als Trigger zwischen Zuständen nur „Antippen“, „Hover“, „Tasten & Gamepad“ und „Sprache“.
• XD gibt in Instanzen keine Modifikationen von einem Zustand an einen anderen weiter.

Best Practices

Hier einige Best Practices für das Hinzufügen von Zuständen zu Komponenten:

• Erstellen Sie Zustände immer für Ihre Komponenten, um verschiedene Varianten davon wiederzuverwenden.
• Sie können zum Prototypmodus wechseln und die Interaktionen zwischen verschiedenen Zuständen manuell bearbeiten.
• Wenn Sie Interaktivität zwischen Zuständen festlegen und Eigenschaften wie die Farbe ändern, wählen Sie als Aktion „Übergang“ und als Animation „Ohne“ oder „Ausblenden“. Wenn Sie die Position oder Größe zwischen den Zuständen animieren, wählen Sie „Auto-Animate“ als Aktion.
• Wenn Sie einen neuen Zustand definieren, können Sie damit beginnen, den Standardzustand oder einen vorhandenen Zustand zu replizieren. Je nach Absicht können Sie den Standardzustand auswählen und dann auf das Pluszeichen (+) klicken, um ihn für einen neuen Zustand zu duplizieren, oder einen vorhandenen Zustand auswählen und dann auf das Pluszeichen (+) klicken, um jenen Zustand zu duplizieren. Wenn Sie aus einem vorhandenen Zustand einen neuen erstellen, hat der neue Zustand dieselben Modifikationen. Das bedeutet, dass die modifizierten Eigenschaften keine Aktualisierungen vom Standardzustand erhalten. In den meisten Fällen wird jedoch empfohlen, neue Zustände zu erstellen, indem Sie für den Standardzustand auf + klicken. Der Standardzustand stellt sicher, dass er mit der Primärkomponente synchronisiert ist und keine Modifikationen enthält.

Komponenten verwalten

Im Bedienfeld Elemente können Sie Instanzen anzeigen oder neue Instanzen auf die Arbeitsfläche ziehen.
Um auf der Arbeitsfläche alle Instanzen einer Komponente anzuzeigen, klicken Sie im Bedienfeld Elemente mit der rechten Maustaste auf die Komponente und wählen Hervorhebung auf der Arbeitsfläche. 
Um im Bedienfeld Elemente die Komponente zu einer Instanz anzuzeigen, klicken Sie auf der Arbeitsfläche mit der rechten Maustaste auf die Instanz und wählen Komponente in „Elemente“ anzeigen.

Bearbeiten, umbenennen oder löschen

Klicken Sie mit der rechten Maustaste im Bedienfeld Elemente auf eine Komponente oder auf der Arbeitsfläche auf eine Instanz und verwenden Sie die Optionen der Kontextmenüs, um die Komponente bzw. Instanz zu bearbeiten oder zu löschen. Um Komponenten umzubenennen, klicken Sie mit der rechten Maustaste und wählen Umbenennen. 

Auf den Primärzustand zurücksetzen

Klicken Sie mit der rechten Maustaste auf die Instanz und wählen Sie Auf Primärzustand zurücksetzen, um alle Modifikationen zu leeren und die Instanz auf die Primärkomponente zurückzusetzen.
Um eine Instanz von der Primärkomponente zu trennen, klicken Sie mit der rechten Maustaste auf eine Instanz und wählen Komponentengruppierung aufheben.
 

Interaktivität zu Komponenten hinzufügen

Zu Komponenten und zwischen Zuständen können Sie Interaktivität hinzufügen. Wenn Sie für eine Primärkomponente eine Interaktion erstellen, erben alle Instanzen dieser Komponente diese Interaktion. Änderungen an den Interaktionen der Primärkomponente werden in den Interaktionen der Instanzen automatisch aktualisiert.

Sie können die Interaktionen in den Instanzen auch modifizieren, danach empfängt diese Instanz jedoch keine Aktualisierungen mehr von der Primärkomponente. Wie bei Design-Modifikationen können Sie auch die Interaktionseigenschaften einer Komponente modifizieren.

Worauf Sie achten sollten

• Es gibt keine Möglichkeit, die Weitergabe von Interaktionen von der Primärkomponente auf Instanzen zu verhindern.
• Es gibt keine Möglichkeit, zwischen einer Interaktion zu unterscheiden, die nur für die Instanz festgelegt wurde (als Modifikation), und einer Interaktion, die sie von der Primärkomponente geerbt hat.
• Für Zustände wird nur eine Teilmenge der Aktionen und Trigger unterstützt. 

Best Practices

Hier einige Best Practices, die beim Festlegen interaktiver Funktionen für eine Komponente nützlich sind:

• Wenn Sie Komponenten kopieren und einfügen oder zwischen Dokumenten austauschen, bleiben Interaktionen zwischen Komponente und Zeichenfläche nicht erhalten, da nicht garantiert werden kann, dass die Ziel-Zeichenflächen immer verfügbar sind. XD behält jedoch für jede Komponente die Interaktionen zwischen zwei Zuständen bei. Für eine Komponente mit einem Hover-Zustand und dem Trigger „Antippen“ bedeutet dies: Beim Einfügen in ein anderes Dokument behält XD die Interaktion mit dem Hover-Zustand bei und verwirft den Trigger „Antippen“ für die Zeichenfläche. 
• Überlegen Sie sich gut, wann Sie eine Interaktion in der Primärkomponente und wann in der Instanz definieren.
• Wenn alle Instanzen dasselbe Ziel haben, ist die Verdrahtung der Primärkomponente effektiver, da sie automatisch auf alle übertragen wird. Ein Beispiel hierfür wäre die Schaltfläche „Startseite“, die immer zum Startbildschirm führt.
• Wenn alle oder einige Instanzen unterschiedliche Ziele haben, ist es einfacher, anstelle der Primärkomponente die einzelnen Instanzen zu verdrahten. Beispiel: Eine primäre Schaltfläche, die im gesamten Projekt verwendet wird und je nach Verwendung und Kontext unterschiedliche Ziele hat.

Weitere Informationen

Weitere Informationen zur Arbeit mit Komponenten erhalten Sie im folgenden Video.

Dauer: 9 Minuten

Wie geht’s weiter?

Jetzt haben Sie die Grundlagen der Arbeit mit Komponenten in XD kennengelernt. Lernen Sie als Nächstes, wie Sie verschachtelte Komponenten in XD verwenden.

Noch Fragen oder Ideen?

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!