Figma Tutorial: How to create Anchor Links

in this tutorial i'm going to show you how to create anchor links in figma just like you can see here [Music] so the first thing you want to do is select f on your keyboard or the frame button up here and select a desktop 1440x10 anchor links are something you most commonly see on desktop websites okay i'm just switching to design right i'm going to selecting the r on my keyboard to create the rectangle tool i'm going to create some rectangles that will act as our links so there's my first one i'm just going to duplicate that to my second and then there's my third i'm going to give these different colors just so that they're obviously different links so make this a light purple and this one a slightly lighter shade lighter shade darker shade than this one a very dark shade okay that's perfect so those are our section links so now i'm going to start the text tool and i'm just going to type in here section one and i'm just going to align that correctly section two and then finally we'll do section three so like i say these are going to act as the links to link to the three different sections on the page so i will just change the text color of these because i want it to look a certain way take that to white horribly inaccessible now i'm going to group those two layers together the text and the background rectangle and i'm going to call that section one link and no surprise i'm gonna do that for the other two as well so that's section two link and you'll see why it's important to name these groups a name that you can recognize in a moment when we go into the prototyping the last thing i'm going to do is i'm going to create a rectangle that is the same width as the artboard so the width was 1440 and the same height as these rectangles so i'm just going to bring that high tap once it matches it i'm going to change that background color to white i'm going to pop that behind and call that nav background now what i'll do is i'll select that layer and those three groups i've created and i'll head over here and i'll call and i'll take this little box that says fix position when scrolling and this means that anywhere that you are on a page you can click these links they'll always be there you can always get to the different sections okay the next thing i want to do is actually create those sections so we're going to start with section one so making that rectangle 1440 by 1024 the size of this frame and i'm going to give that a color of the first link and we'll call this section one and i'll make that font size 200 and we will make that font color white okay now what i'll do is i will select that and the background and i'll just call that section one i'll duplicate that and i'll bring it down here you can see there that actually over on the layers panel over here because it's actually falling outside of the frame that i initially set up desktop one so you want to do when that happens you want to just drag it back in and then call that section two and you can see that you actually can't see it and the reason for that is because the frame has got clip content ticked there now if i untick that you'll see that it's appeared so just remember whenever anything's inside of your frames you can't see it could well be because you have that tip so we'll just change that to say section two and finally we'll do our section three so i'll just drag that down here and make this section three i appreciate that this is just the setup of the design the fun stuff the prototyping where we get it to all work is coming up very soon okay so that is our that's our website with our three basic sections and the nav at the top so now we'll do is a head up here and we'll press click clip content this time and we want to go over to prototyping so you can see that we've got no scrolling currently set overflow scrolling so if you pre if we go and preview this now you'll see that we can't actually scroll so we can't get to those sections obviously because this is an anc links tutorial we want to be able to scroll so we're going to head back over here and we're going to go and change that no scrolling to vertical scrolling now if we head back over to our preview you can see that we can scroll between it but that is not enough so what we want to do is we want to select a section one link here and then you can either press this little dot here or you can head over to interactions which is like i'm going to do hit the plus button on click we want it to changing this drop down to scroll to and now changing this to section one we want it to animate so we don't want it to just be instant so we want to press animate and we'll leave it at ease out 300 milliseconds you can change this to whatever you desire you could do ease in and ease out have a play around change this around see what you works for you basically and we're going to do that for each one of these so none to scroll two and the destination to section two and then finally section three is going to surprise surprise section three and you can see i just need to make sure that i'm changing that to animate otherwise we're not going to get that full effect of the anchor links so now when we head back to our project type and we click on these links you can see that they are acting as anchor links and so that is how you can set up anchor links that have an animated scroll in figma i hope you enjoyed this tutorial i'll see you in the next one bye for now you

Channel: UX&D

Views: 34,166

Keywords:

Id: piZlQbjK2LA

Length: 6min 20sec (380 seconds)

Published: Sun Nov 07 2021