Horizontal and Vertical Scroll in Figma - Quick Prototyping Tutorial — Transcript

Full transcript

1. 0:03[music]
2. 0:09[music]
3. 0:10Hey there. Welcome to our hands-on
4. 0:12tutorial. Today, we're going to guide
5. 0:15you through setting up both horizontal
6. 0:16and vertical scrolling in a mobile
7. 0:18design. First, let's jump into our Figma
8. 0:21file where the mobile design lives.
9. 0:31We'll tackle the horizontal scroll
10. 0:32feature for our quick recipe filters
11. 0:34first.
12. 0:35[music]
13. 0:35We've used auto layout for each filter
14. 0:37item to keep everything organized and
15. 0:39well aligned. [music]
16. 0:40Here's how you do it. Select all filter
17. 0:43items and create an auto layout. You
18. 0:45might be tempted to use a regular frame,
19. 0:47but auto layout is a more efficient
20. 0:49option. We then establish a horizontal
21. 0:51space of 20 pixels between items. Next,
22. 0:55[music] we're going to dive into the
23. 0:56crucial part of creating this horizontal
24. 0:58scroll. Hold down the command key and
25. 1:00then [music] left click on the container
26. 1:02and drag it until it fits within the
27. 1:04dimensions of our phone frame. In
28. 1:06simpler terms, we're adjusting the
29. 1:07container to only show the content that
30. 1:09fits within the phone [music] screen.
31. 1:11Don't worry, all your content is still
32. 1:13there. We've just resized the container.
33. 1:15[music]
34. 1:16The following step is to activate the
35. 1:18clip content feature. This ensures that
36. 1:20content doesn't spill [music] out of our
37. 1:21phone frame.
38. 1:27After that, it's essential to navigate
39. 1:28to the prototype section. Here, we're
40. 1:31keeping the position the same [music]
41. 1:32but changing the overflow to horizontal
42. 1:34scroll. Now, we can test our work by
43. 1:37previewing our prototype.
44. 1:43As you can see, our horizontal scroll
45. 1:45function is working like a charm. If
46. 1:47you're interested in enhancing this
47. 1:49further, there are additional [music]
48. 1:50tweaks you can make for a smoother
49. 1:51experience, but we'll save that for
50. 1:53another session. Moving on, we're now
51. 1:56going [music] to set up scrollable
52. 1:57recipes while keeping everything else in
53. 1:59place. We'll do this [music] by resizing
54. 2:02our frame to match the dimensions of our
55. 2:03prototype. For this tutorial, we're
56. 2:06using the iPhone [music] mini, which is
57. 2:07375 by 812 pixels. Let's temporarily
58. 2:12remove the bottom navigation. Now,
59. 2:14adjust the height to 812 pixels.
60. 2:23Great. We can now bring back the
61. 2:25navigation and align it to the bottom of
62. 2:27the frame.
63. 2:32But, as we shrunk our frame,
64. 2:34[music]
65. 2:34our content now overflows beyond the
66. 2:37main frame. Select all recipe boxes,
67. 2:44create an auto layout, and then choose
68. 2:46clip content.
69. 2:47[music]
70. 2:47We'll also apply clip content to the
71. 2:49phone frame to prevent content from
72. 2:51spilling out of our main frame.
73. 2:58With everything now clipped, let's
74. 2:59preview our prototype. You might notice
75. 3:02that the content isn't yet scrollable.
76. 3:04That's because we need to take a few
77. 3:05more steps to get it to scroll as
78. 3:07desired. In a similar fashion to our
79. 3:09setup for the horizontal scroll, we'll
80. 3:11crop our content area and align it with
81. 3:14the bottom of our phone frame. Hold down
82. 3:16the command key, left click and drag
83. 3:18with your mouse until the container is
84. 3:20perfectly aligned. Now, we'll head back
85. 3:22to the prototype section.
86. 3:26We'll leave the position as is and
87. 3:27change the overflow to vertical.
88. 3:32Let's preview our prototype once more to
89. 3:34see the outcome. Awesome. Our vertical
90. 3:37scroll is now working flawlessly. And
91. 3:40there you have it. That's how you easily
92. 3:42create simple horizontal and vertical
93. 3:44scrolls in Figma. If you found this
94. 3:46tutorial helpful and are eager to learn
95. 3:48more, remember to hit the subscribe
96. 3:50button to stay updated our future
97. 3:52content. But, why stop here? If you're
98. 3:55serious about leveling up your skills
99. 3:57and taking your designs to new heights,
100. 3:59we highly recommend checking out our
101. 4:01UXUI Design Mastery course. This
102. 4:04comprehensive course is designed to
103. 4:05equip you with the tools, techniques,
104. 4:07and industry insights you need to create
105. 4:09stunning and user-friendly designs that
106. 4:12stand out in today's competitive digital
107. 4:14landscape.
108. 4:15I'm
109. 4:18only one away
110. 4:21from you
111. 4:24baby.