Trick to Show/Hide Header on Scroll in Figma

welcome back everyone so in today's video i'm going to show you a simple trick that you can use in figma to hide the header while scrolling so a couple of our friends have asked us on youtube and instagram that if this is possible in figma so here is a quick video and a quick disclaimer here that this is not going to work on a mobile but if you're doing your preview or your demo on a desktop app or the browser app this is definitely going to work and it's really useful so let me just quickly show you what we're trying to achieve in this video so here we are on google and these are some sample interactions so let me just pick this one here so if you can see here we have a website and this is the header right and as this user is just trying to scroll down you can see that the header gets hidden and this is the interaction that we're trying to achieve in this video so let me just quickly show you a demo and then we can get started on how to do it and this is a screen that i picked up from the ui kit of instagram from figma community so let me just quickly preview this here we have the preview loaded up and if you can see this is the header of instagram and keep your eye on this area so as i scroll right the header is hidden and as i scroll back to this area the header is shown so this is the kind of interaction that we're gonna do in this video so without any further ado let's get started so i'll just remove this part here and i'll show you from the scratch how to do it so here we have a base screen on which you're gonna work and if i try to expand this frame right you can see that i have multiple posts below this and since i have these extra posts that is why we are able to scroll it and also one thing to keep in mind if you want your frame to scroll you got to make sure that your frame is selected go to prototype and the overflow setting is set to vertical scrolling so only if you set this you can have your screen scrollable so make sure that is done and the trick here is that once your mouse is on these three posts right i want to change to a different state where the header is hidden so that is done using a trigger called as mouse enter so once your mouse enters any of these three posts which is below the first one or the view area of the first screen you want the header to be hidden and once your mouse is back to this first post your header will be again shown so that is the trick that we're gonna use here so for that i'm gonna select these three posts and group it into one so that we can add a single action there so as you can see i'm just selecting these three here and i'm just using command g or control g which will just group it and also i'm just going to rename this as mouse enter or mouse trigger just to make it simple to add an action so that is done and now what i'll do is i'll just resize it back to 812 which is the iphone 11 size here and now i'll just duplicate this one so in this duplicated state i don't want the header so i'll click on the header make the opacity as zero so it is hidden and next all we are left is to do the prototyping so i'll go to the first artboard select prototype tab here and as i mentioned here we have the mouse trigger which is the remaining three posts right so i'll drag a link from here to the next frame here and as i mentioned the trigger is not going to be on click it's going to be mouse enter so this is the trick so once the mouse enters this region i want to jump to this state here so once we are in this state where the header is hidden i want it to only go back to the header state once we are on this region that is the first post so i'll click on the first post here and i'll drag a link to this frame right here and again the same thing so mouse enter and instant so that's it we are done adding the links but let's see how this is gonna work so i'll click on preview and if you can see uh this is not working so well it is having a lot of jerk and even it's not getting hidden so the issue here is when you're linking this stuff right you've got to make sure that the preserve scroll position is activated so i just wanted to purposefully show you this because you once you navigate from frame to frame you want the scroll to be preserved only then we'll have this smooth animation so i'll enable this one for the first one and also for this linking as well so in both the cases we have enabled preserve scroll position and now let's try how this is going to work so there you go you have the smooth interaction the header is getting hidden and you know wherever you place the mouse is gonna work right so even if you're on the top region it's gonna get activated once you enter the second post even if you're at this position here it's gonna work so that is how you can do it and you can also do this for the web applications as well so i just wanted to show you this on the mobile and you can do different things right it's not just hiding it but you might have seen different things like once you have started scrolling you'll get the shadow so let me just show an example for that as well so in the first state i basically don't want the shadow to be shown so there's no shadow it's just a smooth white background and in the next state i'll make the shadow enabled okay so if you see here the shadow is enabled so let's see how this works so if you can see once i've started scrolling i have the shadow but if i'm back here you don't have the shadow right so this is also a different type of interaction that you can follow so these are just some examples that i've showed you right so you can try different things with this trick here but yeah that's it for this video guys i hope you found this informative and helpful thanks for watching

Channel: Design Xstream

Views: 93,787

Keywords: Trick to Show/Hide Header on Scroll in Figma, show header on scroll, hide header on scroll down, show header on scroll up, show hide app header on scroll in figma, figma prototype to hide show header, how to hide header on scrolling down in figma, how to show header on scrolling up in figma, figma tutorial, figma prototype trick, figma trick to hide header

Id: oTIbjLX3fu4

Length: 4min 53sec (293 seconds)

Published: Mon Jun 28 2021