How To Create a Functional "BACK TO TOP" Button in Figma

hi everyone in this video we're going to create a back to top button that is oftentimes used on websites to take you well back to the beginning of the website to scroll up before we do that though we first need something that can be scrolled so the first step in this process is to create a fictional hypothetical website that is let's say that can be scrolled through and then we're gonna create the actual button so very quickly i'm just gonna take a frame 1400 by 4000 right and this frame is going to be called website actually we're going to have to use a rectangle to create to fill this whole frame with some contents and then take this frame and decrease the size and we're going to uncheck clip content so that we can see that this page in fact continues beyond beyond this frame right so we have a frame that's 1400 by 800 that's this frame and inside of this frame you have a rectangle that is way taller than the actual frame now that means that when we go to prototype and go to overflow scrolling and select vertical scrolling we will be able to scroll through this fictional website by the way if you'd like to learn more about scrolling check the video on the screen right now in the top right corner our fictional website is gonna have a fictional header area this header area will be white or actually dark gray and the rectangle is going to be almost black so that's our dark theme website right um we're going to have some kind of title so let's say headline website headline all right quite large and there's gonna be some kind of website sub headline or an ipsum door and that's going to be 20 pixels demi bold and then we're going to have some placeholder button and it'll be like green so that you can see it nicely against the background you know something contrasting like this all right so that's our placeholder we can pretend that this is an actual website for a while and then we're gonna just add some sections you know so that when we scroll we can see that we are actually scrolling there's gonna be one there's gonna be one as well right there's gonna be there's gonna be an image here an image here another one here and then also here right so we have this this is our fictional website right now when we launch the prototype this is what you get right so you get something you can scroll through you have the header and the website all right and now let's create the actual scroll to top button we're going to take some text and say scroll to top it's gonna be heavy heavy font we're gonna create very quickly an arrow like this right so that's our little arrow right here we're gonna take this thing both of these shift a to add alt layout we're gonna name this back to top button we're gonna add some padding we're gonna add a fill white fill actually and then we're gonna select these elements and change the fill in the stroke to black so it's visible right this is our button this is our back to top button we're gonna cut that and paste it here inside the website aligned to the bottom right we're gonna very quickly just add a shadow shadow is gonna be white and quite blurry but here's what you get now when you launch the prototype you get a website it can be scrolled through however this scroll to top button should not be moving away that defeats the whole point of this button so we're going to just go here go to prototype select this button and actually to design and select this button and then go to constraints and say fixed position when scrolling we're going to check that right now when we scroll it stays in the same place however does it really make sense that there is a scroll to top button visible when you're at the very top no it doesn't so how do we how do we go about you know showing the button only when you're for example down here we would have to duplicate duplicate this website hide this button on the first one so i'm going to set the opacity to zero and then go here and and create another rectangle with the same color as the background that will be positioned right here all right now we're going to go to prototype actually we're going to have to copy this and paste that here right move that to the background so you have in this area on both of these website frames you have this rectangle number 10 right we're going to say that in prototype we're gonna select this little circle and connect that to the second frame and we're gonna say mouse enter when the mouse enters this area you navigate to this second website frame right to make it easier we're gonna name this website two so right now we can see mouse enter navigate to website two we're also gonna make sure that we preserve the scroll position so that when you actually the mouse enters this area we don't return back here but we stay here on this in this part of the website we're gonna also select smart animate so what should theoretically happen now is that as soon as the mouse enters this area we're gonna move on towards this frame where this button is visible and since it has the fixed position when scrolling selected it should be in the top right corner sorry in the bottom right corner at all times now let's actually try if if that works right so launch the prototype so no back to top button visible we scroll down and as soon as the mouse enters this area we get this scroll to top button right so now it's present and how to actually create the functionality now again we're going to select this button when it's actually visible go to prototype select this circle again and click and drag to connect it into this area this header area and we're gonna say on click scroll to rectangle two and it's gonna be animate ease in and out 500 milliseconds let's test this prototype again we landed on the website we are scrolling down we are way down and a scroll to top button appears we click it and it takes us back to the initial position we could take this one step further and say when the mouse enters this area again we return back to this state which would mean again duplicating this rectangle moving it into the background and sampling the color from here selecting it prototype boom and say mouse enter navigate to website preserve scroll position and smart animate let's try that again right so we are on on first very first state we scroll down button appears we click it and then we enter this area again and it disappears and we can repeat the process many times over it works each time and we've created a loop that can be interacted with as many times as we need so this is how you create a scroll to top button in figma if you have any questions let me know in the comments below if you're looking to learn the very basics on figma definitely check out my playlist where i go over the basics of figma thanks for tuning in i hope this video has been useful to you and i will see you in the next one

Channel: Mavi Design

Views: 20,096

Keywords:

Id: 7wL_ZcX_jW0

Length: 8min 26sec (506 seconds)

Published: Wed Sep 07 2022