By Howard Pinsky
Hey everyone. I'm Howard Pinsky, Senior XD evangelist at Adobe. As you're designing out your websites especially long form landing pages you may find yourself wanting to prototype anchor links to quickly navigate around. Let's take a look at how that's done using Adobe XD.
Here, I have an adorable landing page I designed recently that contains various animals extending down the artboard and a call to action to purchase this book at the bottom. To help my testers navigate the various sections on this page, I've included a buy link at the top and smaller versions. Of the animals to the left. To make sure that these icons are always visible, I want to quickly fix them to the artboard by selecting the group they're contained within and then taking on fixed position when scrolling within the Properties Inspector. I also got a little bit clever and hit a back to top icon underneath the header image that will reveal itself once scrolling takes place.
Now to wire up our anchor links, we want to hop into Prototype mode and then select the first object that we want to create an interaction from. In this case the panda. There are a few ways to define the destination, but the easiest is to drag the blue handle directly to the layer that you want the link to scroll to and you'll notice it highlighted with a blue bounding box as you settle on top of it. Within the properties you can further Define this action which was set to scroll to when dropped into place. By default, your scroll interactions will be set to a tap trigger, but you can also use keys and gamepad or voice triggers if you wish. Your standard easing options are also available. So depending on how quickly or slowly you want the page to scroll you can set that here. There's also the option to offset the Y position taking a quick look at the preview clicking on the panda icon takes us down to that section, but you may notice that the top edge of the layer is flush with the top edge of the viewport.
If you want to add some breathing room above our cute little friend, you can decrease the Y offset value or adjust it directly on the canvas by pulling on the blue handle to the left of the artboard. Now in the page is previewed and the panda is clicked on it settles a touch above that layer. I can now quickly go through and wire up the other interactions including the animals in the buy button at the top. And, being able to drag directly to the layer the anchor point should scroll to makes the process very seamless. Lastly, I can wire up the back to top icon that's visible when scrolled below the header. All right! Let's see it all in action.
I can start by clicking on the various animals that are pinned to the side of this page, jump back to the top and right back to the bottom to purchase. Here's one more example showcasing anchor links on mobile. On some applications, especially those that serve social feeds like this one tapping on the navigation bars icon takes you back to the top. I'll select the element that I want to tap on, then drag the handle to the group at the top of the application. You know what before we preview this, let's add a touch of fun. To go along with this interaction, an additional action can be added where I can assign a sound effect that will trigger when tapped. I'll go with a subtle popping sound. And, now when the screen is previewed I can scroll down to view the feed, then tap on the icon to return to the top. One more time to listen to the audio.
And, that's a look at how anchor links can be created using Adobe XD. For more tips and tricks head on over to letxd.com and I'll see you all soon.
In this tutorial, learn how to use Adobe XD anchor links to create interactive buttons that navigate to various points within a page when clicked. Anchor links in Adobe XD are great for prototyping single page apps and marketing websites where top-level navigation scrolls to different sections in the page. Anchor links can be created in prototype mode by clicking and dragging the blue arrow to a section elsewhere on the design.
