Arbeiten mit Komponenten

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.

Komponenten

Bereits Benutzer von XD?

XD aktualisieren

Überblick über die neuen Funktionen

Jetzt testen

Beispiel-UI-Kit abrufen

.xd; 80 MB

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:

Eigenschafteninspektor
Im Eigenschafteninspektor

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

Bedienfeld „Elemente“
Im Bedienfeld „Elemente“

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

Kontextmenü
Im Kontextmenü

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. 

Komponenten erstellen
Primärkomponente

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.

Instanzmodifikation
Instanzmodifikation

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. 

Primärkomponente
Primärkomponente

Instanz
Instanz

Instanz mit Modifikationen
Instanz mit Modifikationen

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:

Kontextmenü
Im Kontextmenü auf der Arbeitsfläche

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

Bedienfeld „Elemente“
Im Bedienfeld „Elemente“

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

Eigenschafteninspektor
Im Eigenschafteninspektor

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. 

Modifikationen in Komponenteninstanzen
Modifikationen in Komponenteninstanzen

Arten von Modifikationen

Hier einige Modifikationsarten und Beispiele für deren Verwendung:

Modifikationen von Struktur und Layout
Modifikationsarten: Text, Bitmap, Größe, Erscheinungsbild und Layout

  • 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

Modifikation im Erscheinungsbild
Modifikation 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.

Modifikation von Layout und Struktur
Modifikationen von Layout und Struktur

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

Neuer Zustand
Neuer Zustand

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. 

Hover-Zustand
Hover-Zustand

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.

Zustand „Umschalten“
Zustand „Umschalten“

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 Arbeitsabläufe für die Arbeit mit Zuständen:

Zustände wechseln

Zustände wechseln
Zustände wechseln

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

Zustände umbenennen

Zustände umbenennen
Zustände umbenennen

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.

Zustände löschen

Zustände löschen
Zustände löschen

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.
Erstellen Sie eine Antipp-Interaktion
Durch Verdrahten von Komponentenzuständen eine Antipp-Interaktion erstellen

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

Anzeigen 

Komponenten im Bedienfeld „Elemente“ anzeigen
Komponenten im Bedienfeld „Elemente“ anzeigen

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

Kontextmenü im Bedienfeld „Elemente“
Kontextmenü im Bedienfeld „Elemente“

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

Auf Primärzustand zurücksetzen
Auf 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?

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