Whenever we’re interacting with an app, it’s logical that we’re craving a sense of direction and control, creating a very organic navigation and intuitive process. Remember that as designers, we have to make the path to their desired goal feel obvious to the user. Some examples of this principle might include: having a clear call to action button, allowing content to “fade out” as it reaches the edge of the screen view in a way that invites the user to scroll, and having consistent patterns for navigation that appear throughout the product.
Moreover, some layouts may require both horizontal and vertical scrolling. In order to learn how to incorporate this technique into your designs, continue reading.
For Horizontal Scrolling
1. Make sure your selection has an auto layout to give each element a designated space
2. Once the selection is in the frame, resize it and drag it to fit the size of the overflow contents that will need to scroll.
3. Click on clip content, and switch to the prototype tab.
4. Set to horizontal scrolling.
5. Press play to test the interaction in your prototype.
For Vertical Scrolling
1. Set your content into a fixed position while scrolling, available on the design tab in Figma.
a. Make sure your selection has auto layout to give each element a designated space.
2. Once your selection is within the frame, resize it and drag it to fit the size in which you’d like to have your elements available to sight.
3. Click on home screen frame, and change overflow scrolling to vertical scrolling
a. Press play to test the interaction in your prototype.
Now you can maximize the real estate on your page for designs with more complex layouts. Next up, let’s take a look at how you can add micro-interactions to your prototype.
If you want to know more about how to add vertical and horizontal scrolling, you can do it here.