Web Design » Figma » How Do You Scroll a Prototype in Figma?

How Do You Scroll a Prototype in Figma?

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

When you’re working on a web design project, it’s important to be able to prototype your designs so you can get feedback from users and make changes before coding begins. Figma is a great tool for prototyping because it allows you to create interactive prototypes that look and feel like the real thing.

One of the most common questions we get asked is how to scroll a prototype in Figma. The answer is actually quite simple – all you need to do is add a Scroll component to your project and then connect it to the frame or component that you want to be able to scroll.

Here’s a quick step-by-step guide to adding scrolling to your prototypes in Figma:

1. Open your project in Figma and select the frame or component that you want to be scrollable.

2. In the toolbar at the top of the screen, click on the Add Component button and select Scroll from the menu.

3. A new Scroll component will be added to your project and you’ll see a blue connector line appear between the frame or component you selected in Step 1 and the Scroll component. This indicates that the two are now connected.

4. To test your prototype, click on the Play button in the toolbar and then use your mouse or trackpad to scroll up and down within the frame or component. You’ll see that it’s now possible to scroll!

That’s all there is to it! Adding scrolling to your prototypes in Figma is a quick and easy way to make them more interactive and realistic. Give it a try next time you’re working on a web design project.

PRO TIP: If you are using a prototype in Figma, be aware that scrolling may not work as expected. In some cases, the prototype may not scroll at all, or it may scroll in an unexpected direction. If you experience any problems with scrolling, please report them to the Figma team.
Drew Clemente

Drew Clemente

Devops & Sysadmin engineer. I basically build infrastructure online.