Scrolling in Adobe XD

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.

Objekte können im Prototyp-Modus fixiert werden. Sie bleiben beim Scrollen stehen.

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.

In drei Schritten zum scrollbaren Bereich. 1. Objekte auswählen, 2. Scrolling aktivieren, 3. Scrollbereich feinjustieren

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 2 Kommentare

  1. Johanne
    schrieb am 12.09.2022 um 14:40 Uhr:

    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

    Antworten
    • Jonas Hellwig
      schrieb am 12.09.2022 um 18:38 Uhr:

      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.

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →