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.
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.
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.
- 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.
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.
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.
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.
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.
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.
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.
If you have any issues publishing or viewing published design specs, see Workarounds for common design spec errors for tips on resolving the issue.
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:
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.
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.
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.
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.
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.
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.
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.
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.