Welcome back with another Adobe XD tutorial. This tutorial shows us how to add live hyperlinks to our prototypes using Adobe XD. That’s right, when you create your prototype, you can link externally to another website. Aim to make your prototypes that are as close as possible to the final product and increase the accuracy of user experience testing. In the event of a problem, this will ensure that money can be saved down the road in the development.
Let’s get started. Here is my dummy site. The social media icons float on the right-hand side or maybe yours are docked at the bottom of the footer. Switch the working stage from Design to Prototype. Zoom in on the social media icons. The social media icons are grouped. I will double-click the first logo to select my first icon. A blue bounding box will appear around the YouTube logo with a blue arrowed connection.
On the right-hand side of the Property Inspector, click the ‘+’ next to Interaction. I want users to click or tap on the YouTube logo, so the tap is my trigger. Next is my action, type. Choose Hyperlink from the drop-down menu and enter the URL. I’ll copy and paste my link. Click Enter or Return to accept this hyperlink.
Let’s try this out. Clicking the play button in the top right corner of your prototype test will open a new browser window. Scroll down and hover over the icon. Hopefully, you’ll see the hand icon, which tells us it’s a live link. Click on it, and it should take you to the website.
There you have it, that should work. If it didn’t work, make sure you have the correct website including the HTTPS info.