Scroll- und Overflow-Verhalten bei Prototypen
Bevor du anfängst
Wer kann diese Funktion verwenden
Nutzer*innen in allen Teams und Abos können beim Scrollen in Prototypen das Overflow-Verhalten nutzen.
Nutzer*innen mit Schreibzugriff auf eine Datei können Prototypen erstellen und bearbeiten.
Das Scrollverhalten steuert, wie das Scrollen in Prototypen funktioniert. Das Scrollverhalten besteht aus dem Scroll-Overflow und der Scroll-Position.
- Der Scroll-Overflow legt fest, wie Benutzer*innen mit Inhalten interagieren können, die über die Abmessungen eines Rahmens hinausgehen.
- Die Scroll-Position legt fest, wie sich die Ebenen auf dem Rahmen verhalten, wenn Nutzer*innen daran vorbeiscrollen.
Nutze das Scroll-Verhalten, um Prototypen zu erstellen, die interaktive Benutzererfahrungen nachbilden.
- Auf langen Seiten auf- und abscrollen.
- Von links nach rechts scrollen, um verschiedene Elemente mit einem Schieberegler anzuzeigen
- In alle Richtungen schwenken oder scrollen, wie z. B. 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
Die Interaktionen in Prototypen sollen sich möglichst real anfühlen. Bei einigen Interaktionen müssen wir die Illusion erzeugen, dass unsere Designs wirklich dynamisch sind.
Mit der Option Preserve scroll position (Scroll-Position beibehalten) kannst du beim Wechsel zwischen zwei Bildschirmen die gleiche Scroll-Position beibehalten. Dies gilt sowohl für die Scroll-Tiefe beim vertikalen Scrollen als auch für die Position bei einem horizontal scrollendem Element.
Hier erfährst du mehr über das Beibehalten der Scroll-Position →
Scroll-Overflow
Overflow-Verhalten
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 verschachtelt sind.
Um das Overflow-Verhalten anzuwenden, muss der Rahmen über Inhalte verfügen, die über seine Grenzen hinausgehen. Wenn du die Grenzen des Rahmens so änderst, dass der gesamte Inhalt in den Rahmen passt, wird der Bereich regulär gescrollt.
Figma unterstützt 4 verschiedene Overflow-Verhalten: kein Scrollen, vertikal, horizontal und beide Richtungen.
„Kein Scrollen“ verhindert, dass Benutzer innerhalb eines Rahmens nach oben und unten scrollen können. Inhalte, die über die Grenzen des Rahmens hinausgehen, können nicht angezeigt werden.
Beim vertikalen Scrollen können Nutzer*innen innerhalb eines Rahmens nach oben und unten wischen oder scrollen. Nutze dieses Verhalten, um das Scrollen auf einer langen Website oder einer Inhaltsseite in einer App nachzuahmen.
Beim horizontalen Scrollen können Benutzer in einem Rahmens 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.
Durch horizontales und vertikales Scrollen können Nutzer*innen innerhalb eines Rahmens in alle vier Richtungen navigieren: nach links, rechts, oben oder unten. Verwende dieses Verhalten beispielsweise zum Scrollen in Karten oder vergrößert angezeigten Bildern.
Overflow-Verhalten anwenden
Um das Overflow-Verhalten auf einen Rahmen anzuwenden, müssen untergeordnete Objekte vorhanden sein, die über ihre Grenzen hinausgehen. Du kannst pro Rahmen nur ein Overflow-Verhalten anwenden.
Die folgenden Schritte gelten auch für Komponenten. Wähle die Instanz in der Arbeitsfläche aus, klicke in der rechten Seitenleiste auf Go to main Component (Gehe zu Hauptkomponente) und passe dann die Grenzen der ursprünglichen Komponente an.
- Wähle in der Arbeitsfläche den Rahmen aus.
- Öffne den Prototyp-Tab in der rechten Seitenleiste.
- Wähle im Bereich Scroll behavior (Scroll-Verhalten) das Dropdown-Menü Overflow. Wähle eine der folgenden Optionen:
- No scrolling (Kein Scrollen)
- Horizontal
- Vertical (Vertikal)
- Both directions (Beide Richtungen)
- Klicke auf das vorhandene Symbol, um den Prototyp in der Präsentationsansicht anzuzeigen und dir das Ergebnis anzusehen.
Rahmengrenzen anpassen
Wenn kein Inhalt über den Rahmen hinausgeht, wird eine Fehlermeldung angezeigt, wenn du versuchst, das Overflow-Verhalten anzuwenden. Passe die Rahmengrenzen an, um das Overflow-Verhalten anzuwenden.
- Wähle den gewünschten Rahmen aus.
- Öffne in der rechten Seitenleiste den Design-Tab.
- Hover mit dem Mauszeiger in der Arbeitsfläche über der Grenze des Rahmens, bis der Cursor angezeigt wird.
- Ziehe den Begrenzungsrahmen, um die Größe des Rahmens zu ändern.
- Wenn du Inhalte ausblenden möchtest, die über den Rahmen hinausgehen, aktiviere das Kontrollkästchen neben Clip content (Inhalt abschneiden).
- Mac: ⌘ Command
- Windows: Strg
Scroll-Position
Du kannst das Scroll-Position-Verhalten auf jede Ebene innerhalb eines Rahmens anwenden. Jedes Objekt innerhalb eines Rahmens kann seine eigene Scroll-Position haben.
Figma unterstützt drei Arten von Scroll-Positionen: mit übergeordnetem Element scrollen, fixiert und haftend.
Positionen
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.
Fixierte Objekte bewegen sich nicht, auch wenn du nach oben oder unten scrollst. So kannst du die Position eines Objekts fixieren und sicherstellen, dass es an der gleichen Stelle bleibt. Verwende feste Ebenen, um eine Statusleiste am oberen Bildschirmrand des Geräts oder ein Menü am unteren Rand eines Rahmens zu fixieren.
Du kannst Objekten in einem Rahmen mit Auto-Layout keine fixierte Scroll-Position zuweisen.
Wenn du ein fixiertes Objekt erstellst, ordnet Figma diese Ebenen über den anderen Ebenen in deinem Design an und kennzeichnet sie in deinem Ebenen-Tab als Fixed (fixiert). Es ist nicht möglich, scrollende Objekte über fixierten Ebenen zu positionieren.
Angeheftete Objekte scrollen zunächst innerhalb des übergeordneten Rahmens, werden aber fixiert, sobald die Oberkante des Objekts den oberen Rand des Rahmens erreicht. (Wenn du wieder nach oben scrollst, löst sich das Objekt und bewegt sich im übergeordneten Rahmen nach unten.)
Mit der haftenden Scroll-Position kannst du Navigationsmenüs oder anliegende Kopfzeilen gestalten.
Haftende Objekte gelten nur für den vertikalen Bildlauf. Um einem Objekt eine haftende Scroll-Position zuzuweisen, muss das Overflow-Verhalten des übergeordneten Rahmens des Objekts auf vertikal eingestellt sein. Du kannst ein Objekt nicht an der unteren, linken oder rechten Seite eines Rahmens anheften.
Hinweis: Im Ebenen-Tab kannst du sehen, wie haftende Objekte in deinem Prototyp vertikal angeordnet werden. Ebenen unter haftenden Objekten scrollen hinter den haftenden Objekten, während Ebenen über haftenden Objekten vor ihnen scrollen.
Scroll-Position auf eine Ebene anwenden
Scroll-Positionen werden auf einzelne Ebenen innerhalb eines Rahmens angewendet. Du kannst auf jedes Objekt nur eine Scroll-Position anwenden.
- Wähle in der Arbeitsfläche das Objekt, die Gruppe oder die Komponente aus.
- Öffne den Fensterbereich Prototype (Prototyp) in der rechten Seitenleiste.
- Wähle im Abschnitt Scroll-Verhalten das Dropdown-Menü Position aus. Wähle dann eine der folgenden Optionen:
- Scroll with parent (Mit übergeordnetem Element scrollen)
- Fixed (Fixiert)
- Sticky (Haftend)
- Klicke auf das Präsentieren-Symbol, um den Prototyp in der Präsentationsansicht anzuzeigen und die Ergebnisse zu sehen.
