Create hyperlinks

Last updated on Mar 21, 2022

Learn how to link to external web pages from Adobe XD prototypes.

Any text, object, or component in your design can link to an external web page or an email address. After you create a hyperlink, you can preview it, and share the design specs with stakeholders.

Create a text hyperlink

To hyperlink text to a web page or an email address, perform the following steps:

In Design mode, select the text inside the text object that you want to hyperlink.

In the Insert URL here field within the Text section of the Property Inspector, do the following:

Link to a secure web page

To link to a secure web page (https), type the URL of the web page. Example: https://www.adobe.com.

Link to an email address

To link to an email address, type mailto: followed by the email address of the recipient. Example: mailto:john@xyz.com.

Once you define a text hyperlink in Design mode:

On canvas, the hyperlinked text gets underlined by default.
If only a portion of the text is hyperlinked, when you select the text object on canvas, you see a dash (—) in the Insert URL here field.
In Prototype mode, if a text object that contains hyperlinks is selected, the hyperlinks will be displayed in the Property Inspector.
You can edit a text hyperlink in Design or Prototype mode.

A portion of the text object is hyperlinked (Design mode)

Two text portions hyperlinked inside a text object (Prototype mode)

When you publish and share design specs link, stakeholders can inspect the hyperlink.

Create an object or component hyperlink

To hyperlink an object or a component to a web page or an email address, perform the following steps:

Switch to the Prototype mode, and select the object or component that you want to hyperlink.

Click the blue arrow on the object, and in the Property Inspector, set the Trigger to Tap, Keys & Gamepad, or Voice.

Set the Action Type to Hyperlink.

In the Destination field, do the following:

Link to a secure web page

Link to a web page — Link to a secure web page

To link to a secure web page (https), type the URL of the web page. Example: https://www.adobe.com.

Link to an email address

To link to an email address, type mailto: followed by the email address of the recipient. Example: mailto:john@xyz.com.

To preview the hyperlink, click Desktop preview.

When you click a hyperlink, it will always open in a separate browser tab.

When you publish and share design specs link, stakeholders can inspect the hyperlink.

Hyperlink text in Design and Prototype modes

In addition to defining a hyperlink for text in Design mode, you can define a hyperlink for its text object in Prototype mode. The hyperlink defined in Design mode takes precedence over the hyperlink in Prototype mode. In Desktop preview or prototype link:

When you click a portion of the text that has no defined hyperlinks, the hyperlink defined in Prototype mode opens.
If you hyperlink the entire text within a text object in Design mode, and hyperlink the text object in Prototype mode using the Tap trigger, the Prototype mode hyperlink will not function.

Text fully hyperlinked in Design and Prototype modes

Things to watch out for

XD app:

When you add a URL with a protocol other than https or mailto, or without a protocol, or the URL has an invalid domain, you get a warning. Correct the URL.

Warning when you don't use https or mailto protocols

Desktop preview and prototype link:

When you click a hyperlink that has a protocol other than https or mailto, or doesn't have a protocol, or the URL has an invalid domain, the URL does not open. You get an error message at the bottom of the screen.
When you click a hyperlink that has a valid domain, XD enforces a security check on the linked website. If the security check fails, you get a security warning. You can choose to proceed or exit the URL.