Figma Tutorial: Master Sticky Scroll in 8 Minutes

in today's video I'm gonna show you how to create sticky scrolling prototypes in figma thanks to figma's latest update let's dive in alright here I'm going to show you four different examples to truly understand how this new feature works so let's start with the first example I'm going to zoom in here here we have this Mobile screen we have this device frame and right at the top we have the search bar and right underneath we have these image placeholders so up until now whenever you wanted to make it scrollable you could just select this content frame inside you could head over to the Prototype Tab and here you could change the Overflow option to Vertical okay and then if you just select this example one and hit play you can see that it's scrollable right however now it's possible to make these top elements like this search heading and the search bar stick to the top of the parent frame while we are scrolling okay so this way the user can always see these elements we could make this search bar sticky or the search bar and this title so let's see how it's done the first thing you need to do is to select the frame like what we did the the parent frame and change the Overflow option to Vertical so the first step is already done next we need to select the elements that we want to stick to the top of the frame okay in this case I want to select this search bar inside all right now you want to make sure that it sticks to the top of the frame so once I select it I can head over to the scroll behavior in the Prototype Tab and here by default the position is set to scroll with parent that's why it wasn't sticky but now we have this new Option sticky stop at the top Edge so if I select this option and I preview it look what happens as you can see now this search bar stops right here at the top of its parent frame which in this case is this content frame and we could continue scrolling but look what happens when I do that you see this search bar doesn't have any feel so let's fix this issue quickly I'm going to select the search bar I'm gonna go to design and here I'm gonna add a feel to it alternatively you could just add a background to this section and make it stick to the top as well but I guess this fixes this issue yeah as you can see it works perfectly but what if you wanted to make this title stick to the top as well well in that case you could also select this the header frame you could go to prototype and again set the position to Sticky but now look what happens when I do that you see first the title sticks to the top and then the search bar sticks on top of it that's not what I want okay I want them both to stick to the top so in order to do that we need to select them both and we need to put them inside another frame you could add other layout to them if you want or you could just right click here and while they are both selected click on frame selection to put them inside another frame I'm going to rename it to top and now I want to make this top frame sticky so while it's selected I'm going to change the position to Sticky just like this and now it should fix the issue there we go all right so it's six to the top but this top frame that we just created doesn't have a feel so let's go to design and quickly add a white feel to it and there we go now the issue is solved all right now let's move on to the next example so here we have another Mobile screen and inside we have some contacts okay at the moment if I select this page and I preview it you will see that it's a static page so I cannot scroll so the first thing we need to do is to just select this contacts frame inside and we need to head over to prototype change the Overflow to Vertical now let's give it a try so as you can see we can easily scroll but now I want to make these labels like a b c these categories to stick to the top of this Frame okay so once we reach to the B category for instance this B label should be placed on top of this a label to do that we just need to select these labels inside as you can see we have a b c d all the way to J I'm gonna select them all and I'm Gonna Change your position to Sticky and now it should work let's give it a try there we go very easy isn't it all right let's move on to the next example here we have a table with some headers at the top at the moment it's static if I just preview it let me show you that nothing happens when I try to scroll up or down so now we want to make it scrollable and we also want to make these top headers stick to the top of this Frame why because it's a good practice to keep them at the top especially when we have a very long table so our users could easily understand the data presented in this table the first thing we need to do is to just select this table as the parent frame this table frame here and we need to head over to prototype and change the Overflow from no scrolling to Vertical this is the first step always okay because we want to make this whole frame scrollable next we need to select these header frames and just change the position to Sticky and we should be done let me give it a try all right I'm gonna scroll up there we go as you can see these headers stick to the top of this Frame as I scroll up or down now I'm going to show you another example which is also quite popular I'm not sure if you've noticed or not but some websites try to make their main CTA sticky what do I mean here as you can see we have a Blog Page okay we have this large image this thumbnail and right here right next to this thumbnail we have this CTA subscribe to Circle and then the user can scroll down to read this article okay let me just preview it to show you how it works at the moment if I just scroll down nothing happens all these elements scroll with the parents but sometimes it's a good idea to make this card on the right side sticky so when you scroll down it will stick to the top of the frame and it will be visible all the time first we need to select the parent frame in this example the parent frame is our Mainframe I'm going to set the Overflow to vertical and here as you can see we get this warning it says for scrolling to work on this Frame the content needs to be bigger than the frame and that's correct here as you can see we don't have any overflowing content so to fix that we just need to select the frame and just make it smaller like this just decrease the height I'm going to decrease it like this but make sure that this clip content checkbox is checked next we need to select this Frame discard and head over to prototype and by default as I said the position is always set to scroll with parents I'm going to change it to Sticky and let's see whether it works or not I'm gonna scroll up there we go it sticks to the top of our frame however it's a good idea to have some top margin right to fix this issue I can put this card inside another frame click on frame selection just like this and then I'm going to enlarge this Frame I'm going to hold down Ctrl or command left click and drag just like this now I'm going to select the frame inside just double click on it and just align it to the bottom of this Frame that we just created now I'm going to select this main frame just align it with the other card now we need to head over to the Prototype Tab and again change the position to Sticky because we created this new frame and it should work perfectly let's give it a try there we go now we have some top margin if you want to learn how to create an advanced scroll animation in figma like what you see on Apple's website make sure to check out this video thank you so much for watching this video if you found it helpful please hit the like button and subscribe to my channel for More Design tutorials have an amazing day and see you next time

Channel: DesignWithArash

Views: 55,983

Keywords: ui/ux design, ux design, user experience design, ui/ux design india, how to become a ui/ux designer, become a ui/ux designer, web design, figma, figma tutorial, figma design, figma tutorial for beginners, ux, ui, design, ui design, uxui design, uxui, learn ux, ux course, design course, designcourse, beginner ux, junior ux, junior designer, junior ux designer, entry level ux, how to learn ux, learning ux, user experience, user interface, figma sticky scroll

Id: 8h-QEg6r4tM

Length: 8min 45sec (525 seconds)

Published: Tue Apr 11 2023