How to create a scrollable asset in Figma

Making your content scrollable in Figma involves navigating the side tab. Unfortunately, it doesn’t automatically appear in the main UI. Scrolling content is useful when you want to present a lot of information within one frame of your design. Some examples include landing pages, application interfaces, or pop-ups.

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

Wrap scrollable text inside a shape

Let’s start by creating some scrollable text inside a simple shape. This is the most common example of scrolling text and you can then add other properties such as color, fonts and outlines.

This is how you do it:

1. Create a basic shape. For this example, we recommend making a vertical rectangle. You can do this by selecting the rectangle tool in the left sidebar or by using the “R” command. Press and hold left, click a point on the canvas and draw the shape.
   
2. In the right sidebar, under the layout tab, check the “clip content” option.
   
3. Select the text tool to create a text box and place it inside the scrollable frame. Write or copy and paste any content you are using.
   
4. Select the framework and go to the prototype tab on the right side of its interface. Then, select the “overflow scroll” option and the style you prefer. Here we will choose “vertical scroll”.
   

Once you click on the scroll overflow option in the prototype tab, there are several styles. We choose the vertical one since we are using a vertical rectangle as an example. This allows you to read the text from top to bottom. Some of the other styles include:

• Horizontal Scrolling: Users can have their text scroll from left to right in some examples. This option is preferable if you are creating designs in a landscaping format.
• No Scroll – If you want to lock your content in place, choose the no scroll option.
• Both directions: Create a content-rich layout and scroll both vertically and horizontally.

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

How to design your scrollable components

Depending on your product, you will need to design your content framework 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 layout

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

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

If the brand you are designing for has a particular font, you will probably choose the same one so that it is consistent with the brand image. If you have more leeway, you should experiment with different examples before choosing the right one.

Some considerations include:

• Design Intent: Your choice of font should match your design intent. If you want to convey a lot of information clearly, opt for less decorative but elegant fonts.
• Other components: Your font is a visual element like any other in your design. It should match the frame and other components it includes.
• Overall Aesthetics and Branding: The overall feel of the brand should also influence the font chosen. For example, a flower delivery service will not include the same font as a SAAS landing page.

While choosing the right font may require some experimentation, some concrete font examples are the most reliable options:

• Roboto: If you want to play it safe, use Roboto. It is considered a versatile and neutral source with many applications. Because 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 may want to consider Raleway. It is generally slim but has different weight variations and an overall elegant appearance.
• Lato: friendly, reliable and serious are the right words to describe this font. Designers can use Lato for headings and paragraph text where readability and clarity are primary concerns.

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

Change the color of the frame shape

In addition to changing the font, you’ll also want to change the color of the frame shape. Again, the exact shade will depend on the brand you’re designing for or your aesthetic. Fortunately, Figma’s interface makes it easy to select a color.

This is how you can change the colors of your frame:

1. Select the frame you want to edit.
   
2. The layer will appear in the right sidebar. Navigate to the “fill out” p.
   
3. Select “+” to add a padding.
   
4. A color selection window will open. Select the fill color and gradient. You can also type a hexadecimal code if you know the exact tone.
   

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

Frequent questions

Is there a scrolling text command in Figma?

Unfortunately, there is no command to make text scrollable within Figma. However, you can complete the process with just a few clicks using the method mentioned above.

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 large texts.

Which device interface will typically need a scrolling text layout?

A good example would be designing mockups for an application. Users can create a phone as the overall frame, while scrolling text can be the application interface.

Is Figma the best option for creating scrollable layouts?

Figma is one of the best tools for creating a wide range of shapes, including scrollable designs. Better yet, Figma is free. However, you may have certain personal preferences. Try experimenting with a few platforms, such as Adobe Illustrator, until you find the tool that best suits your needs.

Make your designs scrollable and easy to use

Creating any text inside a frame in Figma is easy. Simply select the frame and then go to the clip content option. Once completed, you can choose additional scrolling options. Also, you should not neglect other crucial design elements, such as the color and shape of the frame and the font of the text. Making your layout scrollable is a great option for landing pages, app interfaces, and popups. It makes it easier to skim through texts instead of clicking, which ultimately improves the user experience.