How To Do Horizontal Scrolling in Figma

Updated on: December 17, 2022

Not every application design sticks to the common flow of navigation which is vertical. Some application designs display menus to scroll horizontally. If it’s your case, you came to the right place!

This tutorial will explore this interesting function of prototyping in Figma: Horizontal Scrolling and how to do it.

Beyond Limits

Scrolling vertically or horizontally will depend on your application design. When we do it vertically is expected that, as we scroll, the content will extend beyond the device dimensions.

But let’s say we want to do the same with a menu that has lots of options and displays horizontally, for example, a sort of play store.

How To Do Horizontal Scrolling in Figma1

Let’s take a look at the options, there is Top Up, Transfer, Internet, etc. and right down below we have Bill, Games, and so on. We would like then to create the menu to scroll horizontally.

How To Do Horizontal Scrolling in Figma2

To ensure that is under we must take that group of objects and place it within the frame that in this case we named Content. We selected both groups and created a bigger one that overflows outside of the screen. 

How To Do Horizontal Scrolling in Figma3

Now, to habilitate the overflow options our selected group needs to be a frame itself, so select the group in the right sidebar menu and press Frame Selection, and next, at the left sidebar menu, press Horizontal Scrolling.

How To Do Horizontal Scrolling in Figma4

Want to know how it flows? Go to preview the prototype mode and we are done! Stay tuned and keep enjoying this incredible software.

Access 4,242+ video lessons. Instantly.
Start Learning Now →
crossmenu linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram