Create A Sticky Sidebar On Scroll: Figma 2023 Tutorial

okay today we're going to go over how to create a sticky sidebar uh when you scroll thanks to figma's new auto her new update with uh sticky positioning so we've already got our header that stays in place when you scroll uh you can check out that tutorial and now I've got this navigation bar that when you scroll up we're going to have it stick to the side and then scroll back down pretty good stuff let's get into it Okay so first things first I've got my page here I've got it all set up I have my items already aligned inside the auto layout so that there's room for my sidebar so what I'm going to do is I'm going to take my sidebar and I'm going to drag it into my auto layout see it here we'll collapse all these sections and what I'm going to do is I'm going to go over here to absolute position I'm going to do that and now since I want it to be in line with these items we'll move it down open it up perfect so there we go pretty easy stuff it's on the bottom here so that's great I'm going to go over to prototype position sticky all right so now when I hit play there it is oh it sticks to the top but it's covering our our menu here so that's not something I want so to fix that what I'm going to do is I'm going to go down we'll select it turn off sticky for now and we're actually going to I'm just going to hit shift a to wrap it in an auto layout and now I know that my bar here is 146. so I'm going to add top padding of 146 I think maybe like 40 would do it 40. all right so now with this I'll use this to line myself back up and now this should give us our buffering from the top down so let's see if that worked so now it didn't work because I didn't set it to scroll so what I need to do is I actually need to pick my frame that I just did and do sticky all right so now when I scroll it docks with enough space that it doesn't cover our menu that's pretty much it you can take this a little bit further if you want say like unfortunately figma doesn't let you bump it up after but you could cover it so if you don't want it to come on the over top of our on sale section what you can do is you can actually take your on sale which I think is number three here drag it below we'll call this our sidebar frame and then you actually want to put your menu frame on top of that so that your menu still go or your navigation still goes over top so this will be the topmost then number three then our sidebar and what that does is that lets it cover this up so we can't bump it up which is too bad that you can't end the sticky scroll but we can cover it up and still have our navigation on top um so until figma fixes the ability to end your sticky on scroll on a specific spot which I'm unsure how long that'll take you can use the panel below it to cover it up and move on with the rest of your website so there you have it a sticky sidebar on scroll don't forget to like subscribe leave your comments and thanks for watching [Music]

Channel: Darren Northcott - Figma, UX & UI

Views: 17,767

Keywords: figma tutorial, ui design, figma prototype, sticky sidebar figma, figma update 2023

Id: 3WoTacYF0i8

Length: 4min 40sec (280 seconds)

Published: Thu Mar 30 2023