Create hyperlinks

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:

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

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

    Link to a secure web page

    Link to a secure 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

    Link to an email address
    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)
A portion of the text object is hyperlinked (Design mode)

Two text portions hyperlinked inside a text object (Prototype 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:

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

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

  3. Set the Action Type to Hyperlink.

  4. 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

    Link to an email address
    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.

  5. 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.

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
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.
Error message for unsupported protocols and invalid domains
Error message for unsupported protocols and invalid domains

Security warning for websites that fail security check
Security warning for websites that fail security check

Learn more

Watch this 3-minute video to learn more about working with hyperlinks in XD.

Related resources

Have a question or an idea?

ask the community

Have a question to ask or an idea to share? Come and participate in Adobe XD Community. We would love to hear from you and see your creations!

Get help faster and easier

New user?