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.
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.
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.
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.
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.
Want to know how it flows? Go to preview the prototype mode and we are done! Stay tuned and keep enjoying this incredible software.
