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

Effective collaboration is the cornerstone of successful design projects. In this hands-on exercise, you'll master Adobe XD's sharing capabilities, learning to distribute both static mockups and interactive prototypes to clients, stakeholders, and development teams. These skills are essential for maintaining design integrity throughout the project lifecycle while facilitating meaningful feedback and seamless handoffs.

Sharing an XD File

The sharing process begins with proper file setup and flow organization. Adobe XD's cloud-based sharing transforms your local designs into accessible, interactive experiences that stakeholders can review from any device.

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. Descriptive flow names help stakeholders understand the user journey and make feedback more targeted.
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. This mode optimizes the interface for gathering feedback rather than development handoff.
6. You can choose who has access. For now, keep it set to Anyone with the link. In production environments, consider using password protection or Creative Cloud organization access for sensitive projects.
7. Notice that Link is already named Pulse Main Flow, the name we just gave to our user flow. This automatic naming helps maintain organization across multiple shared versions.
8. Click Create Link.
9. It will take a moment to upload the file to Adobe Creative Cloud. When it's done, open it in a web browser by clicking the link at the top of the panel. The upload process creates an optimized web version that maintains your prototype's interactivity.
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! This seamless transition from design tool to web preview is what makes XD sharing so powerful for client presentations.

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. This navigation becomes essential when sharing comprehensive design systems with multiple screens.

Commenting on Shared Files

Now that your file is shared, let's explore the collaborative features that make design review efficient and actionable. XD's commenting system bridges the gap between stakeholder feedback and design iteration.

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. This feature allows stakeholders without Creative Cloud accounts to participate in the review process.
   • 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. This real-time notification system ensures you never miss critical feedback, making remote collaboration as effective as in-person reviews.

Pinning a Comment

Generic comments can lead to confusion and multiple revision cycles. Pinned comments eliminate ambiguity by anchoring feedback to specific design elements, making your revision process more efficient and accurate.

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. This precise feedback mechanism reduces the back-and-forth typically associated with design reviews.

Updating an Existing Shared File

Design is iterative, and XD's update system ensures stakeholders always see the latest version without requiring new links or losing accumulated feedback and comments.

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). This demonstrates how design system elements can be quickly applied across your prototype.
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). Creating new links is useful for A/B testing different design directions while maintaining the original for comparison.

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. The seamless update process maintains all existing comments and navigation state.

Fullscreen Mode

Presentation context matters. Fullscreen mode removes browser chrome and distractions, creating an immersive experience that better simulates how users will interact with your final product.

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. This elimination of visual noise helps stakeholders focus on the design itself rather than the surrounding interface.

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). This approach is particularly effective for client presentations and usability testing sessions.

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

The design-to-development handoff has historically been a source of friction and miscommunication. XD's development sharing mode bridges this gap by automatically generating detailed specifications, measurements, and exportable assets that developers need to implement your designs accurately.

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. Clean, concise titles help developers quickly identify the relevant specifications.
3. Click on the View Setting menu and choose Development. This mode transforms your design into a comprehensive specification document.

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. Proper asset marking during the design phase streamlines the development handoff process.

5. Make sure Downloadable Assets is checked on. This ensures developers can access optimized versions of all visual elements.
6. Click Create Link.
7. It will take a moment to upload the file to Adobe Creative Cloud. When it's done, open it in a web browser by clicking the link at the bottom. The resulting specification page rivals dedicated tools like Zeplin or Avocode.
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. This overview helps developers understand the complete project scope before diving into specific screens.
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. Modern web development increasingly favors SVG for its scalability and smaller file sizes.

    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. For production projects, consider implementing automated image optimization in your development workflow.

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). This one-click copying eliminates transcription errors and speeds up implementation.

15. Mouse over other elements on the artboard to see how far away they are from the selected object. These automatic measurements replace the tedious manual process of calculating spacing and positioning.