Figma / Sticky Scroll in Prototypes (2023)

hello everyone my name is Danny and today I'll be teaching you how to do a sticky scroll inside of prototyping in figma this is a brand new feature that just came out and it's a little bit more complicated than I was anticipating so I want to help guide you through it um so here's what sticky scroll actually is you'll notice as I scroll these section titles stay sticky in place but as the next section appears it overrides that section and it just makes for a very nice smooth transition this works really nicely for lists but if I have these horizontal tabs as well you can accomplish something similar by having this scroll up to the top and then it pops nicely into place and then my list items scroll behind so how do we accomplish this for the vertical list let's start off by just creating a frame and adding Auto layout this is the size of my device I'm using iPhone 14 pro and I just have a few elements that I'm going to use to get us started so I will pop into my auto layout my header that I have here and now to structure my lists what I want to do is I have each individual list item here I'm going to select all of these components and press shift a to turn that into an auto layout quickly rename this to Burgers so this list acts as my list items and then my section titles that I have here actually need to be outside of the auto layout so for sticky scroll to work you need to have a just regular frame otherwise there's some wonkiness so it's better just keep it in a regular frame so I will take my list auto layout list and my section title and I will just press option command G or press F on your keyboard to create to draw out a frame and we'll just call this menu items so now I can just well actually let me put this over here so we need to bring in all of our other items as well but before we do that we need to make a few modifications so go to prototyping mode and your Mainframe just set that to no scrolling and the reason I'm doing that is because I actually want this header up here I want that to stay fixed so that's kind of a sticky element in and of itself it's a absolute positioned item so we want that to always stay there but we also want these items to scroll so now I'll take my menu items frame just make it much much bigger and I will start dragging in these items here so these different sections are laid out exactly the same as we laid this out it's just an auto layout stack and then the title is actually as you can see separate from the auto layout so we'll select all of these and let me just drag it into my frame make sure it snaps in there nicely and now I can drag this menu items frame into my auto layout device frame and I'm just going to set this to fill the container so now this giant frame of items is overflowing down pretty much to the bottom of the screen and now the only other thing that we need to do is add in our prototyping Scrolls so this menu items frame that we've been messing with we want to set the Overflow to scroll vertically and for each of these different section headers I want those to be sticky so make sure each of these are set to Sticky and once we've done that we can very quickly preview and make sure everything's working so now you'll see as I scroll everything Scrolls nicely if you have any issues here it's probably because of the order of your frames so I'll give you an example real quick so if I have this Burgers thing and I change the order here in the stack and then I start scrolling you'll notice that it stays on top at least until a certain point it's not being overridden so what figma is basically doing here is it's detecting the layer order and then it's stacking the other item on top of it so whenever chicken and fish reaches here it just goes on top of burgers so that's what creates that stacking effect so if you have this issue as well where it's kind of scrolling behind rest assured nothing's broken it's just a ordering issue so make sure things are in order as you need them and you shouldn't have any problems so next up if we want to create something similar using this horizontal scroll with these tabs do the same thing create a frame Auto layout and then we'll just drag in my header and now now that I have my tabs here let me just ungroup this real quick so each of these different tabs are set in their own little Auto layout and I can select all of them press shift a and I'm just going to add 16 pixels padding here and I'll call this my role menu and you want to make sure that you set this to have a fill because if it doesn't have a fill then you'll kind of see the items behind it and then the scroll section itself let me just ungroup this real quick so you can see this is the same as before I just have all of my items shift a inside of an auto layout and we'll just call this drinks okay so now we've got our scroll menu we've got our advertisement up here at the top that's going to scroll out of the way and I'm just going to take all three of these and add Auto layout we'll get rid of this space in between them and now I want to set this to fill the container and I'm going to set this well I'll just drag this in for now I want this to hug my contents okay so everything's looking nice there I want to set this to have some prototyping functionality so I'm going to set it to have overflow horizontal that'll give me my horizontal scroll and then I'm going to set this entire frame here let's call this main for now I want to set the Overflow to scroll vertically and I need to set this scroll menu to be sticky so I've got a horizontal scroll on it and it's sticky so now I can just drag this into place and same thing as before I'm going to set this to fill container so I'm not sure if I did this or not but I want to do the same thing over here turn off the scrolling and make sure that is set to vertical scroll and now we can preview this and hopefully it's working nicely but it's not because like I said before figma is reading the layers here so what happened is this layer is getting hidden behind these other layers so to fix that we can actually just take this and there's a little bit of wonkiness with using Auto layout but in this case it actually works see how we have in our Auto layout settings we have last on top we can just change that to First on top so that will then put this layer above this layer and then hopefully as we preview you'll see that everything Scrolls nicely behind and this Scrolls horizontally so please if you want to follow along in the file here if you want to mess around with this I'll put it on the community store but that's basically it there's a lot more that can be done here but this is kind of just a basic overview to give you an understanding of how it works if you guys found that useful helpful in any way please leave a like And subscribe and I'll see you in the next video

Channel: Danny Sapio

Views: 14,729

Keywords:

Id: PoPvA962VjI

Length: 9min 13sec (553 seconds)

Published: Fri Mar 31 2023