By Dani Beaumont
When you're working on a design project, the prototype you produce in Adobe XD is often just part of the overall story. With hyperlinks, it's easy for you to link out to a variety of related resources, bringing access to the entire project into your experience. Let me show you what I mean.
I'll begin here in Design mode with this text container. What I'd like to do is add hyperlinks to some of the terms that I'm using within the paragraph. I'll switch over to a web browser where I have a destination page already loaded. I'll copy the URL to that page to the clipboard. Then back here in XD, I'll select the text container. Then I'll select the specific word or words that I'd like to link to. Here in the Properties Inspector, in the Text area, I'll paste the URL from the clipboard. When I press Enter on the keyboard, XD does a quick validation of that link. Notice that the selected text back here on the design canvas now has an underline, letting my users know that it includes a hyperlink.
I can do this a second time within the same text container by once again selecting some text, then pasting a URL in the Properties Inspector. I can always edit that URL directly. So I'll go ahead and alter this to point to a second wiki page. When I switch over to Prototype mode, notice here in the Properties Inspector, I can see each of those links that have defined within the text container.
Now, in addition to text hyperlinks, I can also link to other web destinations. I could link to a specific email address using a mailto hyperlink. You can see an example of that here on the left-hand side of the artboard. When I click on the mail icon, notice in the Properties Inspector that I have a mailto URL. I could also link to a downloadable file using a public URL. Lastly, I could link to another XD prototype that I might have already published.
Let me show you that workflow for this Explore Prototype button here. I'll switch over to the Share mode of the application, then in the link dropdown, I'll select the carousel flow prototype that I published earlier. Next, I'll click on the link icon to copy it to my clipboard. To apply this to the button now, I'll go ahead and switch back to Prototype mode and I'll click on the button to select it.
Notice that the object already has a hover interaction defined to show a rollover state. That's fine. I'm going to go ahead and click the plus sign to add a second interaction, this time selecting Tap with the hyperlink as an Action. And then I'll paste in that prototype link.
With that all set, I'll update my prototype and I'll load it into a web browser. Notice when I click on the carousel feature definition links, each opens to a separate page in a separate tab. Back in the prototype, when I click on Explore Prototype, my interactive prototype opens up in a new tab.
I think you'll agree that hyperlinks offer up a whole new world of prototype integration. I encourage you to give this feature a try.
Add links to online resources and link XD prototypes to each other with hyperlinks. In this tutorial, you'll see how to set up Tap interactions to add buttons and text links to your designs. Copy a web page link to your clipboard, then paste the URL in the Hyperlinks field in the Properties Inspector. Or publish an XD prototype, copy the live link to your clipboard, and add a hyperlink to a button graphic so users can seamlessly move between prototypes. Simulate realistic experiences with mailto links and links to download files, like ZIPs and PDFs.
