Publish your prototype and/or design spec and share it with stakeholders by providing a web link.

You can publish your prototypes and/or design specs, and share links to them with reviewers or stakeholders. XD allows you to publish in the following different ways:

  • Publish prototypes to the web, and provide a web link for stakeholders to view or comment on your prototype. You can also embed the prototype in any website that supports iFrames. For more information, see Publish prototypes.
  • Share design specs with developers. Developers can inspect the designs for measurements, colors, and character styles, and copy them. For more information, see Publish design specs for developers

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 desktop application, 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 publish artboards created for mobile devices, select the Home artboard for the mobile devices and generate a new link. All artboards connected with the Home artboard are included in the prototype.

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

  2. Click the  icon and click Publish Prototype.

  3. Specify a title for your prototype. Then set the following prototype options:

    • Allow Comments: This option is selected by default. This option enables users to provide  feedback on the prototype. For information on how reviews work in XD, see The review workflow
    • Open in Full Screen: Select this option if you want the prototype to open in full screen when a user clicks on the link. The prototypes open in full screen at 100% of the actual size, allowing viewers to get a realistic view of the design experience. If the design does not fit on the screen at 100%, the user has to scroll to view the complete screen.  
    • Show Hotspot Hints: This option is selected by default. This option allows users to see hotspot hints in the prototype. If a user clicks on an area that is not interactive, the interactive areas are outlined showing the clickable areas.
    • Require Password: This option enables you to add a security layer to the shared public prototype. When you select this option and set a password, reviewers need to type in the password to view the prototype. For more information, see Password protect a shared prototype.
    Password protect your prototypes
    Password protect your prototypes
  4. Click Create Public Link.

    A URL is generated.

    Note:

    If you have set up password protection, you create a password protected public link.

    If you edit your design and want to refresh the URL that you previously generated, click Publish Prototype again and then click Update Link. If you want to generate a new web link, select New Link.

    Create a new link to the prototype or update the existing link
    Create a new link to the prototype or update the existing link
  5. Click Copy Link to copy and paste the generated URL into your email client or other communication channels to share with the others.

    To open the published prototype in a web browser, click Open Link.

    To copy the embed code, click Copy Embed Code. You can then paste this code into any website that supports inline frames.

    Note:

    You can also deep-link to specific artboards in your design. Click the link to your shared prototype, navigate to a specific artboard, and then copy the URL for that artboard. You can then share that URL with reviewers.

Note:

  • If you publish your design without interactions, all your artboards are uploaded and users can navigate using the keyboard arrow keys. The order of your artboards is left to right, top to bottom.
  • If your design includes interactions, only those artboards connected to the Home artboard are uploaded and shared.

Password protect a shared public prototype

Note:

You can only protect prototypes with a password, not Design Specs.

You can secure your prototypes by adding password protection while creating shared prototype links. You can password protect new prototypes only.

To password protect already shared prototypes (created using XD versions 6 or earlier), see Password protect existing prototype links

To password protect a new shared prototype link:

  1. Click the  icon and click Publish Prototype.

  2. After setting the various prototype options, click Require Password. In the password field that appears, type in a password that satisfies the password rules, and click Create Public Link button.

    The password must have at least 8 characters, and include one of each of these characters: A-Z, a-z, and 0-9.

    Password protect your prototypes
    Password protect your prototypes

    Note:

    If your password does not match the password rules set by XD, the Create Public Link does not get enabled.

    After you set a password for a prototype, only the reviewers in possession of that password can access the prototype. 

    XD does not store your password or send it to reviewers. You need to share the password along with the published prototype link to reviewers.

  3. Change password: To change the password of an already published prototype, click inside the password field and type a new password. You can then update the existing link, or create a new link.

    Remove password: To remove password protection of a shared prototype, uncheck the Require Password checkbox. You can then update the existing link or create a new link.

    Forgot password: Because XD does not store your password, if you forget it, you can set a new password for your prototype and update the link.

A reviewer can click the prototype link you share via email, Slack, or other messaging channels, and is then prompted to enter the password. For more information, see The review workflow.

If you have created public prototype URLs using XD version 6 or earlier, you cannot update those existing links directly by adding password protection. You need to create a new link.

However, after you create a new link using XD version 7, you can update the link with passwords any time you want.

Publish design specs for developers

The Design Specs (Beta) feature empowers you to share design properties of your files automatically. By publishing design specs, you provide developers key information like element height, width, size, alignment, relative spacing between two icons/elements, colors, and typography.

Developers can view the sequence and flow of artboards in addition to detailed specs for each artboard, complete with measurements, colors, and character styles.

For information on how developers can inspect published design specs, see Use design specs published from Adobe XD.

Note:

Design Specs is currently a Beta feature. A feature labeled Beta means that:

  • The feature addresses a subset of use cases within a larger workflow (that is, designers handing off designs to developers).
  • We expect requests for additional depth and breadth in functionality which we’ll look to tackle before removing the Beta label.
  • The feature’s availability and delivery are subject to change.
  • You can expect the same quality and performance as you would of any other feature we deliver.

  1. Open the Adobe XD file that you want to hand off to developers.

  2. Click the  icon, then click Publish Design Specs BETA.

    Publish design specs
    Publish design specs
  3. Edit the title if needed and click Create Public Link.

    Note:

    XD sets the default units of measurement based on the option set for the Home screen. 

    • iOS: Default unit is pt
    • Web: Default unit is px
    • Android: Default unit is dp
    • Custom: Default unit is px

    These default units are not editable.

    XD quickly publishes the design specs. XD first publishes the design specs at 0.5x resolution, and at the mid-point of the publishing process, starts to publish the 2x versions. This feature ensures that you have a usable link faster.

    The 0.5x images in the design specs automatically refresh to 2x after the publishing process is complete.

    Progress bar showing the uploading of 0.5x images
    Progress bar showing the uploading of 0.5x images
    Progress bar showing the uploading of 2x images
    Progress bar showing the uploading of 2x images

  4. Click Copy Link to copy the public link and send it to a developer for inspection. To open the design specs in the default browser, click Open Link.

    Note:

    Unlinked artboards are not published in the design specs.  The position of the artboards in the UX flow view are identitical to the position of the artboards in the design file.

  5. After publishing the design specs, you can continue to make changes to your design. When you are ready to republish it, specify New Link if you want to create a new link to the design specs.

    Click Update Link if you want to update the existing link with the changes you have made. The developer viewing the design specs can see your changes on refreshing the link.

The developer can then click the link sent by the designer and inspect the design specs for measurements, character styles, and colors used in the prototype. 

For more information, see Use design specs published from Adobe XD.

Note:

If you have any issues publishing or viewing published design specs, see Workarounds for common design spec errors for tips on resolving the issue.

Delete published prototypes and specs

You can delete shared links to your prototype using the Manage Published Links option in XD.

  1. Click the  icon. Then click Manage Published Links.

    Manage published links
    Manage published links

    The Adobe Creative Cloud website opens in your browser.

  2. In the Shared Links section in the website, click the Delete icon corresponding to the prototype or spec, and confirm that you want to delete it.

    Deleting a Design Specs link from assets.adobe.com
    Deleting a Design Specs link from assets.adobe.com

The review workflow

Adobe XD facilitates easy collaboration between designers and stakeholders on shared prototypes. 

After an author is done with the design process, they can create a web link to the prototype and send it to the reviewer. The reviewer annotates the prototype with their feedback. 

The author can view the feedback, make changes, and if required send the prototype web link to the reviewer for a second look. 

For more information on the workflow, see:

High-level overview of the review workflow
High-level overview of the review workflow

The author workflow

When prototypes are ready for review, authors can share them with reviewers and enable commenting. Authors receive a notification when comments are added to the prototype. They can then update the prototype, and share it again with reviewers.

  1. When you are ready to share your prototype for review, click the icon, and click Publish Prototype.

  2. In the pop-up window 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 an instant messaging or email application, 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. You will receive a notification when reviewers add comments to the prototype. Open the web link and view the comments. You can also choose to reply to comments you have received.

  5. Go back to Adobe XD and update your prototype as necessary. 

    You can then resolve the comments from the Comments panel of the prototype. To resolve a comment, click Resolve Comment. Resolved comments disappear from your comments list, but you can view them by clicking View Resolved Comments. You can also move a resolved comment back into the Unresolved section in the Comments panel.

  6. When you are ready to share the updated prototype, click the  icon, 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 reviewers.

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

  7. To close the review, click the  icon, deselect Allow Comments, and update the link.

The Reviewer workflow

Reviewers need to sign in to comment on a prototype - using an Adobe ID or as a guest. 

If the prototype is protected by a password, you also need to enter the password to view the prototype.

Entering a password to view a password protected prototype
Entering a password to view a password protected prototype

After you are signed in, click the Show Comments icon to open the comments panel. 

  1. To sign in using Adobe ID, click Sign In and provide your Adobe credentials.

    To sign in as a guest, click Sign in as a Guest at the bottom of the comments panel. When prompted to provide a name, you need to type a name, and enter the CAPTCHA code.

    Note:

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

  2. Use the following tools to get the best viewing experience:

    • Hotspot hints: 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 you click a space in the artboard where there is no interactive element.
      Note: These hints will not appear if the designer has disabled them while sharing the prototype.
    • Full-screen mode: View prototypes in full-screen in the browser and in Preview mode. You 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 you to see all the design details clearly. To exit full-screen mode, press Esc.
  3. Type in comments at the bottom of the comment panel. To add a new line to the comment, press Shift + Enter.

    You can also pin your comments to indicate specific areas in the artboard. To pin a comment, type in your comment, click Pin to Artboard, and then drag the pin to the specific location on the artboard.

    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.

    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.

    The author can view the comments and mark them as resolved when done. You can check your resolved comments by clicking View Resolved Comments.  If you think your comment has been wrongly marked as resolved, you can click Move to Unresolved to keep the comment open.

    Unresolving a comment
    Unresolving a comment

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