Arbeiten mit Dokumentelementen in Adobe XD

Sie suchen nach Informationen zum Verwalten von Dokumentelementen in XD? Dann sind Sie hier genau richtig!

Das Bedienfeld „Dokument-Assets“, das Sie über das Bedienfeld Bibliothekenaufrufen, ist die zentrale Stelle, an der Sie die Farben, Zeichenformate, Komponenten oder Audio-Elemente, die in Ihren Design-Projekten verwendet werden, verwalten und freigeben können.

Dokumentelemente

Warum mit Dokumentelementen arbeiten?

Das ist Richard, der die Design-Abteilung in seinem Betrieb leitet. Er ist für die Standardisierung von Design-Elementen in Cloud-basierten Systemen verantwortlich. Richard schult sich selbst darin, wie er Farben, Zeichenformate, Komponenten oder Audio-Elemente in verschiedenen Design-Systemen verwalten kann.

 

  • Er möchte wissen, wie er Elemente und Bibliotheken in XD am besten verwaltet.

 

  • Er braucht Hilfe, um ein Elementverwaltungssystem in XD aufzubauen.

Wenn Sie weiterlesen, erfahren Sie, wie Sie und Richard sich in Dokumentelemente in XD einarbeiten können und womit Sie am besten beginnen.

Bereits Benutzer von XD?

Applikation aktualisieren

Überblick über die neuen Funktionen

Jetzt testen

Beispieldatei abrufen

.xdc; 604 KB

Vorbereitung

Machen Sie sich mit den folgenden Konzepten in XD vertraut:

Dokumentelemente hinzufügen

Um Ihre Design-Stile und -Komponenten zu kuratieren, klicken Sie in der Symbolleiste auf „Bibliotheken“  oder drücken Sie Cmd + Umschalt + Y (macOS) bzw. Strg + Umschalt + Y (Windows) und dann auf „Dokumentelemente“ .
Im Bedienfeld „Dokumentelemente“ führen Sie dann die folgenden Schritte aus, um Farben, Zeichenformate, Komponenten oder Audio-Dateien hinzuzufügen, die Sie mehrmals im Dokument verwenden oder später als Teil Ihrer Bibliothek veröffentlichen wollen. 

Farben hinzufügen

Farben hinzufügen

  • Klicken Sie auf das Pluszeichen (+), um Farben und Verläufe hinzuzufügen. XD extrahiert die Textebenen mit den Flächen- und Rahmenfarben sowie die mit ausgewählten Objekten verknüpften Stile für Farben und Unterbereiche.

Zeichenformate hinzufügen

Elemente hinzufügen – Zeichenformate

  • Klicken Sie auf das Pluszeichen (+), um Farben und Zeichenformate hinzuzufügen. XD extrahiert alle Formate, die mit der Textebene verknüpft sind, einschließlich aller Unterbereiche.

Komponenten hinzufügen

Elemente hinzufügen – Komponenten

  • Klicken Sie auf das Pluszeichen (+), um eine Auswahl in eine Komponente zu konvertieren. Wenn Sie auf der Arbeitsfläche eine Komponente erstellen, fügt XD sie automatisch zu den Dokumentelementen hinzu.

Audio-Elementen hinzufügen

Elemente hinzufügen – Audio-Elemente

  • Audiodateien, die im Eigenschafteninspektor des Prototypmodus zu einem Prototyp hinzugefügt wurden, werden automatisch bei den Dokumentelementen angezeigt.

Worauf Sie achten sollten

  • Sie können den Dokumentelementen keine Farben aus Schatten hinzufügen.
  • Zeichenformate können nicht mit allgemeinen Eigenschaften gruppiert werden. 
  • Audiodateien können Sie nur aus den Dokumentelementen löschen.

  • Sie können Audiodateien im Eigenschafteninspektor des Prototypmodus hinzufügen.
  • Audiodateien können nicht umbenannt oder neu angeordnet werden.
  • Beim Verknüpfen mit Cloud-Dokumenten werden Audiodateien nicht verknüpft. 

Best Practices

  • Verwenden Sie die Listenansicht in den Dokumentelementen.um die Elemente entsprechend
    Ihren organisatorischen Anforderungen umzubenennen und zu sortieren. Die Rasteransicht  ist durch die etwas größeren Miniaturansichten und die Ausgabedarstellungen für die Wiederverwendung von Elementen optimiert.
  • Wählen Sie für einen Preflight-Test alle Zeichenflächen im Dokument aus, um alle im Dokument verwendeten Farb- und Zeichenformate zu extrahieren.

Dokumentelemente anwenden und wiederverwenden

Da Sie nun die hinzugefügten Elemente in den Dokumentelementen anzeigen können, wählen Sie auf der Zeichenfläche ein Objekt oder eine Gruppe von Objekten aus und klicken auf die Farbe oder das Zeichenformat, um es auf die Auswahl anzuwenden.

Um eine oder mehrere Komponenten in Ihrem Design zu verwenden, wählen Sie sie im Bedienfeld „Dokumentelemente“ aus und ziehen sie auf die Arbeitsfläche. Dort werden Instanzen dieser Komponenten erstellt.

Führen Sie die folgenden Schritte aus, um Farben, Zeichenformate oder Komponenten wiederzuverwenden: 

Farben wiederverwenden

Farben wiederverwenden

  1. Wählen Sie ein Objekt oder eine Textebene aus und klicken Sie auf das Farbfeld, um die Farbe als Flächenfarbe anzuwenden, oder
  2. wählen Sie ein Objekt mehrfach aus und wenden Sie eine Farbe oder einen Farbverlauf auf die Auswahl an oder
  3. klicken Sie in den Dokumentelementen mit der rechten Maustaste auf ein Farbfeld und wählen Sie Rahmenfarbe anwenden, um die Farbe als Rahmenfarbe anzuwenden, oder kopieren Sie den Hexadezimalwert, um ihn wiederzuverwenden.

Zeichenformate wiederverwenden

Zeichenformate wiederverwenden

  1. Wählen Sie eine Textebene oder einen Teil des Textes aus und klicken Sie auf ein Zeichenformat, um es anzuwenden.
  2. Wählen Sie ein Objekt mehrfach aus und wenden Sie ein Zeichenformat auf die gesamte Auswahl an.

Komponenten wiederverwenden

Komponenten wiederverwenden

  1. Ziehen Sie die Komponente per Drag & Drop aus den Dokumentelementen auf die Arbeitsfläche.
  2. Wählen Sie das Objekt mehrfach aus und ziehen Sie mehrere Komponenten auf die Arbeitsfläche.
  3. Beim Ziehen einer Komponente können Sie den Mauszeiger über eine andere Komponenteninstanz führen, um sie auszutauschen. 

Best Practices

  • Um sicherzustellen, dass Sie stets genau die gleichen Farben und Zeichenformate verwenden, sollten Sie nach dem Speichern Farben und Zeichenformate nur noch über die Dokumentelemente auf die ausgewählten Objekte anwenden.

Dokumentelemente bearbeiten

Nachdem Sie Ihre Elemente hinzugefügt und wiederverwendet haben, können Sie sie in den Dokumentelementen bearbeiten, um globale Änderungen im gesamten Dokument vorzunehmen. Dies ist eine optimale Methode, um Ihre Farben und Zeichenformate in einem Arbeitsgang im gesamten Dokument zu ändern. 

Führen Sie die folgenden Schritte aus, um Dokumentelemente zu bearbeiten:

Farben bearbeiten

Eine Farbe bearbeiten

  • Klicken Sie mit der rechten Maustaste auf ein Farbfeld und wählen Sie Bearbeiten, um den Farbwert im gesamten Dokument zu ändern. 
  • Alle Objekte auf der Arbeitsfläche, die diese Farbe verwenden, werden in Echtzeit aktualisiert. Dies ist eine großartige Möglichkeit, eine Farbänderung gesamtheitlich auszuprobieren und Änderungen vorzunehmen.

Zeichenformate bearbeiten

Ein Zeichenformat bearbeiten

  • Klicken Sie mit der rechten Maustaste auf ein Zeichenformat und wählen Sie Bearbeiten, um dieses Zeichenformat im gesamten Dokument zu ändern. 
  • Alle Textebenen auf der Arbeitsfläche, die dieses Zeichenformat verwenden, werden in Echtzeit aktualisiert.

Komponenten bearbeiten

Eine Komponente bearbeiten

  • Klicken Sie mit der rechten Maustaste auf die Komponente auf der Arbeitsfläche oder im Bedienfeld „Dokumentelemente“ und wählen Sie Primärkomponente bearbeiten aus, um die Primärkomponente auf der Arbeitsfläche hervorzuheben oder neu zu erstellen, falls sie gelöscht wurde.
  • Änderungen, die an der Primärkomponente vorgenommen werden, werden auf andere Komponenteninstanzen übertragen.

 

Worauf Sie achten sollten 

  • Beim Bearbeiten einer Farbe oder eines Zeichenformats, die über mehrere Objekte hinweg verwendet werden (> 100), kann es einige Zeit dauern, bis die Änderungen vom Bedienfeld auf alle Objekte auf der Arbeitsfläche übertragen werden.

Best Practices

  • Um zu sehen, wie sich die Bearbeitung auf Ihr Design auswirkt, verwenden Sie die Option Hervorhebung auf der Arbeitsfläche, bevor Sie die Elemente in den Dokumentelementen ändern.
  • Um Farben in Zeichenformaten zu bearbeiten, ändern Sie den Farbwert und dann den globalen Farbwert, um die Zeichenformate zu erhalten.
  • Wenn Sie eine verknüpfte Farbe oder ein verknüpftes Zeichenformat aktualisieren, werden nur die Objekte mit verknüpften Farben oder Zeichenformaten aktualisiert.

Dokumentelemente verwalten und organisieren

Um Elemente anzuzeigen und neu anzuordnen, wechseln Sie in den Dokumentelementen zwischen Raster- und Listenansicht.

  • Rasteransicht: Da in dieser Ansicht Miniaturansichten angezeigt werden, können Sie die Elemente visuell identifizieren.
  • Listenansicht: Diese Ansicht eignet sich optimal dafür, Elemente zu organisieren oder neu anzuordnen, denn es werden die Namen aller Elemente angezeigt.

In beiden Ansichten können Sie Elemente hinzufügen, wiederverwenden und bearbeiten und über das Suchfeld nach Elementen suchen oder das Bedienfeld auf eine bestimmte Kategorie filtern. 

Nachdem Sie Elemente in den Dokumentelementen hinzugefügt und wiederverwendet haben, können Sie sie auch organisieren und verwalten. 

Elemente löschen, hervorheben und umbenennen

Löschen und hervorheben

  • Klicken Sie mit der rechten Maustaste und wählen Sie Löschen aus, um eine Farbe, ein Zeichenformat, eine Komponente oder ein Audio-Element aus den Dokumentelementen zu löschen. Wenn Sie eine Komponente aus dem Bedienfeld löschen, wird auf der Arbeitsfläche die Gruppierung von Instanzen aufgehoben und sie werden in Standardobjekte konvertiert.
  • Klicken Sie mit der rechten Maustaste und wählen Sie Hervorhebung auf der Arbeitsfläche, um auf der Arbeitsfläche alle Objekte zu suchen, die eine bestimmte Farbe oder ein bestimmtes Zeichenformat bzw. Instanzen einer bestimmten Komponente verwenden. Wählen Sie auf der Arbeitsfläche beliebige Objekt- oder Komponenteninstanzen aus und verwenden Sie das Kontextmenü, um diese Farbe, dieses Zeichenformat oder diese Komponente in den Dokumentelementen anzuzeigen.
  • Klicken Sie mit der rechten Maustaste, um ein Element umzubenennen oder in die Listenansicht zu wechseln und alle Elemente umzubenennen.

Den Mauszeiger über Elemente führen

Mauszeiger über Elemente führen

Führen Sie den Mauszeiger über die Elementminiaturen, um die folgenden Informationen anzuzeigen: 

  • Farben: Zeigt den Hexadezimalwert oder den benutzerdefinierten Farbnamen an. 
  • Farbverläufe: Zeigt die Verlaufswerte bzw. Verlaufsabbrüche an. Zeichenformate: In der Miniaturansicht werden zusätzliche Texteigenschaften wie die Zeilenhöhe nicht angezeigt. 
  • Komponenten: Zeigt die Anzahl der Instanzen dieser Komponente auf der Arbeitsfläche an.

Elemente anzeigen

Elemente anzeigen

In der Listenansicht werden die Namen aller Elemente innerhalb einer Kategorie angezeigt.

Elemente anders anordnen

Elemente anders anordnen

Ziehen Sie in der Listenansicht ein Element auf eine andere Position, um es innerhalb der Kategorie neu anzuordnen.

Worauf Sie achten sollten

  • In der Listenansicht wird keine große Vorschau der Komponente angezeigt.
  • Ordnen Sie Elemente neu an, um sie über verschiedene Kategorien zu gruppieren. 

Best Practices

  • Mit den Filtern in den Dokumentelementen können Sie nur eine bestimmte Kategorie oder eine bestimmte Elementquelle filtern bzw. anzeigen.
  • Unsicher, wie sich eine Änderung auf Ihr Design auswirkt? Verwenden Sie die Option Hervorhebung auf der Arbeitsfläche, um Instanzen dieses Elements im gesamten Dokument anzuzeigen.
  • Um nicht verwendete Komponenten zu identifizieren, wählen Sie auf der Arbeitsfläche alle Objekte aus, klicken mit der rechten Maustaste, wählen Sie Komponenten in „Elemente“ anzeigen aus und ziehen die hervorgehobenen Komponenten an den Anfang der Liste.
  • Wenn Sie den Mauszeiger über folgende Elementtypen führen:
    • Farbverlauf: Die QuickInfo zeigt den Anfangs- und Endwert des Farbverlaufs an. Ein „-“ zwischen den Werten kennzeichnet einen Farbverlauf mit 2 Verlaufsabbrüchen und ein „...“ zwischen den Werten kennzeichnet einen Farbverlauf mit mehreren Verlaufsabbrüchen.
    • Komponente: Die QuickInfo zeigt die Anzahl der Instanzen dieser Komponente auf der Arbeitsfläche an.
  • Verwenden Sie beim Umbenennen von Elementen in der Listenansicht die Tabulatortaste (TAB), um das nächste Element in der Listenansicht umzubenennen. Entsprechend können Sie mit UMSCHALT + TAB in die umgekehrte Richtung springen.

Elemente veröffentlichen, exportieren und freigeben

Weitere Informationen

Weitere Informationen zur Arbeit mit Elementen (Assets) erhalten Sie im folgenden Video:

Wie geht’s weiter?

Jetzt haben Sie die Grundlagen der Arbeit mit Elementen und Bibliotheken in XD kennengelernt. Lernen Sie als Nächstes, wie Sie Ihre Elemente, Komponenten und Design-Systeme mithilfe von Bibliotheken freigeben oder Ihr bestehendes XD Cloud-Dokument in Bibliotheken migrieren können.

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