Elemente und Komponenten in Ihrem Adobe XD Projekt mithilfe des Bedienfelds „Elemente“ verwalten

Wie verwalte ich Elemente in XD?

Sie können Elemente wie Farben, Farbverläufe oder Zeichenformate der Objekte, die Sie in Ihrem Projekt verwenden, an zentraler Stelle verwalten. Dazu fügen Sie sie in das Bedienfeld Elemente ein.

Ins Bedienfeld Elemente werden automatisch auch alle Komponenten eingefügt, die Sie in XD erstellen. Weitere Informationen zu Komponenten finden Sie unter Komponenten.

Um das Bedienfeld Elemente zu öffnen, klicken Sie in der Symbolleiste auf  oder drücken Sie Cmd + Umschalt + Y (macOS) bzw. Strg + Umschalt + Y (Windows).

Das Bedienfeld „Elemente“
Das Bedienfeld „Elemente“

A. Farben B. Zeichenformate C. Komponenten D. Elemente hinzufügen E. Symbol, das anzeigt, wenn eine Schrift fehlt oder deaktiviert ist 

Elemente hinzufügen und entfernen

Farben und Farbverläufe (lineare oder radiale) in das Bedienfeld „Elemente“ aufnehmen: Wählen Sie auf der Zeichenfläche ein Objekt oder eine Gruppe von Objekten aus und klicken Sie im Bedienfeld Elemente neben Farben auf das Pluszeichen (+). Weitere Informationen finden Sie unter Farben als Elemente hinzufügen und anwenden.

Zeichenformate zum Bedienfeld „Elemente“ hinzufügen: Wählen Sie auf der Zeichenfläche einen Text oder ein Textfeld aus und klicken Sie im Bedienfeld Elemente neben Zeichenformate auf das Pluszeichen (+). Weitere Informationen finden Sie unter Zeichenformate als Elemente hinzufügen und anwenden.

Element aus dem Bedienfeld „Elemente“ löschen: Wählen Sie im Bedienfeld Elemente das Element aus, klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Cmd-Taste (macOS) und wählen Sie im Kontextmenü die Option Löschen.

Sie können auch eine Zeichenfläche oder eine Gruppe von Zeichenflächen auswählen und auf das Pluszeichen (+) klicken, um alle Farben und Zeichenformate aus den Zeichenflächen ins Bedienfeld Elemente einzufügen. 

Hinweis:

Farben, Farbverläufe, Zeichenformate und Komponenten, die ins Bedienfeld Elemente eingefügt wurden, bleiben dort, selbst wenn Sie das Element von der Zeichenfläche löschen. Auf diese Weise können Sie die Elemente wiederverwenden, wenn Sie sie das nächste Mal benötigen. 

Farben als Elemente hinzufügen und anwenden

  1. Wählen Sie auf der Arbeitsfläche das betreffende Objekt aus und weisen Sie ihm über den Eigenschafteninspektor die gewünschte Farbe zu.
  2. Um diese Farbe als Element hinzuzufügen, wählen Sie auf der Arbeitsfläche das obige Objekt aus und klicken im Bedienfeld Elemente neben Farben auf das Pluszeichen (+).
  3. Um dieselbe Farbe nun auf ein anderes Objekt anzuwenden, wählen Sie auf der Arbeitsfläche das Objekt aus und führen einen der folgenden Schritte aus:
    • Um eine Flächenfarbe anzuwenden, klicken Sie im Bedienfeld Elemente auf eine Farbe oder Sie klicken mit der rechten Maustaste auf die Farbe und wählen Als Fläche anwenden.
    • Um eine bestimmte Farbe auf eine Linie (Rahmen) anzuwenden, klicken Sie im Bedienfeld Elemente auf die Farbe und wählen Als Rahmen anwenden
  4. Um nun eine Farbe zu ändern, bearbeiten Sie sie zentral im Bedienfeld Elemente. Sie können im Dokument direkt beobachten, wie alle Objekte mit dieser Farbe die neue Farbe annehmen.

Zeichenformate als Elemente hinzufügen und anwenden

  1. Wählen Sie auf der Arbeitsfläche den Text aus und formatieren ihn, indem Sie ihm über den Eigenschafteninspektor die gewünschten Textattribute zuweisen.
  2. Die Gesamtheit dieser Textattribute können Sie als Zeichenformate ins Bedienfeld Elemente einfügen. Dazu wählen Sie auf der Arbeitsfläche den formatierten Text aus und klicken im Bedienfeld Elemente neben Zeichenformate auf das Pluszeichen (+). Wenn Sie einen Text mit unterschiedlichen Formatierungen auswählen, werden beim Klicken auf das Pluszeichen (+) mehrere Zeichenformate ins Bedienfeld eingefügt. 
  3. Um ein Zeichenformat anzuwenden, wählen Sie auf der Arbeitsfläche den Text aus und klicken im Bedienfeld Elemente auf das entsprechende Zeichenformat.
  4. Um die Textattribute eines Zeichenformats zu ändern, bearbeiten Sie es per Rechtsklick im Bedienfeld „Elemente“. Sie können im Dokument direkt beobachten, wie alle Textstellen mit diesem Zeichenformat anders formatiert werden.
Zeichenformate als Elemente hinzufügen
Zeichenformate als Elemente hinzufügen

Elementbeschriftungen

Sie können den Elementen im Bedienfeld Elemente Ihre eigenen Beschriftungen zuweisen. Wechseln Sie dazu im Bedienfeld Elemente zur Listenansicht und klicken Sie auf eine Beschriftung, um sie umzubenennen. Sie können beispielsweise den Namen einer Farbe von einem HEX-Wert in „Hintergrundfarbe“ ändern.

Wenn Sie eine Komponente umbenennen, wirkt sich die Änderung auf alle Instanzen der Komponente im Bedienfeld Ebenen aus, damit Sie sie leichter wiederfinden.

XD gestattet sogar die Verwendung von Emoticons in Beschriftungen.

Elementbeschriftungen
Elementbeschriftungen

Elemente im Bedienfeld „Elemente“ anders anordnen

Sie können die Elemente im Bedienfeld Elemente anders anordnen. Häufig verwendete Elemente können Sie an den Anfang der Liste verschieben oder sie als Gruppen anordnen.

Elemente im Bedienfeld „Elemente“ anders anordnen
Elemente im Bedienfeld „Elemente“ anders anordnen
  1. Klicken Sie im Bedienfeld Elemente auf die Elemente und ziehen Sie sie über das Bedienfeld.

  2. Um im Bedienfeld mehrere Elemente gleichzeitig zu verschieben, wählen Sie bei gedrückter Strg-Taste (Win) bzw. bei gedrückter Cmd-Taste (macOS) mehrere Elemente aus.

Wie behebe ich Probleme mit fehlenden Schriften?

Wenn Ihr XD Dokument Schriften enthält, die auf Ihrem Computer nicht vorhanden sind, werden diese in XD im Bereich Fehlende Schriften des Bedienfelds Elemente aufgeführt. Sie können sie dann auf der Arbeitsfläche hervorheben lassen und so die Auswirkung auf die Designs einschätzen und im gesamten Design ersetzen. Wenn Schriften fehlen, die in der Adobe Fonts-Bibliothek enthalten sind, werden diese von XD automatisch aktiviert, um das Anwendererlebnis zu optimieren.

Arbeiten mit Adobe Fonts

Um die Verwendung von Adobe-Schriften möglichst einfach zu gestalten, aktiviert XD auf Ihrem Computer automatisch fehlende Schriften, die in der Adobe Fonts-Bibliothek enthalten sind – ganz ohne Ihr Zutun.

Wenn Sie online sind und ein Dokument öffnen, in dem Schriften fehlen, die in Adobe Fonts verfügbar sind, aktiviert XD diese Schriften automatisch auf Ihrem Computer. (Adobe Fonts wird Ihnen über Ihr Creative Cloud-Abonnement bereitgestellt.)

Schriften, die aus Adobe Fonts geladen wurden, sind durch ein blaues Aktivierungssymbol gekennzeichnet. Sobald sie einsatzbereit sind, stehen sie ganz automatisch in Ihrem Dokument zur Verfügung.

Hinweis:

Wenn Sie mehrere Dokumente mit verschiedenen Schriften laden, stellen Sie sicher, dass Sie die Schriften aus der Creative Cloud-Schriftenbibliothek, die Sie nicht mehr verwenden, deaktiviert haben.

Schriften aus Adobe Fonts werden automatisch aktiviert
Schriften aus Adobe Fonts werden automatisch aktiviert

A. Fehlende Schriften B. werden aktiviert 

Fehlende Schriften erkennen und ersetzen

Wenn in Ihrem Dokument Schriften fehlen, wird neben der betreffenden Schrift im Bedienfeld Elemente ein Ausrufezeichen angezeigt. So ersetzen Sie die fehlende Schrift:

  1. Klicken Sie mit der rechten Maustaste auf die fehlende Schrift und wählen Sie Schrift ersetzen, um eine Ersatzschrift festzulegen. XD zeigt automatisch die vorgeschlagene Ersatzschrift auf der Arbeitsfläche an. Mit der Option Hervorhebung auf der Arbeitsfläche können Sie auch die fehlende Schrift in Ihren Designs hervorheben lassen, bevor Sie sie ersetzen.
  2. Wählen Sie OK, um die Schrift auf der Arbeitsfläche und in den definierten Zeichenformaten zu ersetzen.
Kennzeichnung fehlender Schriften
Fehlende Schriften erkennen, hervorheben und ersetzen

A. Hervorhebung auf der Arbeitsfläche B. Kennzeichnung bei fehlender Schrift C. Popup bei Rechtsklick auf eine fehlende Schrift 
Dialogfeld „Schrift ersetzen“
Dialogfeld „Schrift ersetzen“

Was sind Komponenten und wie kann ich sie erstellen, bearbeiten und löschen?

Eine Komponente ist ein Objekt (oder eine Objektgruppe), das in den verschiedenen Zeichenflächen in Ihrem Dokument mehrfach verwendet werden kann. Alle Instanzen einer in Ihrem Projekt verwendeten Komponente sind verknüpft. Das heißt, jede Aktualisierung, die an einer Instanz vorgenommen wird, wird sofort in allen anderen Instanzen widergespiegelt.

Um ein Objekt in eine Komponente zu konvertieren, führen Sie eine der folgenden Aktionen aus:

  • Klicken Sie mit der rechten Maustaste auf das Objekt und wählen Sie Komponente erstellen.
  • Wählen Sie das Objekt aus und drücken Sie Cmd + K (macOS) bzw. Strg + K (Windows).
  • Auf dem Mac wählen Sie das Objekt aus und wählen dann Objekt > Komponente erstellen.
  • Wählen Sie das Objekt aus und klicken Sie im Bedienfeld Elemente in der Bibliothek Komponenten auf das Pluszeichen (+).

Alle Komponenten, die Sie in Ihrem Projekt erstellen, werden automatisch in der Bibliothek Komponenten im Bedienfeld Elemente angezeigt.

Bibliothek „Komponenten“. Klicken Sie auf das Pluszeichen (+), um ein ausgewähltes Objekt in eine Komponente umzuwandeln und zur Bibliothek hinzuzufügen.
Bibliothek „Komponenten“. Klicken Sie auf das Pluszeichen (+), um ein ausgewähltes Objekt in eine Komponente umzuwandeln und zur Bibliothek hinzuzufügen.

Komponenten bearbeiten und löschen

Um Änderungen am Schatten oder weichgezeichneten Hintergrund einer Komponente vorzunehmen, müssen Sie – im Gegensatz zur Bearbeitung regulärer Objekte – auf die Komponente auf der Zeichenfläche doppelklicken. Nach dem Doppelklick wird die Komponente mit einem dickeren Rahmen auf der Zeichenfläche angezeigt. Ist die Komponente eine Objektgruppe, können Sie nach einem Doppelklick jedes Objekt in der Gruppe bearbeiten. 

Um eine Komponente aus der Bibliothek Komponenten zu löschen, klicken Sie mit der rechten Maustaste und wählen Komponente entfernen.

Komponenten wiederverwenden

Um eine Komponente wiederzuverwenden, ziehen Sie sie aus der Bibliothek Komponenten auf die Zeichenfläche. Sie können eine Komponente auch innerhalb einer Zeichenfläche oder zwischen zwei Zeichenflächen kopieren und einfügen. Alle verknüpften Instanzen der Komponente werden mit einem grünen Rahmen angezeigt. Es ist auch möglich, Komponenten aus einem XD Dokument zu kopieren und sie in ein anderes einzufügen. 

Um an einer Komponenteninstanz Formatänderungen vorzunehmen, die in den anderen Instanzen nicht widergespiegelt werden, klicken Sie mit der rechten Maustaste auf die Instanz und wählen Komponentengruppierung aufheben. Anschließend können Sie die Änderungen vornehmen. 

Um Text oder die Bitmap einer Komponenteninstanz zu ändern, brauchen Sie die Komponentengruppierung nicht aufzuheben. Weitere Informationen finden Sie unter Text oder Bitmap für einzelne Komponenteninstanzen modifzieren.

Hinweis:

Wenn Sie die Gruppierung einer Komponente aufheben und mit denselben Objekten erneut eine Komponente erstellen, wird eine neue Komponente erstellt.

Text oder Bitmap für einzelne Komponenteninstanzen modifzieren

Sie können den Text oder die Bitmap von Komponenteninstanzen ändern, ohne dass sich dies auf das Original auswirkt. Durch Modifikationen können Sie dieselbe Komponente in Ihren XD Dokumenten mehrfach verwenden, jedoch mit unterschiedlichem Text oder einer jeweils eigenen Bitmap in jeder Komponenteninstanz.

Dies ist besonders dann nützlich, wenn Sie Schaltflächen oder andere Navigationselemente erstellen, die zwar dasselbe Design-Objekt, aber verschiedene Textblöcke oder Bilder verwenden.

Um Text oder Bitmaps in Komponenteninstanzen zu modifzieren, wählen Sie den Text aus und geben Ihren neuen Text ein. Oder Sie ersetzen eine Bitmap in einer Komponenteninstanz durch eine andere Bitmap.

Die Änderung am Text oder der Bitmap betrifft nur diese eine Instanz. Sie wirkt sich nicht auf die ursprüngliche Komponente aus.

Sollen Text- oder Bitmap-Änderungen in einer Komponenteninstanz von den restlichen mit der Komponente verbundenen Instanzen übernommen werden, klicken Sie auf der Zeichenfläche mit der rechten Maustaste auf die Komponente und wählen Modifikation auf andere Instanzen übertragen.

Komponenten ersetzen

Sie können alle Instanzen einer Komponente durch eine andere Komponente ersetzen. Ziehen Sie dazu eine Komponente aus dem Bedienfeld Elemente auf eine andere Komponente. Wenn sich der Mauszeiger über der Komponente befindet, ändert sich das Pluszeichen in einen Pfeil, wodurch angezeigt wird, dass die Komponente und alle ihre Instanzen ersetzt werden.

Alle Instanzen einer Komponente durch eine andere Komponente ersetzen
Alle Instanzen einer Komponente durch eine andere Komponente ersetzen

Was sind verknüpfte Elemente?

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 Sie ein verknüpftes Element im Quelldokument aktualisieren, benachrichtigt XD Instanzen dieser verknüpften Elemente über diese Aktualisierungen. Anschließend können Sie die Aktualisierungen in der Vorschau anzeigen und akzeptieren.  

Wie werden verknüpfte Elemente zum Bedienfeld „Elemente“ hinzugefügt?

Führen Sie einen der folgenden Vorgänge aus, um verknüpfte Elemente in das Bedienfeld Elemente einzufügen:

  • Klicken Sie auf das Pluszeichen (+) neben dem Bedienfeld Elemente, wenn das Bedienfeld bereits gefüllt ist.

Oder:

  • Klicken Sie auf Assets verknüpfen , wenn das Bedienfeld leer ist.

Das Fenster Assets verknüpfen mit den beiden Registerkarten Cloud-Dokumente und Für Sie freigegeben wird geöffnet. Sie können Dokumente auf den Registerkarten Cloud-Dokumente und Für Sie freigegeben nach Name, Änderungsdatum, Erstellungsdatum und Größe sortieren. Wählen Sie diese Option aus, ein XD Cloud-Dokument zu Ihrem Design-Projekt hinzuzufügen.

Verknüpfte Elemente

Die Elemente aus dem verknüpften Cloud-Quelldokument werden zum Bedienfeld Elemente unter einem eigenen Filter hinzugefügt, der nach dem Cloud-Dokumentnamen benannt ist. Beispiel: CodeBrown_Tractiv_UI_kit.  

Wenn Sie im Bedienfeld Elemente einen Filter festgelegt haben, wechseln Sie in die Ansicht Alle Elemente, um die neu aus dem Cloud-Dokument hinzugefügten Elemente im Elementbrowser anzuzeigen. Beachten Sie, dass Farben, Zeichenformate und Komponenten automatisch aus dem verknüpften Dokument importiert werden.

Weitere Informationen zum Verwenden von verknüpften Elementen finden Sie unter Arbeiten mit verknüpften Elementen.

Was sind verknüpfte Komponenten?

Mit verknüpften Komponenten können Sie dieselbe Komponente in verschiedenen Dokumenten verwenden und beispielsweise für UI-Kits, Styleguides oder Stickerbögen nur eine einzige Version der Komponente verwalten. Wenn Sie eine verknüpfte Komponente im Quelldokument aktualisieren und die Änderungen speichern, werden Sie von XD im Zieldokument über diese Aktualisierung informiert.

Weitere Informationen zur Verwendung von verknüpften Komponenten finden Sie unter Arbeiten mit verknüpften Komponenten.

Wie kann ich Elemente und Komponenten im Bedienfeld „Elemente“ suchen und filtern?

Elemente nach dem Elementtyp filtern

Standardmäßig werden im Bedienfeld Elemente alle Elemente angezeigt. Über die Dropdown-Liste neben dem Suchfeld können Sie die Elemente nach einem bestimmten Elementtyp filtern. Öffnen Sie die Dropdown-Liste und wählen Sie einen der folgenden Elementtypen aus: Farben, Zeichenformate oder Komponenten

Filtern von Elementen in Adobe XD
Filtern von Elementen in Adobe XD

Elemente suchen

Im Bedienfeld Elemente können Sie nach Farben, Zeichenformaten und Komponenten suchen. Um nach einer bestimmten Farbe zu suchen, geben Sie deren Hex-Code oder die von Ihnen festgelegte Beschriftung ein. Um nach bestimmten Zeichenformaten oder Komponenten zu suchen, geben Sie den Namen des betreffenden Elements ein. XD zeigt alle dieser Suchzeichenfolge entsprechenden Ergebnisse im Bedienfeld Elemente an. 

In Adobe XD Farben über ihren Hexadezimalcode suchen
Farben über ihren Hexadezimalcode suchen

XD merkt sich die letzten fünf Suchabfragen für jede Sitzung. Diese Abfragen erscheinen im Suchverlauf.

Wie kann ich Elemente und Komponenten auf der Arbeitsfläche über das Bedienfeld „Elemente“ suchen?

In XD können Sie auch Elemente suchen, die sich auf der Arbeitsfläche befinden. Um herauszufinden, wo überall auf der Arbeitsfläche sich ein Element befindet, wählen Sie dieses Element im Bedienfeld Elemente aus, klicken mit der rechten Maustaste und wählen Hervorhebung auf der Arbeitsfläche. Überall auf der Arbeitsfläche, wo das Element platziert wurde, wird es hervorgehoben.

Elemente auf der Arbeitsfläche suchen und hervorheben
Elemente auf der Arbeitsfläche suchen und hervorheben

Wenn eine Komponente nirgendwo im Projekt verwendet wird, wird in XD die folgende Meldung angezeigt: 0 Kopien dieser Komponente gefunden.

Elemente zum ausgewählten Objekt im Bedienfeld „Elemente“ hervorheben

In XD können Sie auch umgekehrt im Bedienfeld Elemente die Elemente anzeigen, die in dem Objekt verwendet werden, das auf der Arbeitsfläche ausgewählt ist. Wenn Sie auf der Arbeitsfläche ein Objekt auswählen, können Sie schnell anzeigen, welche Farbe, welches Zeichenformat oder welche Komponente in diesem Objekt verwendet wird.

Um im Bedienfeld Elemente die in einem ausgewählten Objekt verwendeten Elemente hervorzuheben, wählen Sie das Objekt auf der Zeichenfläche aus, klicken mit der rechten Maustaste und wählen eine der folgenden Optionen aus:

  • Farbe anzeigen: Hebt im Bedienfeld Elemente die im Objekt verwendete Farbe hervor.
  • Zeichenformat anzeigen: Hebt das im Objekt verwendete Zeichenformat hervor.
  • Komponente anzeigen: Ordnet dem Objekt die entsprechende Komponente zu (die sich bereits im Bedienfeld befindet).

Es werden alle Elemente hervorgehoben, die im ausgewählten Objekt verwendet werden.

Elemente anzeigen, die in einem ausgewählten Objekt in Adobe XD verwendet werden
Elemente anzeigen, die in einem ausgewählten Objekt verwendet werden

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