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!
Zuletzt aktualisiert am
17. Juni 2021
- Adobe XD Benutzerhandbuch
- Einführung
- Neue Funktionen in Adobe XD
- Häufige Fragen
- Erstellen von Designs und Prototypen und Freigeben mit Adobe XD
- Farbmanagement
- Systemanforderungen
- Arbeitsbereich – Grundlagen
- Ändern der in Adobe XD angezeigten Sprache
- Zugriff auf UI-Design-Kits
- Barrierefreiheit in Adobe XD
- Tastaturbefehle
- Tipps und Tricks
- Design erstellen
- Zeichenflächen, Hilfslinien und Ebenen
- Formen, Objekte und Pfade
- Auswählen, Vergrößern, Verkleinern und Drehen von Objekten
- Verschieben, Ausrichten, Verteilen und Anordnen von Objekten
- Gruppieren, Sperren, Duplizieren, Kopieren und Spiegeln von Objekten
- Festlegen von Strichen, Flächen und Schlagschatten für Objekte
- Erstellen sich wiederholender Elemente
- Perspektivisches Design mit 3D-Transformationen
- Bearbeiten von Objekten mithilfe boolescher Operationen
- Text und Schriften
- Komponenten und Zustände
- Maskierung und Effekte
- Layout
- Videos und Lottie-Animationen
- Prototypen erstellen
- Erstellen interaktiver Prototypen
- Animieren von Prototypen
- Für Auto-Animate unterstützte Objekteigenschaften
- Erstellen von Prototypen mit Tastatur- und Gamepad-Nutzung
- Erstellen von Prototypen mit Sprachbefehlen und Audiowiedergabe
- Erstellen zeitgesteuerter Übergänge
- Hinzufügen von Overlays
- Sprachprototypen erstellen
- Erstellen von Ankerlinks
- Erstellen von Hyperlinks
- Testen von Designs und Prototypen
- Freigeben, Exportieren und Review
- Ausgewählte Zeichenflächen freigeben
- Freigeben von Designs und Prototypen
- Zugriffsberechtigungen für Links festlegen
- Arbeiten mit Prototypen
- Prototyp-Review
- Arbeiten mit Design-Spezifikationen
- Freigeben von Design-Spezifikationen
- Auswerten von Design-Spezifikationen
- Navigation in Design-Spezifikationen
- Reviews und Kommentarfunktion zu Design-Spezifikationen
- Exportieren von Design-Assets
- Exportieren und Herunterladen von Assets aus Design-Spezifikationen
- Gruppenfreigabe für Unternehmen
- Sichern oder übertragen von XD Elementen
- Design-Systeme
- Cloud-Dokumente
- Integrationen und Plug-ins
- Arbeiten mit externen Elementen
- Arbeiten mit Design-Elementen aus Photoshop
- Kopieren und Einfügen von Elementen aus Photoshop
- Importieren oder Öffnen von Photoshop-Designs
- Arbeiten mit Illustrator-Elementen in Adobe XD
- Öffnen oder Importieren von Illustrator-Designs
- Vektordateien aus Illustrator nach XD kopieren
- Plug-ins für Adobe XD
- Erstellen und Verwalten von Plug-ins
- Jira-Integration für Adobe XD
- Slack-Plug-in für XD
- Zoom-Plug-in für XD
- Designs von XD aus auf Behance freigeben
- XD für iOS und Android
- Fehlerbehebung
- Bekannte und behobene Probleme
- Installation und Updates
- Absturz beim Programmstart
- Adobe XD stürzt ab, wenn es auf Windows 10 gestartet wird
- XD wird beendet, wenn Sie sich von Creative Cloud abmelden
- Problem mit dem Abonnementstatus unter Windows
- Warnung zu blockierter Applikation, wenn XD auf Windows gestartet wird
- Generierung von Absturzbildern auf Windows
- Sammlung und Freigabe von Absturzprotokollen
- Cloud-Dokumente sowie Creative Cloud-Bibliotheken.
- Erstellen und Veröffentlichen von Prototypen und Durchführen von Reviews
- Prototyp-Interaktionen können unter macOS Catalina nicht aufgezeichnet werden
- Probleme mit Arbeitsabläufen für die Veröffentlichung
- Veröffentlichte Links werden in Browsern nicht angezeigt
- Prototypen werden in Browsern nicht korrekt dargestellt
- Kommentarfeld wird plötzlich bei freigegebenen Links angezeigt
- Bibliotheken können nicht veröffentlicht werden
- Importieren, exportieren und Zusammenarbeit mit anderen Applikationen
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.
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.
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.
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
Sie können die Elemente frei bewegen oder die Werkzeuge zum Ausrichten der Stapelelemente entgegengesetzt zur Stapelrichtung verwenden.
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
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.
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.
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:
- 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.
- Wählen Sie im Stapel das Element aus, das Sie als Hintergrund verwenden möchten.
- 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 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.
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?
