Erstellen dynamischer Designs mit Stapeln

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