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. If you want feedback from reviewers, select Allow Comments.

    Publishing prototypes
    Publishing prototypes

    For information on how reviews work in XD, see The review workflow.

  4. Click Create Public Link.

    A URL is generated.

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

    Open prototype or copy the link to share with others
    Open prototype or copy the link to share with others
  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.

    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.

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 Prototypes and Specs section in the website, click the Delete icon corresponding to the prototype or spec, and confirm that you want to delete it.

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.

  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 view a prototype using an Adobe ID or as a guest. After you are signed in, click the Show Comments icon to open the comments panel. 

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

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

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

    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

    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.

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