Sharing XD Files (For Review, Developers, etc.)

Topics covered in this Adobe XD tutorial:

Sharing an XD file, Commenting on shared files, Pinning a comment, Updating an existing shared file, Sharing for Development

Exercise Preview

Exercise Overview

In this exercise, you’ll learn how to share XD files with clients or users for testing. They can be static mockups, or clickable prototypes.

Sharing an XD File

1. In Adobe XD, go to File > Open from Your Computer or hit Cmd–Shift–O (Mac) or Ctrl–Shift–O (Windows).
2. Navigate into Desktop > Class Files > Adobe XD Class > Pulse and double–click on Pulse - Prototyping Done.xd to open it.
3. Above the Home Page artboard, double–click on Flow 1 and rename it Pulse Main Flow.
4. At the top left of the window click Share.
5. In the panel the right of the window, click on the View Setting menu and choose Design Review.
6. You can choose who has access. For now, keep it set to Anyone with the link.
7. Notice that Link is already named Pulse Main Flow, the name we just gave to our user flow.
8. Click Create Link.
9. It will take a moment to upload the file to the Creative Cloud. When it’s done, open it in a web browser by clicking the link at the top of the panel.
10. In the browser that opens, you’ll see the Home artboard. Click on the Shop New Collection button to see it works just like it did in XD!

11. Click the Home icon below the preview to return to the Home Page.

    NOTE: Next to the Home icon you can see how many artboards are in the design. You can use the arrows to switch between them, which is helpful if you have not done any prototyping yet and are sharing a static design. You can also switch artboards using the Left and Right Arrow keys on your keyboard.

Commenting on Shared Files

1. If you don’t see the comments area, at the top right of the page click the Comment button .

2. At the bottom right of the page, if you see a Sign In button do the following (otherwise continue to the next numbered step).

   • You could sign in to your Creative Cloud account, but to make things easier, just click Comment as Guest.
   • Type in your name, and if there’s a reCAPTCHA do whatever it asks to verify you’re not a robot.
   • Click Submit.

3. In the comment field type: Looks great! and hit Return (Mac) or Enter (Windows).

   NOTE: When people comment on a shared file, you will be notified through the Creative Cloud app on your Mac/PC. You can see them in the Home tab.

Pinning a Comment

1. You can pin comments to a specific part of the layout so others will know exactly what you’re referring to. In the comment field type: change to same tan as logo and click the pin icon.
2. Click to the left of New Autumn Attire to pin the comment.

Updating an Existing Shared File

1. Keep the page open in the browser, but switch back to XD.
2. At the top left of the window click Design.
3. On the Home Page artboard, select the partially transparent white box behind New Autumn Attire.
4. To open the Libraries panel, at the bottom left of the window, click the icon.
5. Click on the first color swatch (tan).
6. At the top left of the window click Share.

7. Click Update Link.

   NOTE: You could create a New Link if you don’t want to update the existing link. That option is found by clicking the down arrow to the right of the link address (URL).

8. When it’s done uploading, switch back to your web browser.

9. Click the browser’s reload button to see the updated version with the tan background behind New Autumn Attire.

Fullscreen Mode

1. At the top right of the page, click the Fullscreen Mode button .
2. The page will go black so you can concentrate on the content.

3. Hit Esc to exit Fullscreen Mode.

   TIP: To link directly to a full screen file, you can copy the URL when in full screen mode (or in Adobe XD use set the View Setting to Custom and check on the Open in Full Screen option when sharing the file).

4. Switch back to XD.

5. Save the file. (You can leave it open because we’ll be using it again in the next exercise.)

Sharing for Development

XD can create a shareable webpage of design specs and graphic assets. This is meant to help developers inspect the measurements, styles, colors, copy text, extract assets, and more from an XD file… all from a shareable webpage. The developers don’t even need to have XD.

1. In XD, at the top left of the window click Share.
2. In the panel the right of the window, for Title delete the extra text so it’s just Pulse
3. Click on the View Setting menu and choose Development.

4. To the right of Export for click the arrow and choose Web.

   NOTE: For this to work, you must have some items in the file that have been marked for export , which you should have done in the previous exercise.

5. Make sure Downloadable Assets is checked on.
6. Click Create Link.
7. It will take a moment to upload the file to the Creative Cloud. When it’s done, open it in a web browser by clicking the link at the bottom.
8. In the browser that opens, at the top left of the page click the grid button .
9. You should now see all the artboards. Click on the Home Page.
10. At the top right of the page click the View Specs button .
11. On the right you can see Assets that can extracted. Click on one of the Asset thumbnails.

12. At the bottom of the column a download button will appear. Above the button next to Bitmap asset as click on the file format menu and choose JPG.

    NOTE: Vector graphics will have an option for SVG.

    Sadly we can’t set a quality for the JPG, so if you need to optimize this graphic to a small file size, it would be best to download a PNG and use Photoshop to create a better optimized JPEG.

13. On the artboard, click on some text.
14. On the right you can see the font, size, color, etc. Developers can click on almost any of these to quickly copy them (for pasting into code).

15. Mouse over other elements on the artboard to see how far away they are from the selected object.