Sie können Komponenten in verschiedenen Dokumenten verwenden, um produktivere Arbeitsabläufe zu ermöglichen.

Als Designer erstellen Sie häufig Primärelemente wie Navigationsleisten oder Schaltflächen, die sich in Ihren Designs wiederholen. Muss eine Instanz eines Elements entsprechend dem jeweiligen Kontext oder Layout angepasst werden, kann dies jedoch eine Herausforderung darstellen. In solchen Szenarien erstellen Sie häufig mehrere Versionen desselben grundlegenden Elements und dies erschwert die Wartung Ihres Designs erheblich.

Komponenten (die früher als Symbole bezeichnet wurden) sind Design-Elemente mit einzigartiger Flexibilität, mit denen Sie sich wiederholende Elemente wie z. B. eine Schaltfläche erstellen und verwalten können, wobei Sie die Instanzen der Schaltfläche für unterschiedliche Kontexte und Layouts abwandeln können. Darüber hinaus ist Folgendes möglich:

  • Ändern des Primärelements, das an alle Instanzen weitergegeben werden soll
  • Unabhängiges Ändern der Größe einer Instanz
  • Austauschen einer verschachtelten Komponente als Modifikation
  • Verknüpfen und Bearbeiten von Komponenten in verschiedenen Dokumenten
  • Modifikation:
    • Inhaltseigenschaften (Text und Bildflächen)
    • Darstellungseigenschaften (Füllung, Rahmen, Effekte, Textformat usw.)
    • Layout von Objekten innerhalb einer Instanz (Größe, Positionierung, Ebenenhierarchie, Einschränkungen)
    • Struktur einer Instanz (Hinzufügen und Entfernen von Elementen)

In diesem Video erhalten Sie weitere Informationen zu Komponenten in XD.


Erstellen einer Primärkomponente

Eine Primärkomponente ist die erste Instanz einer erstellten Komponente. Sie können die Primärkomponente auf der Arbeitsfläche bearbeiten; sie wird durch ein grünes Rhombus-Symbol << icon>>> links oben im Bearbeitungsmodus gekennzeichnet.

So erstellen Sie eine Primärkomponente:

Wählen Sie ein Objekt oder eine Gruppe von Objekten aus und erstellen Sie mit einer der folgenden Optionen eine Primärkomponente:

Wählen Sie in XD Desktop Objekt > Komponente erstellen.

Oder: 

  • Drücken Sie die Tastenkombination Cmd + K.

    Oder:

  • Wählen Sie im Kontextmenü Komponente erstellen.

    Oder:

  • Klicken Sie im Bedienfeld Elemente mit der rechten Maustaste auf die ausgewählte Komponente und wählen Sie Primärkomponente bearbeiten.
Erstellen einer Komponente
Erstellen einer Komponente

Erstellen einer Komponenteninstanz

Sie können eine Primärkomponente kopieren, um eine Instanz zu erstellen. Für erstellte Instanzen gilt Folgendes:

  • Sie sind eine exakte Kopie der Primärkomponente,
  • sie verfügen über dieselben Eigenschaften wie das Original,
  • sie sind untrennbar mit der Primärkomponente verbunden und
  • sie werden durch eine grüne Umrandung mit Transformationsgriffen angezeigt.

Wenn Sie mehrere Instanzen der Komponente erstellen möchten, verschieben Sie die Primärkomponente durch Drücken und Ziehen auf der Leinwand, während Sie die Alt-Taste gedrückt halten.

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

Erstellen einer Komponenteninstanz
Erstellen einer Komponenteninstanz

Hinweis:

Nehmen Sie Änderungen an der Primärinstanz vor, wenn Sie globale Änderungen wünschen, die für alle Instanzen einer Komponente gelten sollen.

Wenn Sie Änderungen oder Modifikationen einer Instanz rückgängig machen möchten, klicken Sie mit der rechten Maustaste auf die Instanz und wählen Sie Auf Primärkomponente zurücksetzen.

Anzeigen und Generieren einer Primärkomponente

Wenn eine Primärkomponente nicht auf der Design-Arbeitsfläche verfügbar ist:

  • Klicken Sie mit der rechten Maustaste auf die Komponenteninstanz und wählen Sie die Option Komponenten in „Elemente“ anzeigen aus, um zur Primärkomponente im Bedienfeld „Elemente“ zu gelangen,

Oder:

  • Klicken Sie mit der rechten Maustaste auf die Komponenteninstanz und wählen Sie die Option Primärkomponente bearbeiten aus.

Befindet sich die Primärkomponente auf der Design-Arbeitsfläche, werden Sie von XD an die betreffende Position weitergeleitet. Andernfalls erstellt XD eine Primärkomponente und platziert diese auf der Design-Arbeitsfläche. (Dies ist vergleichbar mit dem Duplizieren einer Zeichenfläche.)

Aktualisieren und Zurücksetzen von Änderungen der Primärkomponente aus einer Instanz heraus

Um eine Primärkomponente aus einer Instanz heraus zu aktualisieren, bearbeiten Sie die Instanz und wählen im Kontextmenü Primärkomponente aktualisieren. Alle anderen Instanzen der Komponente werden auf die Eigenschaften der neuen Primärkomponente aktualisiert, es sei denn, es gibt Modifikationen, die Konflikte verursachen.

Wenn Sie eine Instanz auf die Primärkomponente zurücksetzen möchten, wählen Sie Auf Primärkomponente zurücksetzen. Dadurch werden die an der Instanz vorgenommenen Modifikationen verworfen.

Auf Primärkomponente zurücksetzen
Auf Primärkomponente zurücksetzen

Modifzieren einer Komponenteninstanz

Durch Komponentenmodifikationen können Sie Primärkomponenten mit Instanzen erstellen, die beliebige Eigenschaften der Primärkomponente (wie Größe, Flächenfarbe, Text, Bildfläche, Inhalt usw.) modifzieren können. An der Primärkomponente vorgenommene Änderungen werden an alle Instanzen weitergegeben, es sei denn, die geänderte Eigenschaft wurde in einer Instanz modifiziert. Beim Bearbeiten einer einzelnen Instanz werden eine geänderte Eigenschaft bzw. deren Inhalte zu einer Modifikation, die ausschließlich für die betreffende Instanz gilt – andere Instanzen und die Primärkomponenten sind hiervon nicht betroffen. Eine Instanz mit Modifikationen kann jederzeit wieder mit der Primärkomponente synchronisiert werden. Sie können auch Formate und Erscheinungsbild in einer Instanz modifzieren.

Es ist jederzeit möglich, eine Instanz mit Modifikationen auf die Primärkomponente zurücksetzen und Modifikationen auf bestimmte Teile einer verschachtelten Komponenteninstanz anwenden.

  • Um die vorgenommene Modifikation einer Instanz zurückzusetzen, klicken Sie mit der rechten Maustaste auf die Instanz und wählen Auf Primärkomponente zurücksetzen.
  • Um alle Modifikationen einer Instanz rückgängig zu machen, wählen Sie die Instanz aus, klicken mit der rechten Maustaste und wählen Eigenschaften der Primärkomponente wiederherstellen.
  • Um Änderungen von einer Instanz auf eine Primärkomponente zu übertragen, klicken Sie mit der rechten Maustaste auf die Instanz und wählen Auf Primärkomponente übertragen .
Modifzieren einer Komponenteninstanz
Modifzieren einer Komponenteninstanz

Ändern der Größe einer Komponente

Mit der Größenänderung von Komponenten können Sie die Größe einer Komponente auf der Arbeitsfläche ändern und gleichzeitig ihre Größe als eindeutige Modifikation beibehalten. Wie bei Gruppen in XD können Sie mit den Transformationsgriffen Komponenten direkt auf der Arbeitsfläche drehen bzw. ihre Größe ändern. Der standardmäßige Größenänderungsmodus zum Ändern der Größe von Komponenten ist Responsive Resize; dieser Modus kann im Eigenschafteninspektor ein- und ausgeschaltet werden. Sie können Responsive Resize ausschalten, um die Größe einer Komponente manuell zu ändern oder mithilfe der Umschalttaste eine Größenänderung mit beschränktem Skalieren auszuführen, wie bei anderen Elementen in der Applikation, deren Größe geändert werden kann. Sie können nicht nur die Größe einer gesamten Komponente ändern, sondern auch das Layout der darin enthaltenen Elemente bearbeiten.

Sie können nun Änderungen an Instanzen von Komponenten vornehmen, unabhängig von den Größen, auf die Sie sie festgelegt haben. Wie bei Responsive Resize platziert XD Ihre Elemente bei Größenänderung auf einer größeren oder kleineren Arbeitsfläche.

Komponenten, deren Größe geändert wurde, verhalten sich wie Zeichenflächen und Gruppen werden maskiert, indem untergeordnete, neu platzierte Elemente außerhalb der ursprünglichen Komponentengrenzen ausgeblendet werden. Wenn Sie die Größe der Primärkomponente ändern, erfolgt eine automatische Größenänderung aller Instanzen, deren Größe nicht geändert wurde. Daher wird die Größenänderungsposition von Instanzen, deren Größe bereits geändert wurde, als Modifikation beibehalten. Sie können die Größe einer Instanz auch unabhängig ändern, ohne dass sich dies auf die Primärkomponente auswirkt.

Ändern der Größe einer Primärkomponente
Ändern der Größe einer Primärkomponente

Arbeiten mit verschachtelten Komponenten

Häufig schließen von Ihnen erstellte größere Komponenten verschachtelte Komponenten ein, beispielsweise modale Steuerelemente und Navigationsleisten, die je nach Kontext aktualisiert werden müssen.

So tauschen Sie eine Komponente aus:

  1. Ziehen Sie die Komponente aus dem Bedienfeld „Elemente“ und platzieren Sie sie auf der Komponente auf der Arbeitsfläche, mit der Sie sie austauschen möchten.

  2. Das Ziehsymbol ändert sich von einem einfachen Pfeil zu einem kreisförmigen Pfeil.

Durch das Austauschen einer verschachtelten Komponente innerhalb einer Primärkomponente werden die Vorkommen dieses verschachtelten Symbols im gesamten Dokument ersetzt. Durch das Austauschen einer Komponente in einer Instanz einer Komponente wird nur eine lokale Modifikation für diese Instanz erstellt.

Verwenden von Komponenten in verschiedenen Dokumenten

Mit verknüpften Elementen können Sie Elemente (Komponenten, Farben und Zeichenformate) aus einer oder mehreren Design-Dateien verwenden, die als XD Cloud-Dokumente verfügbar sind. Verknüpfte Elemente ergänzen den Arbeitsablauf für verknüpfte Komponenten. Wenn eine verknüpfte Instanz in einem nutzenden Dokument verwendet wird, können Sie die lokalen Instanzen mit Modifikationen (Format und Darstellung, Größenänderung und Layout sowie Struktur) im nutzenden Dokument anpassen.

Verknüpfte Elemente
Verknüpfte Elemente

Wenn Sie die Primärkomponente im Quelldokument ändern und speichern, wird dies durch ein blaues Kennzeichen neben jeder Komponenteninstanz im nutzenden Dokument angezeigt. Sie können mit dem Mauszeiger auf das blaue Kennzeichen zeigen, um eine Vorschau der Aktualisierungen im Bedienfeld „Elemente“ und (sofern sichtbar) in der Design-Arbeitsfläche aufzurufen. Klicken Sie auf das blaue Kennzeichen, um die Aktualisierung einer einzelnen Komponente zu akzeptieren. Wenn Sie auf die Schaltfläche Alle aktualisieren unten im Bedienfeld „Elemente“ klicken, werden alle Instanzen im Dokument aktualisiert. Weitere Informationen zu verknüpften Elementen finden Sie unter Arbeiten mit verknüpften Elementen 

Funktionseinschränkungen

  • Sie können die Grenzen Ihrer Instanzen nicht erweitern, wenn ein Objekt hinzugefügt wird, dass sich außerhalb der Grenzen der ursprünglichen Primärkomponente befindet. Andernfalls wird der Inhalt abgeschnitten. So können Sie dieses Problem umgehen:
  1. Erstellen Sie die Primärkomponente in der Größe, die Ihren beabsichtigten Modifikationen entspricht.
  2. Schließen Sie neue Objekte als Elemente außerhalb der Komponenteninstanz ein.
  • Sie können die Primärkomponente nicht aus einem Dokument in ein anderes verschieben.
  • „Primärkomponente bearbeiten“ und „Auf Primärkomponente zurücksetzen“ stehen bei Mehrfachauswahl nicht zur Verfügung.
  • Modifikationen werden entfernt, wenn Sie „In Pfad umwandeln“ auswählen. Wenn Sie weitere Bearbeitungsschritte ausführen, werden Modifikationen für dieses Objekt in Instanzen entfernt.
  • „Deckkraft“ wird derzeit nicht als editierbare Eigenschaft unterstützt, wenn Sie die Bearbeitung von der Primärkomponente aus vornehmen. Jede Instanz weist ihre eigene Deckkraft auf.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie