How to Make a Scrollable Asset in Figma

Lee Stanton September 1, 2023

Making your content scrollable in Figma involves navigating the side tab. Unfortunately, it doesn’t automatically appear on the main user interface. Scrollable content is useful when you want to present lots of information within a frame of your design. Some examples include landing pages, app interfaces, or pop-up windows.

This article will explain how to make your Figma designs scrollable.

Fitting a Scrollable Text Within a Shape

Let’s begin by making a scrollable text within a simple shape. This is the most common example of scrollable text, and you can add other proprieties like color, fonts, and outlines afterward.

Here’s how it’s done:

Create a basic shape. For this example, we recommend making a vertical rectangle. You can do so by selecting the rectangle tool on the left sidebar or using the “R” command. Hold left, click on a canvas point, and draw the shape.
On the right sidebar, under the design tab, put a check next to the “clip content” option.
Select the text tool to create a text box and place it within the scrollable frame. Type or copy-paste any content you’re using.
Select the frame and go to the prototype tab on the right side of your interface. Then, select the “overflow scrolling” option and the style you prefer. Here we’ll choose “vertical scrolling.”

Once you click on the overflow scrolling option on the prototype tab, there are multiple styles. We choose the vertical one since we’re using a vertical rectangle as an example. This lets you read through the text from top to bottom. Some of the other styles include:

Horizontal scrolling – Users can make their text scroll from left to right in some examples. This option is preferable if you’re creating designs in a landscaping format.
No scrolling – If you want to lock your content in place, choose the no scrolling option.
Both directions – Create a design with lots of content and scroll both vertically and horizontally.

You should use scrollable features within your design to minimize the effort (clicks) your reader uses while interacting with the content. They can swipe or use the mouse wheel instead of clicking or tapping through tons of text.

How to Design Your Scrollable Components

Depending on your product, you’ll need to design your content frame and the content itself. The process involves adding color, fonts, and potentially other components to the overall design. Changing these elements is easy, but selecting the right aesthetic requires careful consideration.

How to Change the Font of Your Scrollable Design

The first thing you’ll need to do is change the font on your scrollable design. Figma offers a wide range of styles for you to choose from. Here’s the simplest method:

Select the content in your scrollable frame that you want to change.
Navigate to the drop-down menu located at the top left and select it.
Scroll through the fonts until you find the one you want to use.

If the brand you’re designing for has a particular typography, you’ll likely choose the same one so it’s consistent with the brand image. If you have more wiggle room, you should experiment with different examples before choosing the right one.

Some considerations include:

Design intent – Choosing a typography should match your design’s intent. If you want to convey lots of information clearly, aim for less decorative yet elegant fonts.
Other components – Your font is a visual element like any other in your design. It should match the frame and other components you include.
Overall aesthetic and branding – The general feel of the brand should also influence your chosen font. For example, a flower delivery service won’t feature the same font as a SAAS landing page.

While choosing the correct font might require some experimentation, some concrete font examples are the most reliable options:

Roboto – If you want to play it safe, then use Roboto. It’s considered a versatile and neutral font with many applications. Since it’s so easy to understand, many choose Roboto for instructions and landing pages.
Poppins – For a friendly yet modern and clean appeal, choose Poppins. This font is more rounded and makes the text attractive and easy-to-read.
Raleway – When designing for a sophisticated luxury brand, you might want to consider Raleway. It’s generally thin but has different weight variations and an overall elegant look.
Lato – Friendly, reliable, and serious are the right words to describe this font. Designers can use Lato for headings and paragraph texts where readability and clarity are prime concerns.

You’ll also want to consider your chosen font size and text style. Generally, bold is used for headlines or emphasizing segments, while italics are used for quotes.

Changing the Frame Shape’s Color

Besides changing the font, you’ll also want to change your frame shape’s color. Once again, the exact hue will depend on the brand you’re designing for or your aesthetics. Fortunately, Figma’s interface makes selecting a color easy.

Here’s how you can change your frame colors:

Select the frame you wish to edit.
The layer will appear on the right sidebar. Navigate to the “fill” section.
Select the “+” to add a fill.
A color picker window will open. Select the fill color and gradient. You can also type in a hex code if you know the exact hue.

As with other design elements, you may need to experiment with different colors and how they look with your chosen font.

FAQS

Is there a scrollable text command in Figma?

Unfortunately, there’s no command to make a text scrollable within Figma. However, you can complete the process in just a few clicks using the abovementioned method.

How do I decide which overflow option I want?

That depends on the type of text you’re using, the overall design, and its function. The vertical style is usually good for skimming through large texts.

What device interface will usually need a scrollable text design?

A good example would be design mock-ups for an app. Users can create a phone as the general frame, while the scrollable text can be the app’s interface.

Is Figma the best choice for making scrollable designs?

Figma is one of the best tools for making a wide range of forms, including scrollable designs. Better still, Figma is free. However, you might have certain personal preferences. Try experimenting with a few platforms, such as Adobe Illustrator, until you find the tool best suited to you.

Make Your Designs Scrollable and User-Friendly

Making any text within a frame in Figma is easy. Simply select the frame and then move to the clip content option. Once complete, you can choose your overflow scrolling options. Likewise, you shouldn’t neglect other crucial design elements, such as the frame color and shape and the text font. Making your design scrollable is an excellent choice for landing pages, app interfaces, and pop-up windows. It makes texts easier to skim through instead of clicking, ultimately heightening the user experience.

Did you find it easy to make your content scrollable in Figma? What about selecting the right font? Let us know in the comments section below.