So erstellen Sie ein scrollbares Asset in Figma

Um Ihren Inhalt in Figma scrollbar zu machen, müssen Sie auf der Seitenregisterkarte navigieren. Leider erscheint es nicht automatisch auf der Hauptbenutzeroberfläche. Scrollbare Inhalte sind nützlich, wenn Sie viele Informationen innerhalb eines Rahmens Ihres Designs präsentieren möchten. Einige Beispiele sind Landingpages, App-Oberflächen oder Popup-Fenster.

In diesem Artikel wird erklärt, wie Sie Ihre Figma-Designs scrollbar machen.

Anpassen eines scrollbaren Textes in eine Form

Beginnen wir damit, einen scrollbaren Text in einer einfachen Form zu erstellen. Dies ist das häufigste Beispiel für scrollbaren Text. Sie können anschließend weitere Eigenschaften wie Farbe, Schriftarten und Konturen hinzufügen.

So wird es gemacht:

1. Erstellen Sie eine Grundform. Für dieses Beispiel empfehlen wir die Erstellung eines vertikalen Rechtecks. 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 Leinwandpunkt und zeichnen Sie die Form.

   

2. Setzen Sie in der rechten Seitenleiste unter der Registerkarte „Design“ ein Häkchen bei der Option „Clip-Inhalt“.

   

3. Wählen Sie das Textwerkzeug aus, um ein Textfeld zu erstellen, und platzieren Sie es im scrollbaren Rahmen. Geben Sie alle von Ihnen verwendeten Inhalte ein oder kopieren Sie sie und fügen Sie sie ein.

   

4. Wählen Sie den Frame 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“.

   

Sobald Sie auf der Registerkarte „Prototyp“ auf die Überlauf-Bildlaufoption klicken, stehen Ihnen mehrere Stile zur Verfügung. Wir wählen die vertikale Variante, da wir als Beispiel ein vertikales Rechteck verwenden. Dadurch können Sie den Text von oben nach unten durchlesen. Zu den anderen Stilen gehören:

• Horizontales Scrollen – In einigen Beispielen können Benutzer ihren Text von links nach rechts scrollen lassen. Diese Option ist vorzuziehen, wenn Sie Designs im Landschaftsformat erstellen.
• Kein Scrollen – Wenn Sie Ihre Inhalte fixieren möchten, wählen Sie die Option „Kein Scrollen“.
• In 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) zu minimieren, den Ihr Leser bei der Interaktion mit dem Inhalt benötigt. Sie können wischen oder das Mausrad verwenden, anstatt durch Unmengen von Text zu klicken oder zu tippen.

So entwerfen Sie Ihre scrollbaren 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 Ihnen eine große Auswahl an Stilen. Hier ist die einfachste Methode:

1. Wählen Sie in Ihrem scrollbaren Rahmen den Inhalt aus, den Sie ändern möchten.

   

2. Navigieren Sie zum Dropdown-Menü oben links und wählen Sie es aus.

   

3. Scrollen Sie durch die Schriftarten, bis Sie die Schriftart gefunden haben, die Sie verwenden möchten.

   

Wenn die Marke, für die Sie entwerfen, eine bestimmte Typografie hat, werden Sie wahrscheinlich dieselbe Typografie wählen, damit sie mit dem Markenimage übereinstimmt. Wenn Sie mehr Spielraum haben, sollten Sie mit verschiedenen Beispielen experimentieren, bevor Sie sich für das richtige entscheiden.

Einige Überlegungen umfassen:

• Designabsicht – Die Auswahl einer Typografie sollte mit der Absicht Ihres Designs übereinstimmen. Wenn Sie viele Informationen klar vermitteln möchten, greifen Sie zu weniger dekorativen, aber dennoch eleganten Schriftarten.
• Andere Komponenten – Ihre Schriftart ist ein visuelles Element wie jedes andere in Ihrem Design. Es sollte zum Rahmen und den anderen Komponenten passen, die Sie einbauen.
• Gesamtästhetik und Branding – Das allgemeine Gefühl der Marke sollte auch die von Ihnen gewählte Schriftart beeinflussen. Beispielsweise verfügt ein Blumenlieferdienst nicht über dieselbe Schriftart wie eine SAAS-Landingpage.

Während die Auswahl der richtigen Schriftart möglicherweise einige Experimente erfordert, sind einige konkrete Schriftartbeispiele die zuverlässigsten Optionen:

• Roboto – Wenn Sie auf Nummer sicher gehen wollen, dann nutzen Sie Roboto. Sie gilt als vielseitige und neutrale Schriftart mit vielen Anwendungsmöglichkeiten. Da es so einfach zu verstehen ist, entscheiden sich viele für Roboto, wenn es um Anleitungen und Landingpages geht.
• Poppins – Für eine freundliche, aber dennoch moderne und klare Atmosphäre 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, weist aber verschiedene Gewichtsvarianten auf und wirkt insgesamt elegant.
• 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 von Ihnen gewählte Schriftgröße und den Textstil berücksichtigen. Im Allgemeinen wird Fett für Überschriften oder die Hervorhebung von Segmenten verwendet, während Kursivschrift 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 Ihrer Ästhetik. Glücklicherweise erleichtert die Benutzeroberfläche von Figma die Auswahl einer Farbe.

So können Sie Ihre Rahmenfarben ändern:

1. Wählen Sie den Rahmen aus, den Sie bearbeiten möchten.

   

2. Die Ebene wird in der rechten Seitenleiste angezeigt. Navigieren Sie zum Abschnitt „Ausfüllen“.

   

3. Wählen Sie das „+“, um eine Füllung hinzuzufügen.

   

4. Es öffnet sich ein Farbauswahlfenster. 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 und deren Aussehen in der von Ihnen gewählten Schriftart experimentieren.

Häufig gestellte Fragen

Gibt es in Figma einen scrollbaren Textbefehl?

Leider gibt es in Figma keinen Befehl, 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-Mock-ups für eine App. Benutzer können ein Telefon als allgemeinen Rahmen erstellen, während der scrollbare Text die Benutzeroberfläche der App darstellen kann.

Ist Figma die beste Wahl für die Erstellung scrollbarer Designs?

Figma ist eines der besten Tools zum Erstellen einer Vielzahl von Formen, einschließlich scrollbarer Designs. Besser noch: Figma ist kostenlos. Möglicherweise haben Sie jedoch bestimmte persönliche Vorlieben. Versuchen Sie, mit einigen Plattformen wie Adobe Illustrator zu experimentieren, bis Sie das für Sie am besten geeignete Tool gefunden haben.

Machen Sie Ihre Designs scrollbar und benutzerfreundlich

Es ist einfach, in Figma beliebigen Text innerhalb eines Rahmens zu erstellen. Wählen Sie einfach den Frame aus und wechseln Sie dann zur Option „Clip-Inhalt“. Sobald Sie fertig sind, können Sie Ihre Überlauf-Bildlaufoptionen auswählen. Ebenso sollten Sie andere wichtige Gestaltungselemente wie die Rahmenfarbe und -form sowie die Schriftart des Textes nicht vernachlässigen. Die Möglichkeit, Ihr Design scrollbar zu machen, ist eine ausgezeichnete Wahl für Landingpages, App-Oberflächen und Popup-Fenster. Dadurch ist es einfacher, Texte zu überfliegen statt anzuklicken, was letztlich das Benutzererlebnis steigert.

Fanden Sie es einfach, Ihre Inhalte in Figma scrollbar zu machen? Wie wäre es mit der Auswahl der richtigen Schriftart? Lassen Sie es uns im Kommentarbereich unten wissen.