Anchor links

In Adobe XD, with anchor links you can scroll to specific sections of your artboard. You can use anchor links to improve the user experience when you design a long page website or when you have content with massive sections of text.

 

1. We’ll use this design to exemplify a quick navigation to a specific section on the artboard. In Prototype mode, wire the object that you want to turn into an anchor link to the object that you want to link to. In this example I will link the “Pricing” text with the “Pricing” group. 

 

2. In the Property inspector, Adobe XD will automatically set the trigger to Tap and the action to Scroll To.

Use the Y Offset setting to adjust the exact point where you want to scroll relative to the top edge of the wired object. This can be adjusted numerically from the Property inspector or using the handle to the left of the artboard.

The maximum duration that you can set for this kind of action is 5 seconds.

 

Click the Play button to preview your prototype and by clicking on the anchor link, you will get to the linked section in one second.