How to Make a Scrollable Asset in Figma

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 dataset other proprieties like color, fonts, and outlines afterward.

Here’s how it’s done:

1. 1. 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.

1. 1. On the right sidebar, under the 8 promote your content on social design tab, put a check next to the “clip content” option.

1. 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.
   1. 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 south africa numbers 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:

   1. Select the content in your scrollable frame that you want to change.