How Do You Do Horizontal Scrolls in Figma?

Horizontal scrolling is becoming increasingly popular as a method of displaying content on websites. It gives designers the flexibility to create unique experiences that are tailored to the user’s needs.

Figma is an excellent tool for prototyping and developing interfaces, and it includes features that enable horizontal scrolling.

In Figma, the Scroll Component allows users to easily add horizontal scrolling options to their designs. This component appears as a frame with arrows on either side and can be customized with different scrolling effects, such as a smooth transition or snap-to-page. It also has options for controlling the speed of the scrolling motion, as well as the direction in which it moves.

Another way to incorporate horizontal scrolling into a design is by using the Scroll Group component. This component enables users to group multiple frames together for vertical or horizontal scrolling in a single viewport. It also supports snapping frames together when they are scrolled, allowing for more complex layouts.

Finally, Figma’s Layout Grids feature can be used to create horizontally scrollable grids of content. By choosing “Horizontal” under Layout Direction, users can customize the grid’s columns and rows to make them fit perfectly within their scrollable area.


Figma offers several different ways for designers to incorporate horizontal scrolling into their designs. The Scroll Component enables users to control the speed and direction of the motion, while Scroll Groups allow for more complex layouts with multiple frames.

Finally, Layout Grids offer an easy way to create grids of content that scroll horizontally within a single viewport. With these features in place, it’s easy for designers to create engaging user experiences with horizontal scrolling in Figma.