Web Design » Figma » How Do You Scroll With Figma Prototype?

How Do You Scroll With Figma Prototype?

Last updated on September 29, 2022 @ 12:44 am

F igma, the vector-based design tool, has quickly become a favorite among digital product designers. One of its most powerful features is the ability to create prototypes that look and feel like the real thing.

But how do you create a scrollable prototype in Figma? Let’s take a look at how to do it.

The first step is to create your frame. You can do this by clicking on the “+” icon in the left sidebar and selecting “Frame” from the drop-down menu.

PRO TIP: If you are not careful, you could accidentally scroll with your Figma prototype and ruin your work. Be sure to test your prototypes before using them for presentations or live demos.

Once you have your frame, you’ll need to add some content to it. For this example, we’ll just be adding some dummy text.

To make the text scrollable, all you need to do is click on the “Text” layer in the left sidebar and select “Vertical Scroll” from the drop-down menu.

That’s it! Now when you preview your prototype, you should be able to scroll through the text just like on a real website or app.

Creating a scrollable prototype in Figma is easy!
Just create a frame, add some content, and then select “Vertical Scroll” from the Text layer options.

Madison Geldart

Madison Geldart

Cloud infrastructure engineer and tech mess solver.