Learn how you can easily share your prototype with others by providing a web link for them to view your prototype on a web browser.

You can share your designs and prototypes online with stakeholders in multiple ways:

Prerequisites

To share prototypes using the Adobe XD Share Online feature, you must be logged in with an Adobe account to either the Adobe Creative Cloud App or any other Adobe application.

You can share the entire project (or a subset of artboards in a single flow) with reviewers by providing them a web link for them to view your prototype on a web browser.

For example, if you only want to share artboards created for mobile devices, then select the Home artboard for the mobile devices and generate a new link. All artboards connected with the Mobile Home device artboard are included in the prototype.

  1. Open the Adobe XD file that you want to share.

  2. Click the Share Online icon.

  3. Specify a title for your prototype.

  4. Optionally, add a prototype icon. This icon will appear on a users home screen if the shared URL is added to a mobile home screen.

  5. Click New Link.

    A URL is generated.

    When you make changes to your design and want to refresh the URL that you previously generated, click Update Link.

  6. Copy and paste the generated URL into your email client or other communication channels to share with the others.

Note:

 

  • If you share your design file without first adding interactions, all your artboards are uploaded and users will be able to navigate using the keyboard arrow keys. The order of your artboards will be from the upper left and move to the right.
  • If your design includes interactions, only those artboards connected to the Home artboard are uploaded and shared.

You can delete shared links to your prototype in two ways:

Using the shared link:

  1. Click the link of your shared prototype.
  2. On the Adobe Creative Cloud website, click the trash can icon at the upper left. You are asked to log in to ensure that you are the author of the prototype.

Using Manage Links option in Adobe XD:

  1. Click the Share Online icon.
  2. In the share pop-up dialog box, click Manage Links. The Adobe Creative Cloud website opens in your browser, where you can manage your prototypes.
  3. Select the prototype to delete and click Delete.

Hints in shared prototypes

Hotspot hints are available for anyone viewing a shared prototype. These hints indicate the elements that are interactive and are to be clicked by reviewers. The hints appear when a reviewer clicks on a space in the artboard where there is no interactive element.

Ability to view prototypes in full-screen mode

Shared prototypes can be viewed in full-screen in the browser and in Preview mode.

Viewers have to click the Full-screen icon on the upper right corner of the screen while viewing the shared prototype. The prototype then expands to fill the entire screen, allowing them to see all the design details clearly. 

To exit full-screen mode, viewers have to press Esc.

Adding comments to shared prototypes

Adobe XD facilitates easy commenting by your stakeholders on shared prototypes.

  1. Once you are ready to share your prototype for review, click the Share Online icon.

  2. In the popup that appears, select Allow Comments and click Create Link.

    Note: If you have already shared the prototype, you can choose to update the old link with the commenting feature enabled.

  3. Click Copy Link and paste the link in your communication channels, such as Slack or Email, to share with your stakeholders.

    When your reviewers open the shared link in a browser, they will see a commenting icon on the upper right corner.

  4. Reviewers can click the Show Comments icon to open the comments panel. They can either sign in using their Adobe ID or sign in as a guest.

    1. To sign in using Adobe ID, the reviewers can click Sign In and provide their Adobe credentials.

    2. To sign in as a guest, reviewers can click Comment As a Guest at the bottom of the comments panel. When prompted to provide a name, they need to type a name, and select I'm Not a Robot. They then need to respond correctly to a simple challenge, and click Submit.

      Note:

      If the reviewers sign in as a guest, comment, end the session (by closing or refreshing the browser), and log in again as a guest, they will have no control over the previous comment. On the other hand, if the reviewers sign in using their Adobe ID, they can edit their previous comments.

  5. Reviewers can type in comments at the bottom of the comment panel. They can also pin their comments to indicate specific areas in the artboard.

    To pin a comment, reviewers can type in their comment, click Pin to Artboard, and then drag the pin to the specific location on the artboard.

    Type in a comment, and then drag the pin to a specific portion of the artboard
    Type in a comment, and then drag the pin to a specific portion of the artboard

    Adobe XD assigns a number to every pinned comment. The comments in the comments panel also reflect these numbers allowing designers to easily identify the context of the comment.

  6. As the author or the designer who initiated the review, you will receive a notification as soon as a reviewer adds a comment. Click the notification to open the shared prototype and view the comments.

  7. Go back to Adobe XD and update your protoype as necessary. 

    You can then resolve the comments from the Comments panel of the shared prototype. To resolve a comment, click Resolve Comment. Resolved comments disappear from from your comments list, but you can view them by clicking View Resolved Comments. You can also unresolve a resolved comment using the Move to Unresolved option in the Comments panel.

  8. Once you are ready to share the updated prototype, click the Share Online icon, click Share Again, and click one of the following options:

    • Update Link: To make the updated prototype available at the same link that you created earlier and shared with your reviewers. 
    • New Link: To create a new link and share it with the reviewers.

    You can open the link in a browser and choose to reply to the comment that you addressed.

  9. If the reviewers are viewing the prototype link in a browser, they can simply refresh it to view the changes instantly (if you updated the earlier link).

  10. To close the review, you can click the Share Online icon, uncheck Allow Comments, and update the link again.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy