Publish your prototype, design specs, and cloud documents and share it with stakeholders by providing a public or private web link.
Wood table

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

  • Publish prototypes to the web: You can provide a public or a private 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. You can provide a public or a private web link for stakeholders to view or comment on your design specs. For more information, see Publish design specs for developers

To learn more about sharing prototypes and design specs, do check this video.


Notă:

From Adobe XD 9.0 release onwards, Adobe has removed the BETA label from design specs. 

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.

Notă:

If you are on the free XD starter plan, you can only share one prototype and one design specs at a time. If you want to stay on the free XD starter plan, delete the existing links before sharing a new one.

For information on deleting prototypes and design specs, see Delete published prototypes and design specs

To upgrade your plan from within XD, click Help > Upgrade. You can also click Upgrade Now from the pop-up screen that opens when you try to publish more than one prototype or design specs.

Share cloud documents for review

  1. Open the XD document that you want to share.

  2. Click Share button and select Share Document.

    Share options
    Share options
  3. You are prompted to save the document to the cloud. Click Save as option.

    Share document options
    Share document options
  4. Edit the title if needed. The destination of the document is set to cloud documents by default. Click Save option.

  5. In the Invite tab, add the email address of the invitees, add optional message if any, and click Invite

    Share cloud document
    Share cloud document

You can share the entire project (or a subset of artboards in a single flow) with reviewers by providing them a web link 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.

Notă:

Artboards should be aligned vertically to maintain sequential order. If the published prototype does not maintain the order of artboards, adjust the position in the original file, and republish the prototype.

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

    Share prototype options
    Share prototype options
  2. Click Share button and select Share for Review.

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

    • Allow Comments: This option is selected by default. This option enables you to provide  feedback on the prototype. For information on how reviews work in XD, see working with comments in the review workflow
    • Open in Full Screen: Select this option if you want the prototype to open in full screen when a user clicks 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 you to see hotspot hints in the prototype. If a user clicks in an area that is not interactive, the areas that are interactive are outlined thus indicating 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 are required to type in the password to view the prototype. For more information, see Password protect a shared prototype.
    Share for Review options
    Share for Review options
  4. To generate a URL, click Create Public Link or New Private Link (BETA).

    Notă:

    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. If you want to generate a new web link, select New Link. If you want to edit the private link you have previously shared, click Edit Private 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.

    Notă:

    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.

Notă:

  • If you publish your design without interactions, all your artboards are uploaded and you 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 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, and also use the commenting option to share feedback.

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

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

    Share prototype options
    Share prototype options
  2. Click the Share button and select Share For Development.

  3. Edit the title if needed and click Create Public Link or New Private Link (BETA).

    Share for Development options
    Share for Development options

    Notă:

    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.

    Initiating the upload of images
    Initiating the upload of images
    Progress bar showing the upload of images
    Progress bar showing the upload of images

  4. If you have selected Public Link, 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.

    If you have selected New Private Link (BETA), enter the email addresses of the reviewers, add an optional message, and click Invite.

    Notă:

    Unlinked artboards are not published in the design specs.  The position of the artboards in the UX flow view is identical 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 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.

    To edit the shared private link, click Edit Private Link.

The developer can then click the link sent by the designer. Or else, the developer can:

  • View the design specs in the shareholder portal.
  • Inspect the design specs for measurements, character styles, and colors used in the prototype.
  • Use the commenting option to share feedback. 

When commenting on a Design Spec or Prototype, reviewers/developers can use @ mention to call out certain users to share their feedback and notify them through email or CC application. @mention provides hints with appropriate names and restricts their capability based on the invite settings set in the Publish dialog box.

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

Notă:

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

Publish prototypes and design specs using private invites (BETA)

Notă:

Private invite is now a Beta feature. A feature labeled Beta means that:

  • The feature addresses a subset of use cases within a larger workflow.
  • Adobe expects requests for more depth and breadth in functionality, which are addressed 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 Adobe delivers.

  1. Open the Adobe XD file that you want to share.
  2. Click the Share button and select either Share For Review or Share For Development.

  3. Select Create Private Link.

    New private link
    New private link
  4. In the Invite tab, add the email address of the invitees, add optional message if any, and click Invite. The stakeholder receives comments and invitations through email notifications.

    The commenting notification email provides a direct link to a specific comment on the artboard, not just the home artboard. You can click the comments displayed in the email notifications, as clickable direct links to the corresponding artboard.

    When you click an artboard name, it opens the prototype link and directly leads the user to corresponding artboard and automatically opens the comments panel. You can scroll down to the first comment or reply that was mapped to the artboard in the email notification.

    Share invites
    Share invites
  5. To display the shared prototype on the web, click the received email notification.

    Notă:

    Ensure that you are signed in using your Adobe ID and the email address mapped to your account.

  6. You can log in to the Your Work section of Creative Cloud and do the following:

    • Designers: 
      • View the prototypes or design specs shared with the stakeholders.
      • View the received artifacts in the Shared with You section. 
    • Reviewers:  
      • View the prototypes and design specs received for review within the Shared with You section.

    For more information on the various options in Your Work, see Browse, sync, and manage assets.

    Designer view
    Designer view
    Reviewer view
    Reviewer view

Using private invites on web

Some organizations prohibit sharing the Adobe XD designs artifacts through public links without a secure invite workflow. This prevents enterprise users from sharing XD prototypes and designs specs with the stakeholders.

Using this feature, you can publish a secure invite from the web. You can invite users from within your organization with their names, and other users with their emails.

Notă:

The workflow to add/modify users is the same as from within the XD desktop app.

  1. Publish the design specs from within the Adobe XD app and share the link.

  2. Click the Invite button, and in the text field, invite people with their email ids.

    Click the Invite button and add users
    Click the Invite button and add users
  3. In the Invite dialog, you can view the name of the Owner, and the users who have accepted the invite. To remove a user, click Remove.

    Remove a user
    Remove a user

Password protect prototypes and design specs

You can restrict access to your prototypes and design specs by adding password protection. You can password-protect new prototypes or design specs only.

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

To password protect a new prototype or design spec:

  1. Click the Share button and select Share for Development or Share for Review.

  2. After setting the various options, click Require Password. In the password field that appears, type in a password that satisfies the password rules. The password must have at least eight characters, and include one of each of these characters: A-Z, a-z, and 0-9.

    Adobe XD cloaks the password characters when you create a shared link for prototypes and design specs. To reveal the password as you type, click the visibility icon. Click Create Public Link button. When you share a prototype or design spec, the password is not saved to improve security.

    Password protect your design specs
    Password protect your design specs

    Notă:

    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, only the reviewers in possession of that password can access the prototype or design spec. 

    XD does not store your password or send it to reviewers. Share the password along with the published prototype or design spec link to reviewers.

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

    Remove password: To remove password protection of a shared prototype or design spec, deselect the Require Password check box. You can then update the existing link or create a link.

    Forgot password: Because XD does not store your password, if you forget it, you can set a new password for your prototype or design spec 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.

The reviewer can also access the prototype from the Your Work section of Creative Cloud (assets.adobe.com) to view and comment on the artifacts in a unified browser interface.

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 are required to create a new link.

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

Delete published prototypes and design specs

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

  1. Click the Share button. Then click Manage Links.

    Notă:

    If you are on a Starter plan, and try to publish more than one prototype or design specs, you are prompted to either upgrade your plan or manage links. Click Manage Links to delete the existing prototype or design specs link.

    The Your Work section of Creative Cloud opens in your browser.

    Manage links option
    Manage links option
  2. In the Published section in Your Work, click the Permanently Delete icon corresponding to the prototype or specs, and confirm that you want to delete it. You can also select multiple links and delete it at once.

    Deleting links from assets.adobe.com
    Deleting links from assets.adobe.com

The review workflow

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

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

An author can also control which assets are visible for a stakeholder when sharing the assets for review from a single portal.

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

For more information on the workflow, see:

Review workflow
Review workflow

The author workflow

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

  1. When you are ready to share your prototype or design specs for review, click the Share button in the upper-right corner of the XD screen. For prototypes, select Share for Review; for design specs, select Share for Development.

  2. If you select Share for Review, in the pop-up window that appears, make sure that Allow Comments is checked, and click Create Public Link or New Private Link (BETA).

    If you select Share for Development, click Create Public Link or New Private Link (BETA).

    Note: If you have already shared the prototype or design specs, you can choose to update the old link.

  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.

  4. You receive notifications when reviewers add comments in the shared prototype or design specs links.

    In the notification mail:

    • Click the artboard name to open the prototype or design specs link to navigate to the corresponding artboard.
    • You can scroll down to the first comment or reply that is mapped to the artboard.

    In the link, you see a View Comments icon in the upper right corner. Expand the View Comments icon to open the comments panel and view the stakeholder comments for that artboard.

  5. The View Comments icon is appended with a marker and a number to indicate the number of unresolved comments in that artboard.

    The marker and the number are visible in the View Comments icon:

    • For published prototype links: When the comments panel is either in collapsed or open view.
    • For published design specs links: When the focus is either on the comments panel or on the properties panel.

    If there are no unresolved comments in the artboard, the View comments icon shows up without the marker or number, for both collapsed and open views of the comments panel.

  6. Go back to Adobe XD and update your prototype or design specs as necessary. 

    You can then resolve the comments from the Comments panel of the prototype or design specs. To resolve a comment, click Resolve. 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.

  7. When you are ready to share the updated prototype or design specs, click the Share button, and select 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 link and share it with reviewers.

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

  8. To complete the prototype review (Share for Review), click the Share button, deselect Allow Comments, and update the link.

The reviewer workflow

Reviewers need to sign in to comment on a prototype using an Adobe ID. If you are an enterprise user, get in touch with your account administrator to provide permissions and credentials.

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

An author can control visibility of relevant assets for the stakeholder to review. 

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 View 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 top of the comments panel. When prompted to provide a name, type a name, and enter the CAPTCHA code.

    Notă:

    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, which the reviewers need to click. The hints appear when you click a space in the artboard where there is no interactive element.
      Note: These hints do 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. 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 top of the comment panel. To add a new line to the comment, press Shift + Enter.

    You can also switch from a regular comment to a pinned comment. A commenting notification email provides a direct link to the artboard where a comment is made, and not just the home 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.

    If you type a comment in the edit field and add a pin, and then navigate to another artboard, the comment field is empty for the other artboards. When you return back to the original artboard, the comment and pin are preserved. You can also use Cancel to cancel an added comment in the comment field.

    Notă:

    To move a pin after you place it, drag it to another place on the canvas. You can only move pins that you have placed.

    Drag the pin to a specific portion of the canvas, and type in a comment
    Drag the pin to a specific portion of the canvas, and type in a comment

    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

    You can also use @ mention to display users invited to access a private invite design. In the case of public prototypes and design specs, only users who have commented at least once, appear in the reviewer list. The reviewer @ mentioned by name, receives a notification through mail, and from the Creative Cloud desktop application. When the notification is clicked, it directs them to the referenced artboard.

    @ mention hint dialog box provides the following options:

    • Public link: Lists the reviewers who have commented in the prototype or design specs at least once.
    • Private link: Lists the stakeholders who have been invited to prototype or design specs link.

Shared with you (BETA)

Designers and reviewers can access private prototypes and design specs from the Shared with You (BETA) section of Your Work. Shared with You also shows private artifacts and shared folders. 

For more information on using Your Work as an enterprise customer, see Asset settings.

Designers and reviewers have a different user experience in the Your Work section of Creative Cloud based on their roles. 

If you are a designer, you can view the following additional options in Your Work:

  • Shared with You (BETA): Displays the prototypes and design specs that have been shared with you for review.
  • Published: Shows a list of your published prototype and design specs links.

If you are a reviewer, you can view only the following options in Your Work:

  • Shared with You (BETA): Shows a simplified stakeholder experience that displays the prototypes and design specs shared with the stakeholder for review. You can also click the ellipses next to the shared prototype name and opt to remove the prototype or design specs and leave the review cycle.
  • Files: Shows an empty folder unless you have received files for review from the reviewer or if you have uploaded and managed your assets on the Creative Cloud.

This view helps the reviewers focus on their main task of reviewing and commenting on the artifacts  shared with them.

For more information on the various options in Your Work, see  Browse, sync, and manage assets.

Notă:

This feature is applicable only for the private links of design specs and prototypes shared with the reviewers.

Designer view
Designer view
Reviewer view
Reviewer view

Designer workflow

  1. After creating a private link, select Open in browser icon in the Invite tab to automatically sign you into the web view of the asset.

  2. Click Your Work on the upper left corner of the screen to automatically display the Published view in Your Work showing your prototypes and design specs.

    Designer view
    Designer view
  3. Press the browser back button to navigate to the web view of the prototype or design specs.

Reviewer workflow

  1. Click the link received in the review workflow mail to access the prototype for commenting (if you are logged in with your Adobe ID).

    Notă:

    Though you do not require a paid Adobe ID to access the prototype, ensure that you have signed in to your Adobe account with the same email address from the review workflow mail.

  2. Click Shared Items in the web view of the prototype or design specs to direct you to the Your Work section of Creative Cloud. If your Creative Cloud account is mapped to the email address, or if you are already logged into your Creative Cloud account, you are automatically directed to Your Work.

  3. The reviewer view in Your Work displays the Shared with You (BETA) and Files options. You can also click the ellipses next to the shared prototype name and opt to remove the prototype or design specs and leave the review cycle.

    Shared with you: Reviewer view
    Shared with you: Reviewer view

Această lucrare este oferită sub licență Atribuire-Necomercial-FărăModificări 3.0 Ne-adaptată Creative Commons  Postările pe Twitter™ şi Facebook nu sunt acoperite de condiţiile de licenţiere Creative Commons.

Prevederi legale   |   Politică de confidențialitate online