Horizontal & Vertical Scrolling | Figma Tutorial

in this video I'm going to show you how to add horizontal and vertical scrolling to your figma prototype let's get started so to get started I'm opening up a project that I'm currently working on this is a messages app that I'm currently designing in figma at the top of the page I have the messages header an ability to add a new message a list of contacts and then a list of messages I'm going to want to include some interactivity to this prototype so it actually feels like a real application so I'm going to want to include horizontal scrolling for the contacts and vertical scrolling for the messages so to begin I have all these contacts in a group called contacts and I have all these messages in a group called messages for this frame I had clip content unselected so you can actually see what's off the artboard but I'm going to reselect it when I do so the other content that rolls off the page seems to be invisible if I select this group however you can see that there's actually the other content of the year in order to include horizontal scrolling for this contacts section first I'm going to grab this group and I'm going to second click and then say frame selection when I do it looks like nothing has changed so with this frame I'm actually going to limit this frame to the actual screen size so now I'm going to drag this frame until it hits the side of the screen this will limit the view of the content to only be visible within this section next with the frame selected I'm going to go to prototype and then under overflow behavior I'm going to switch it to horizontal scrolling then I'm going to click this present button so we can see what the prototype does I can now scroll horizontally and see the rest of those contacts now we're going to follow a similar procedure for the messages area I'm going to select the group of the messages second click go to frame selection then I'm going to modify this frame to only be visible where we want it to be visible so that'll be right above that tab bar and then with this layer selected I'm going to go to overflow behavior and then switch a to vertical scrolling then I'm going to click present again the application refreshes and now we're able to scroll on this area we notice a problem however because there is an overlap between the messages and the contacts so I need to modify this prototype so it only Scrolls within this viewable area and it doesn't actually go above this area so back in my prototype I'm going to reselect this frame area and go to design and then I'm going to click clip content so again clip content will restrict the content to fit within that frame so it won't exceed that frame so when I have that selected I'm going to represent that prototype and now when I scroll within this area it limits the view to only be contained within this frame so now we've added horizontal and vertical scrolling to our Figment prototype the last thing I'm going to show you is how to add page scrolling to your prototype so what if you wanted the entire page to scroll up believed the tab bar pinned to the bottom I'm going to grab this messages frame and duplicate it next I'm going to grab this frame and increase the height then I'm going to take this frame and turn it back into a group because I don't want it to only be scrollable within this area so I'm going to do command shift G to basically ungroup it or unframed and so it averts back to that original grouping that we had called messages then I'm going to take this tab bar and constrain it to the left and bottom of the page and then pin it to the bottom with the align tool I'm actually just going to increase the height of this slightly right around there next I'm going to take that tab bar and also click fix position when scrolling so it'll basically keep that position in place as I scroll so now let's refresh the prototype and see how it looks so now we can freely scroll up and down on the whole page and the tab bar remains in the same place but it's retained that top contact area that has the horizontal scrolling so that's why I add horizontal and vertical scrolling to my figma prototypes please let me know if you have any questions about the topic and subscribe to stay up to date with my latest content thanks for watching [Music]

Channel: Angela Delise

Views: 275,188

Keywords: sketch, ux, ux design, ui, origami, figma, product design, product designer, app design, web design, prototype, wireframe, ux process, how to, demo, tutorial, origami studios, zeplin, FIGMA ANIMATION, figma tutorial, figma scroll, horizontal scroll, vertical scroll, page scroll, page scrolling, figma prototype, figma animate, figma design, figma prototyping, figma app design, scrolling, horizontal scrolling, vertical scrolling, fix position, frames, figma frames, app prototype

Id: wIPo7vxxchY

Length: 5min 41sec (341 seconds)

Published: Wed Mar 04 2020