Benutzerhandbuch Abbrechen

Erstellen dynamischer Designs mit Stapeln

  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

Sie können in Adobe XD mithilfe von Stapeln dynamische Layouts erstellen, die auf Inhaltsänderungen reagieren.

Durch Stapel in Adobe XD können Sie zwischen Objekten in einer Gruppe feste Abstände definieren. Wenn Sie Objekte in einem Stapel skalieren, neu anordnen oder ändern, behält XD den definierten Abstand zwischen den Objekten automatisch bei. 

Ergebnis der Funktionsweise von Stapeln

Zusammen mit Innenabständen und Responsive Resize bilden Stapel eine leistungsstarke Funktionskombination, die für mehr Kontrolle und Geschwindigkeit beim Design sorgt. Werden Stapel in Komponenten eingesetzt, lassen sich das Design und die Bearbeitung von Schaltflächen, Menüs, Dropdown-Listen und kartenbasierten Layouts in Nullkommanichts automatisieren.

Neu bei XD?

XD installieren

Grundlagen der Applikation

Bereits Benutzer von XD?

XD aktualisieren

Überblick über die neuen Funktionen

Vorbereitung

Stellen Sie sicher, dass Sie mit den Grundlagen von inhaltsbasierten Layouts vertraut sind:

Einschränkungen

Beachten Sie die folgenden Einschränkungen, bevor Sie mit Stapeln arbeiten:

  • Wenn Sie mit der Maus auf ein Element mit einem Hover-Zustand mit Größenänderung zeigen, wird die Größe des Hintergrunds nicht an den neuen Zustand angepasst und die Elemente im Stapel werden nicht verschoben.
  • Komponenten können nicht als Hintergrund für Innenabstände und Stapel dienen. Erstellen Sie stattdessen eine Komponente, die sowohl den Inhalt als auch den Hintergrund enthält.
  • Dies ist nicht möglich:
    • Spezielle Gruppen in Masken oder boolesche Gruppen in Stapeln konvertieren
    • Die Größe von Stapeln in Stapelrichtung verändern
    • Ein Stapel-Element gleichzeitig mit einem Element außerhalb des Stapels auswählen

Stapel aktivieren

Sie können Stapel für eine Gruppe oder Komponente aktivieren, für die Responsive Resize aktiviert ist. Wählen Sie dazu das Kontrollkästchen Stapel innerhalb der Steuerelemente für Responsive Resize im Eigenschafteninspektor aus.

XD bestimmt automatisch die Stapelausrichtung basierend auf der Struktur Ihrer Gruppe oder Komponente. Wenn Sie die Stapelausrichtung ändern möchten, wählen Sie Vertikal oder Horizontal innerhalb der Option Stapel im Eigenschafteninspektor aus. 

Beim Arbeiten mit Komponenten ist die Ausrichtung des Stapels nur für die Primärkomponente verfügbar.

Was passiert, wenn Sie Stapel aktivieren?

Wenn Sie Stapel aktivieren, passiert in XD Folgendes:

  • Es identifiziert automatisch den Hintergrund (eine Gruppe oder Form, die am unteren Rand des Bedienfelds „Ebenen“ positioniert wurde und sich auf der Arbeitsfläche mit allen Objekten in der Gruppe überschneidet).
  • Es aktiviert und berechnet die Werte für die Innenabstände.
  • Es bestimmt die Stapelausrichtung: Vertikal oder Horizontal.
  • Es gruppiert überlappende Elemente, um das Layout beizubehalten.
  • Es definiert und behebt die Abstandswerte zwischen den Elementen.
Stapel anwenden

Stapelelemente bearbeiten

Nachdem Sie Stapelelemente erstellt haben, bearbeiten Sie sie mit einer der folgenden Optionen:

Elemente verschieben oder ausrichten                                     Objekte und Text im Stapel skalieren

Stapel ausrichten

Sie können die Elemente frei bewegen oder die Werkzeuge zum Ausrichten der Stapelelemente entgegengesetzt zur Stapelrichtung verwenden.

Größe ändern

Wählen Sie ein zu skalierendes Objekt aus. Andere Objekte im Stapel werden dann automatisch verschoben, um ihren relativen Abstand beizubehalten. Mit der Option Text mit automatisch angepasster Höhe wird die Höhe des Texts im Stapel dynamisch angepasst, ohne dessen Breite zu ändern.

Bearbeiten von Abständen zwischen Objekten                 Anpassen von Abständen in einem Stapel

Abstände zwischen Objekten bearbeiten

Wählen Sie ein Objekt in einer gestapelten Gruppe oder Komponente aus und führen Sie den Mauszeiger über den Leerraum. Eine rosa Hervorhebung repräsentiert den Abstand zwischen den Objekten im Stapel. Klicken und ziehen Sie die Markierung, um den Abstand zwischen den Objekten zu bearbeiten.

Abstände zwischen Stapeln anpassen

Wählen Sie den gesamten Stapel aus und halten Sie auf der Tastatur die Taste „S“ gedrückt, um den Abstand in einem Stapel anzupassen. Sie können auch „S“ drücken, um denn Innenabstand anzupassen.

Ausgleichen von Abständen in einem Stapel                      Duplizieren von Elementen in einem Stapel

Ziehen und verwenden Sie Umschalt oder Umschalt + S (wenn sich Ihre Auswahl außerhalb des Stapels befindet).

Mit Cmd + D können Sie ein Element in einem Stapel duplizieren und unter dem ausgewählten Element positionieren.

Stapelelemente neu anordnen

Nachdem Sie Stapelelemente erstellt und geändert haben, ordnen Sie sie mit einer der folgenden Optionen neu an:

  • Wählen Sie auf der Arbeitsfläche die Stapelelemente aus und ziehen Sie sie entlang der Stapelrichtung.
  • Mit Cmd + ] und Cmd + [ , um die Auswahl im Stapel nach oben und unten zu verschieben, und Cmd +Umschalt + ] und Cmd +Umschalt + [, um sie in einem Stapel an die erste oder letzte Stelle zu verschieben. Diese Befehle stehen auch im Kontextmenü (Rechtsklick) zur Verfügung.
  • Die neue Position des Stapelelements wird als rosa Bereich hervorgehoben. Um bei der Neuanordnung die Ausrichtung beizubehalten, drücken Sie beim Verschieben die Umschalttaste. Dadurch erreichen Sie, dass die Stapelelemente in Ziehrichtung gesperrt werden und somit ihre ursprüngliche Ausrichtung erhalten bleibt.
Stapelelemente neu anordnen

Stapelhintergrund erstellen oder ändern

Wenn Sie einen Stapel erstellen, bestimmt XD automatisch den Hintergrund. Wenn Sie jedoch Stapel für eine Gruppe oder Komponente aktivieren, wird die Ebene oder Gruppe, die am unteren Rand des Stapels positioniert ist und seinen Inhalt überlappt, zum Hintergrund.

XD unterstützt keine Komponenteninstanzen als Hintergrund.

Um einen Stapelhintergrund zu erstellen und zu ändern, führen Sie die folgenden Schritte aus:

Stapelhintergrund erstellen und ändern

  1. Erstellen Sie eine Form oder Gruppe im Stapel, die als Stapelhintergrund fungiert. Sie können einen Hintergrund auch außerhalb des Stapels erstellen und in die gestapelte Gruppe kopieren.
  2. Wählen Sie im Stapel das Element aus, das Sie als Hintergrund verwenden möchten.
  3. Klicken Sie mit der rechten Maustaste und wählen Sie Als Hintergrund festlegen oder Hintergrund ersetzen. Das ausgewählte Element wird an das Ende des Stapels verschoben und mittels Skalierung an die Größe des Stapels und die Abstandswerte angepasst.

Mehr Möglichkeiten mit Stapelelementen

Nun, da Sie gelernt haben, wie Sie Stapel erstellen und mit ihnen arbeiten können, finden Sie hier einige zusätzliche Hinweise zur Verwendung von Stapeln:

Stapel verschachteln und neu anordnen

Sie erhalten klar definierte und einfach zu bearbeitende Layouts, wenn Sie Stapel ineinander verschachteln – z. B. einen horizontalen in einen vertikalen Stapel. Sie können eine unbegrenzte Anzahl von Stapeln verschachteln. Sehen Sie sich die animierte Illustration an, um die Funktionsweise von verschachtelten Stapeln zu verstehen. 

Stapel und Wiederholungsraster

Stapel in Komponenten und Zuständen

Sie können Stapel und Innenabstände auf Komponenten anwenden, um wiederverwendbare UI-Elemente im Kontext von Design-Systemen zu definieren. Beim Arbeiten mit Komponenten, die eine Beschriftung oder Zeilenaktualisierung benötigen, bewirkt die Verwendung von Stapeln, dass das Layout der Komponente auf Änderungen reagiert und manuelle Layout-Arbeit automatisiert wird. Wenn Sie beispielsweise mehrere Instanzen mit Inhaltsüberschreibungen haben, verwenden Sie Stapel, um Abstände global zu bearbeiten und zu verwalten. Keine manuelle Bearbeitung der einzelnen Karten mehr!

Stapel, die auf Primärkomponenten angewendet werden, werden automatisch auf alle zugehörigen Instanzen und Zustände angewendet. Sie können auch eine verknüpfte Komponente mit Stapeln erstellen und sie bearbeiten. 

Wie verhalten sich Modifizierungen bei Stapeln?

  • Ein Abstand wird modifiziert, wenn Sie den Abstand zwischen zwei Elementen eines Stapels in einer Instanz oder einem Zustand manuell bearbeiten. Wenn Sie den Bereich in der Primärkomponente ändern, werden die Änderungen nicht auf die Instanz oder den Zustand angewendet.
  • Bei Instanzen können Inhalte oder Layout von Elementen überschrieben werden, etwa mit einem größeren Flächentext. Innenabstände oder Abstände zwischen den Instanzen können weiterhin mit der Primärkomponente synchron sein. 
Verhalten von Modifizierungen bei Stapeln

Weitere Informationen

„Zusammen mit Innenabständen und Responsive Resize bieten Stapel eine leistungsstarke Funktionskombination, wenn Sie in einem Design-System arbeiten. Wenn Stapel bei einer Primärkomponente verwendet werden, übernimmt jede Instanz dieser Komponente diese Stapelstruktur.“– Dani Beaumont, Principal Product Manager, XD.

Sehen Sie sich dieses Video an, um mehr über die ersten Schritte mit Stapeln bei Komponenten und Gruppen zu erfahren.

Dauer: 1 Minute.

Wie geht’s weiter?

Wir haben Ihnen gezeigt, wie man Stapel verwendet, um Abstände zwischen Elementen zu definieren. Lernen Sie als Nächstes, wie Sie animierte Prototypen erstellen und für Designer oder Stakeholder freigeben, um Feedback einzuholen.

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