Scrolling in Adobe XD
Von: Jonas In Adobe XD können ganze Layouts oder Teile davon scrollbar gestaltet werden. Ihr erreicht somit durch minimalen Aufwand ein sehr anschauliches und realistisches Ergebnis.
Zeichenflächen (Viewport) scrollbar machen
Die Abmessungen von Zeichenflächen können höher werden als der sichtbare Bereich (Viewport) der Zeichenfläche. Ist das der Fall, kann im Vorschau-Modus gescrolled werden. Dafür muss in den Einstellungen der Zeichenfläche das vertikale Scrollen erlaubt werden, sofern es sich nicht automatisch eingeschaltet hat.
Elemente beim Scrollen im Viewport fixieren
Wenn Elemente beim Scrollen fixiert werden sollen, markiert das entsprechende Objekt und setzt den Haken »feste Position« in den Eigenschaften. Die Eigenschaft ist sowohl im Bereich »Prototyping« als auch unter »Design« zu finden.
Scrollbare Bereiche auf einer Zeichenfläche realisieren
Wenn nur ein bestimmter Bereich im Layout scrollbar sein soll, muss zunächst eine Auswahl von Objekten getroffen werden, die gescrollt werden sollen. Rechts im Inspektor kann anschließend das vertikale, das horizontale oder das vertikale und horizontale Scrolling aktiviert werden. Über die blauen Markierungen kann der Bereich eingestellt werden, in dem die gescrollten Inhalte sichtbar werden.
Hi!
Ich bin schon lange auf der Suche nach einer Lösung für mein Scroll-Problem.
Ich möchte ganz einfach die GESAMTE Seite horizontal scrollbar machen, nicht nur Teile oder bestimmte Bereiche.
Man kann ja in Adobe XD direkt bei den Maßen der Zeichenfläche auch angeben, ob ein vertikaler Bildlauf möglich sein soll. Aber es ist eben dort nur die Wahl zwischen „Kein“ oder „Vertikal“ für den Bildlauf.
Mit scrollbaren Gruppen habe ich das Problem, dass meine Interaktionen und Animationen, die ich im Laufe der Website (die nach rechts und links scrollbar sein soll, nicht nach oben und unten) anlege, sich verschieben oder einfach ausgeblendet sind sobald ich einen Bildlauf-Rahmen dafür erstelle.
Habt ihr eine Lösung dafür? Ich habe schon so viele Videos und Foren durchsucht, aber niemand scheint daran interessiert zu sein einen Protoypen für eine horizontale Website zu bauen.
Genau das ist aber eben mein Programm-Limit: ich kann Webflow oder Coden nicht nutzen sondern muss mich auf Adobe XD bzw. Figma beschränken.
Vielen Dank,
Johanne
Hallo Johanne, es gibt in XD kein horizontales Scrollen des Viewports – nur Scrollgruppen oder Animationen per Drag (Ziehen). Ich würde in deinem Fall auch eine horizontale Scrolling-Gruppe um alles herum anlegen. Aber das scheinst du ja bereits probiert zu haben. Was genau an Animationen und Interaktionen dann kaputt geht, kann ich leider nicht nachvollziehen. Aber es wundert mich etwas. Je sauberer du mit Komponenten arbeitest, desto besser müsste es eigtl. funktionieren. Ich würde daher auch einmal versuchen den gesamten Inhalt ebenfalls in eine Komponente umzuwandeln.
Die Frage ist auch, ob du den Prototypen nur präsentieren möchtest (z.B. per Video) oder ob er wirklich benutzbar sein soll. Wenn du nur eine Präsentation brauchst, hilft es ggf. auch das Scrollen mit zeitgesteuerten Auto-Animationen zu simulieren. Mehr ist aus der Ferne leider schwer zu sagen.