Um Ihren Inhalt in Figma scrollbar zu machen, müssen Sie durch die Seitenregisterkarte navigieren. Leider wird diese nicht automatisch auf der Hauptbenutzeroberfläche angezeigt. Scrollbare Inhalte sind nützlich, wenn Sie viele Informationen innerhalb eines Rahmens Ihres Designs präsentieren möchten. Einige Beispiele sind Zielseiten, App-Oberflächen oder Popup-Fenster.
In diesem Artikel wird erklärt, wie Sie Ihre Figma-Designs scrollbar machen.
Einpassen eines scrollbaren Textes in eine Form
Beginnen wir mit der Erstellung eines scrollbaren Textes innerhalb einer einfachen Form. Dies ist das häufigste Beispiel für scrollbaren Text. Sie können später weitere Eigenschaften wie Farbe, Schriftart und Umrisse hinzufügen.
So gehts:
- Erstellen Sie eine Grundform. Für dieses Beispiel empfehlen wir, ein vertikales Rechteck zu erstellen. Sie können dies tun, indem Sie das Rechteck-Werkzeug in der linken Seitenleiste auswählen oder den Befehl „R“ verwenden. Halten Sie die linke Maustaste gedrückt, klicken Sie auf einen Punkt auf der Leinwand und zeichnen Sie die Form.
- Setzen Sie in der rechten Seitenleiste unter der Registerkarte „Design“ ein Häkchen neben der Option „Clip-Inhalt“.
- Wählen Sie das Textwerkzeug aus, um ein Textfeld zu erstellen, und platzieren Sie es innerhalb des scrollbaren Rahmens. Geben Sie den gewünschten Inhalt ein oder kopieren Sie ihn.
- Wählen Sie den Rahmen aus und gehen Sie zur Registerkarte „Prototyp“ auf der rechten Seite Ihrer Benutzeroberfläche. Wählen Sie dann die Option „Überlauf-Scrollen“ und den gewünschten Stil. Hier wählen wir „vertikales Scrollen“.
Wenn Sie auf der Registerkarte „Prototyp“ auf die Option „Überlauf-Scrollen“ klicken, werden Ihnen mehrere Stile angezeigt. Wir wählen den vertikalen Stil, da wir als Beispiel ein vertikales Rechteck verwenden. So können Sie den Text von oben nach unten lesen. Zu den weiteren Stilen gehören:
- Horizontales Scrollen – Benutzer können ihren Text in einigen Beispielen von links nach rechts scrollen lassen. Diese Option ist vorzuziehen, wenn Sie Designs im Querformat erstellen.
- Kein Scrollen – Wenn Sie Ihren Inhalt an einer Stelle fixieren möchten, wählen Sie die Option „Kein Scrollen“.
- Beide Richtungen – Erstellen Sie ein Design mit viel Inhalt und scrollen Sie sowohl vertikal als auch horizontal.
Sie sollten in Ihrem Design scrollbare Funktionen verwenden, um den Aufwand (Klicks) Ihres Lesers bei der Interaktion mit dem Inhalt zu minimieren. Sie können wischen oder das Mausrad verwenden, anstatt sich durch Unmengen von Text klicken oder tippen zu müssen.
So entwerfen Sie scrollbare Komponenten
Abhängig von Ihrem Produkt müssen Sie Ihren Inhaltsrahmen und den Inhalt selbst entwerfen. Der Prozess umfasst das Hinzufügen von Farben, Schriftarten und möglicherweise anderen Komponenten zum Gesamtdesign. Das Ändern dieser Elemente ist einfach, aber die Auswahl der richtigen Ästhetik erfordert sorgfältige Überlegung.
So ändern Sie die Schriftart Ihres scrollbaren Designs
Als Erstes müssen Sie die Schriftart Ihres scrollbaren Designs ändern. Figma bietet eine große Auswahl an Stilen. Hier ist die einfachste Methode:
- Wählen Sie in Ihrem scrollbaren Rahmen den Inhalt aus, den Sie ändern möchten.
- Navigieren Sie zum Dropdown-Menü oben links und wählen Sie es aus.
- Blättern Sie durch die Schriftarten, bis Sie die gewünschte finden.
Wenn die Marke, für die Sie designen, eine bestimmte Typografie hat, werden Sie wahrscheinlich dieselbe wählen, damit sie mit dem Markenimage übereinstimmt. Wenn Sie mehr Spielraum haben, sollten Sie mit verschiedenen Beispielen experimentieren, bevor Sie das richtige auswählen.
Einige Überlegungen umfassen:
- Designabsicht – Die Wahl der Typografie sollte der Absicht Ihres Designs entsprechen. Wenn Sie viele Informationen klar vermitteln möchten, sollten Sie weniger dekorative, aber dennoch elegante Schriftarten wählen.
- Andere Komponenten – Ihre Schriftart ist ein visuelles Element wie jedes andere in Ihrem Design. Sie sollte zum Rahmen und den anderen Komponenten passen, die Sie einbinden.
- Allgemeine Ästhetik und Branding – Das allgemeine Erscheinungsbild der Marke sollte auch Ihre gewählte Schriftart beeinflussen. Beispielsweise wird ein Blumenlieferdienst nicht dieselbe Schriftart verwenden wie eine SAAS-Landingpage.
Die Auswahl der richtigen Schriftart kann einige Experimente erfordern, einige konkrete Schriftartbeispiele sind jedoch die zuverlässigsten Optionen:
- Roboto – Wer auf Nummer sicher gehen will, greift zu Roboto. Sie gilt als vielseitige und neutrale Schriftart mit vielen Einsatzmöglichkeiten. Da sie so leicht verständlich ist, wählen viele Roboto für Anleitungen und Landingpages.
- Poppins – Für eine freundliche, aber dennoch moderne und klare Anmutung wählen Sie Poppins. Diese Schriftart ist runder und macht den Text attraktiv und leicht lesbar.
- Raleway – Wenn Sie für eine anspruchsvolle Luxusmarke entwerfen, sollten Sie Raleway in Betracht ziehen. Es ist im Allgemeinen dünn, hat aber unterschiedliche Gewichtsvariationen und ein insgesamt elegantes Aussehen.
- Lato – Freundlich, zuverlässig und seriös sind die richtigen Worte, um diese Schriftart zu beschreiben. Designer können Lato für Überschriften und Absatztexte verwenden, bei denen Lesbarkeit und Klarheit im Vordergrund stehen.
Sie sollten auch die gewählte Schriftgröße und den Textstil berücksichtigen. Im Allgemeinen wird Fettdruck für Überschriften oder hervorgehobene Abschnitte verwendet, während Kursivdruck für Zitate verwendet wird.
Ändern der Farbe der Rahmenform
Neben der Änderung der Schriftart möchten Sie auch die Farbe Ihrer Rahmenform ändern. Auch hier hängt der genaue Farbton von der Marke ab, für die Sie entwerfen, oder von Ihrem ästhetischen Empfinden. Glücklicherweise erleichtert die Benutzeroberfläche von Figma die Farbauswahl.
So können Sie Ihre Rahmenfarben ändern:
- Wählen Sie den Rahmen aus, den Sie bearbeiten möchten.
- Die Ebene wird in der rechten Seitenleiste angezeigt. Navigieren Sie zum Abschnitt „Füllen“.
- Wählen Sie „+“, um eine Füllung hinzuzufügen.
- Ein Farbauswahlfenster wird geöffnet. Wählen Sie die Füllfarbe und den Farbverlauf aus. Sie können auch einen Hex-Code eingeben, wenn Sie den genauen Farbton kennen.
Wie bei anderen Designelementen müssen Sie möglicherweise mit verschiedenen Farben experimentieren und sehen, wie diese mit der von Ihnen gewählten Schriftart aussehen.
FAQS
Gibt es in Figma einen Befehl zum Scrollen von Text?
Leider gibt es in Figma keinen Befehl, um einen Text scrollbar zu machen. Mit der oben genannten Methode können Sie den Vorgang jedoch mit nur wenigen Klicks abschließen.
Wie entscheide ich, welche Überlaufoption ich möchte?
Das hängt von der Art des verwendeten Textes, dem Gesamtdesign und seiner Funktion ab. Der vertikale Stil eignet sich normalerweise gut zum Überfliegen großer Texte.
Welche Geräteschnittstelle benötigt normalerweise ein scrollbares Textdesign?
Ein gutes Beispiel wären Design-Modelle für eine App. Benutzer können ein Telefon als allgemeinen Rahmen erstellen, während der scrollbare Text die Benutzeroberfläche der App sein kann.
Ist Figma die beste Wahl für die Erstellung scrollbarer Designs?
Figma ist eines der besten Tools zum Erstellen einer Vielzahl von Formularen, einschließlich scrollbarer Designs. Und noch besser: Figma ist kostenlos. Sie haben jedoch möglicherweise bestimmte persönliche Vorlieben. Experimentieren Sie mit einigen Plattformen, beispielsweise Adobe Illustrator, bis Sie das für Sie am besten geeignete Tool gefunden haben.
Machen Sie Ihre Designs scrollbar und benutzerfreundlich
Das Erstellen von Text innerhalb eines Rahmens in Figma ist einfach. Wählen Sie einfach den Rahmen aus und wechseln Sie dann zur Option „Clip-Inhalt“. Sobald Sie fertig sind, können Sie Ihre Overflow-Scrolling-Optionen auswählen. Ebenso sollten Sie andere wichtige Designelemente wie die Farbe und Form des Rahmens und die Textschriftart nicht vernachlässigen. Wenn Sie Ihr Design scrollbar gestalten, ist dies eine ausgezeichnete Wahl für Zielseiten, App-Oberflächen und Popup-Fenster. So können Texte leichter überflogen werden, anstatt angeklickt zu werden, was letztendlich das Benutzererlebnis verbessert.
Konnten Sie Ihren Inhalt in Figma problemlos scrollbar gestalten? Und wie sieht es mit der Auswahl der richtigen Schriftart aus? Lassen Sie es uns unten im Kommentarbereich wissen.
