Scroll- und Overflow-Verhalten bei Prototypen

Lege fest, wie Scrollen und Bewegen in deinen Prototypen funktioniert, um Interaktionen von Nutzer*innen nachzubilden, beispielsweise:

• Auf einer langen Inhaltsseite nach oben und unten scrollen
• Nach links und rechts scrollen, um verschiedene Elemente in einem Schieberegler anzuzeigen
• In jede Richtung schwenken oder scrollen, wie in einer interaktiven Karte
• Objekte wie Navigationsleisten und Menüs beim Scrollen an einer Position auf der Seite fixieren
• „Angeheftete Objekte“ erstellen, die am oberen Rand des Rahmens bleiben, wenn man an ihnen vorbeiscrollt

Um Scrollen in deinen Figma-Prototypen zu verwenden, musst du:

1. Rahmen für das Scrollen vorbereiten: Stelle sicher, dass der Inhalt über die Abmessungen des Rahmens hinausgeht.
2. Scroll-Overflow auf Rahmen anwenden: Definiere, ob dein Rahmen vertikal, horizontal, beides oder gar nicht scrollt.
3. Scroll-Position auf die Objekte innerhalb des Rahmens anwenden: Definiere, wie sich Objekte in deinem Rahmen verhalten, wenn du daran vorbeiscrollst. Sie können mit dem übergeordneten Rahmen scrollen, an einer festen Position bleiben oder oben im übergeordneten Rahmen verbleiben.

Sobald du das Scrollen eingerichtet hast, kannst du auch Scroll-Position beibehalten oder zurücksetzen beim Navigieren zwischen mehreren Rahmen in Erwägung ziehen.

Rahmen für das Scrollen vorbereiten

Um einem Rahmen ein Scrollverhalten hinzuzufügen, muss der Rahmen einen Inhalt aufweisen, der über die Grenzen des Rahmens hinausgeht.

Stelle dir das vor wie eine Webseite: Wenn du auf deinem Smartphone surfst, kannst du nur den Inhalt sehen, der auf die Abmessungen deines Bildschirms passt. Es gibt jedoch „versteckte“ Inhalte, die über das hinausgehen, was du auf deinem Bildschirm siehst, und die du nur durch Scrollen sehen kannst.

Inhalt über die Rahmen-Abmessungen hinaus erweitern

So änderst du die Größe eines Rahmens:

1. Wähle den gewünschten Rahmen aus.
2. Öffne den Design-Tab in der rechten Seitenleiste.
3. Bewege den Mauszeiger über den Rand des Rahmens, bis der Cursor angezeigt wird.
4. Ziehe den Begrenzungsrahmen, um die Größe des Rahmens zu ändern.

Um sicherzustellen, dass sich jedes Objekt noch innerhalb des ausgewählten Rahmens befindet, überprüfst du den Abschnitt Ebenen im linken Navigationsbereich. Untergeordnete Objekte werden unter dem übergeordneten Rahmen eingebettet.

Inhalte abschneiden

Du kannst jeden Inhalt, der über die Grenzen eines Rahmens hinausgeht, mit Inhalte abschneiden ausblenden.

1. Wähle den gewünschten Rahmen aus.
2. Öffne den Tab Design im rechten Eigenschaftenfenster.
3. Markiere im Abschnitt Layout das Kontrollkästchen neben Inhalte abschneiden.

Scroll-Overflow auf Rahmen anwenden

Der Scroll-Overflow legt fest, wie Benutzer*innen mit Inhalten interagieren können, die über die Abmessungen eines Rahmens hinausgehen.

Das Overflow-Verhalten kann nur auf Rahmen angewendet werden. Das gilt sowohl für Rahmen, die sich direkt auf der Arbeitsfläche befinden (Rahmen der obersten Ebene), als auch für Rahmen, die in anderen Rahmen oder Ebenen eingebettet sind.

So wendest du einen Scroll-Overflow auf einen Rahmen an:

1. Wähle einen Rahmen aus.
2. Öffne den Prototyping-Tab im rechten Eigenschaftenfenster.
3. Wähle im Abschnitt Scrollverhalten das Dropdown-Menü Overflow aus. Wähle aus Folgendem:
   • No scrolling (Kein Scrollen)
   • Horizontal
   • Vertical (Vertikal)
   • Both directions (Beide Richtungen)

Vertical (Vertikal)

Beim vertikalen Scrollen können Nutzer*innen nach oben und unten wischen oder scrollen. Nutze dieses Verhalten, um das Scrollen auf einer langen Website oder einer Inhaltsseite in einer App nachzuahmen.

Horizontal

Beim horizontalen Scrollen können Nutzer*innen nach links und rechts wischen oder scrollen, während die vertikale Position beibehalten wird. Hiermit kannst du beispielsweise Slider für Inhalte wie Produkte, Galerien und Bibliotheken erstellen.

No scrolling (Kein Scrollen)

„Kein Scrollen“ verhindert, dass Nutzer*innen in jede Richtung scrollen. Inhalte, die über die Grenzen des Rahmens hinausgehen, sind nicht sichtbar.

Both directions (Beide Richtungen)

Beide Richtungen (horizontal und vertikal) ermöglichen Nutzer*innen die Navigation in jede Richtung, beispielsweise beim Anzeigen einer Karte oder eines vergrößerten Bildes.

Scroll-Position auf Objekte innerhalb eines Rahmens anwenden

Die Scroll-Position legt fest, wie sich die Ebenen auf dem Rahmen verhalten, wenn Nutzer*innen daran vorbeiscrollen. Du kannst nur eine Scroll-Position auf jede Ebene anwenden.

1. Wähle ein Objekt, eine Gruppe oder eine Komponente aus. Das Objekt muss sich auf einem Rahmen befinden, auf den ein Scroll-Overflow angewendet wurde.
2. Öffne den Prototyping-Tab im rechten Eigenschaftenfenster.
3. Wähle im Abschnitt Scrollverhalten das Dropdown-Menü Position aus. Wähle aus Folgendem:
   • Scroll with parent (Mit übergeordnetem Element scrollen)
   • Fixed (Fixiert)
   • Sticky (Haftend)

Scroll with parent (Mit übergeordnetem Element scrollen)

Objekte, die mit dem übergeordneten Element scrollen, bewegen sich im Rahmen nach oben und unten, wenn du scrollst. Nutze dieses Verhalten, um das Verhalten beim Scrollen längerer Seiten nachzuahmen.

Fixed (Fixiert)

Fixierte Objekte bewegen sich nicht, auch wenn du nach oben oder unten scrollst. Nutze diese Option, um eine Statusleiste am oberen Bildschirmrand des Geräts oder ein Menü am unteren Rand eines Rahmens zu fixieren.

Du kannst keinem Objekt in einem Rahmen mit Auto-Layout eine feste Scroll-Position zuweisen, es sei denn, auf das Objekt wurde eine absolute Position angewendet.

Wenn du ein Objekt auf „Fixiert“ setzt, verschiebt Figma es über die anderen Ebenen im Rahmen und kennzeichnet sie im Abschnitt Ebenen des linken Navigationsbereichs als Fixiert. Es ist nicht möglich, Scrollobjekte über fixierte Ebenen zu positionieren.

Sticky (Haftend)

Wende eine Sticky-Scroll-Position auf jedes Objekt innerhalb eines Rahmens mit vertikalem Scrollen an.

Haftende Objekte scrollen zunächst, werden aber fixiert, sobald ihre Oberkante den oberen Rand ihres übergeordneten Rahmens erreicht. (Wenn du erneut nach oben scrollst, wird das Objekt gelöst und im übergeordneten Rahmen nach unten verschoben.)

Wenn das haftende Objekt innerhalb einer anderen Ebene in einem Rahmen eingebettet ist, bleibt es innerhalb der Grenzen der direkt übergeordneten Ebene. Das heißt, wenn die direkt übergeordnete Ebene aus dem Blickfeld gescrollt wird, scrollt das haftende Objekt mit seiner übergeordneten Ebene weiter.

Gehe zum Abschnitt Ebenen im linken Navigationsbereich, um zu erfahren, wie haftende Objekte beim Scrollen angeordnet werden. Alle Ebenen unter einem haftenden Objekt werden dahinter gescrollt. Alle Ebenen über einem haftenden Objekt werden davor gescrollt. Um die Reihenfolge zu ändern, in der deine Objekte beim haftenden Scrollen angeordnet werden, änderst du die Reihenfolge im Tab Ebenen.

Scroll-Position beibehalten und zurücksetzen

Wenn dein Prototyp mehrere Seiten oder Bildschirme enthält, kannst du die Scroll-Position beibehalten oder zwischen den Rahmen zurücksetzen.

• Scroll-Position beibehalten: Behalte die Scroll-Position des/der Nutzer*in bei, wenn er/sie zwischen Rahmen wechselt.
• Scroll-Position zurücksetzen: Setze die Scroll-Position des/der Nutzer*in zurück, wenn er/sie zwischen Rahmen wechselt.

Erfahre mehr darüber , wie du die Scrollposition in Prototypen beibehalten oder zurücksetzen kannst →