Um ein scrollbares Asset im Designtool Figma zu erstellen, gehen Sie folgendermaßen vor:
Schritt 1:Vorbereitung
- Öffnen Sie Figma und erstellen Sie ein neues Projekt oder öffnen Sie ein vorhandenes Projekt.
- Wählen Sie den Frame oder Container aus, in dem Sie das scrollbare Asset erstellen möchten.
Schritt 2:Legen Sie den scrollbaren Rahmen fest
- Klicken Sie in der linken Symbolleiste auf das Werkzeug „Rahmen“. Es ähnelt einem Quadrat mit vier nach außen zeigenden Pfeilen.
- Zeichnen Sie den Rahmen an der Stelle, an der der Bildlaufinhalt erscheinen soll. Stellen Sie sicher, dass die Höhe ausreichend ist, um den scrollbaren Inhalt aufzunehmen.
Schritt 3:Scrollbaren Inhalt hinzufügen
- Fügen Sie innerhalb des Rahmens die Elemente oder Objekte hinzu, die scrollbar sein sollen. Dies kann Text, Bilder, Formen oder jedes andere Designelement umfassen.
- Platzieren Sie die Elemente untereinander, um den Scroll-Effekt zu erzeugen.
Schritt 4:Scrollen aktivieren
- Wählen Sie den Rahmen aus, der den scrollbaren Inhalt enthält.
- Klicken Sie im rechten Bereich unter „Eigenschaften“ auf den Abschnitt „Einschränkungen“.
- Ändern Sie unter „Vertikales Layout“ die Option „Überlauf“ in „Scrollbar“ oder „Überlauf Y“.
- Dies ermöglicht das Scrollen innerhalb des Rahmens.
Schritt 5:Überlauf anpassen
- Abhängig von der Menge an Inhalten, die Sie haben, müssen Sie möglicherweise die Überlaufeinstellungen anpassen. Unter der Option „Überlauf“ können Sie „Überlauf“ wählen, wodurch der gesamte Inhalt angezeigt und bei Bedarf Bildlaufleisten hinzugefügt werden, oder „Inhalt ausschneiden“, wodurch alle Inhalte abgeschnitten werden, die nicht in den Rahmen passen.
Schritt 6:Prüfen und testen
- Ändern Sie die Größe des Rahmens oder des Browserfensters, um unterschiedliche Bildschirmgrößen zu simulieren und sicherzustellen, dass das Scrollen wie vorgesehen funktioniert.
- Passen Sie die Platzierung und Größe der Elemente an, um sicherzustellen, dass sie gut passen und Bildlaufleisten oder andere interaktive Komponenten nicht behindern.
Schritt 7:Vorschau und Prototyp
- Verwenden Sie den „Präsent“-Modus (Tastenkürzel:„P“) oder verbinden Sie Ihr Design mit einem Prototyp, um die Scroll-Funktionalität zu testen. Dadurch können Sie sehen, wie die Schriftrolle in einer realistischeren Umgebung funktioniert.
Schritt 8:Speichern und teilen
- Wenn Sie mit dem scrollbaren Asset zufrieden sind, speichern Sie Ihre Figma-Datei.
- Sie können das Design auch mit anderen teilen, es zur weiteren Entwicklung exportieren oder als Teil eines größeren Designsystems verwenden.
Denken Sie daran, dass Figma Responsive Design und Prototyping ermöglicht, sodass Sie das Layout und Verhalten Ihres scrollbaren Assets an unterschiedliche Gerätegrößen und Interaktionen anpassen können.
