Primer: Sharing in Adobe XD
Designers don’t work in silos. In any given week, you likely need to get feedback from at least 2–4 people. Preparing your designs for feedback and responding to it can be time consuming. I believe that the true productivity gains from using Adobe XD come when you create your designs and collect feedback through publishing online prototypes.
I’m probably a bit biased. The sharing feature in XD has been my baby since the beginning. In the past month, I’ve handed over the reigns to another product manager. So, in parting, I decided to write up all the ins and outs of this feature, not just for my counterpart, but, for anyone who might find it useful.
Let’s get started …
Selecting What To Share
Designers often capture various approaches to a problem in a design file, but, when the time comes to share their ideas for feedback, you likely want to curate what screens get reviewed.
In XD, there are two methods of sharing artboards.
- Share everything. If you want all of your screens to be shared, by default, don’t wire up any screens in Prototype mode. If nothing is connected, all screens will be shared in the order they appear in your design. Screen #1 will be the artboard at the top-left. The rest will follow in reading order.
- Share just one flow. In Prototype mode, choose the “home” artboard which will be the first screen in your shared design. You set a home artboard by clicking on the blue/gray tab on the top left of the artboard (only in Prototype mode).
Every artboard connected to this artboard will be shared. For example, in the design below, artboards 1 and 2 will be shared, but, 3, 4, 5, and 6 will not. But, if I connected 2 to 4, all artboards would be shared except for 3.
Sharing your design
Once you have your design wired up (or not) and you are ready to share it with someone, head on over to the top right in Adobe XD and click on the share icon.
Publish Prototype: This option allows you to publish a snapshot of your design to the web and get back a URL that you can send to reviewers. As you continue to change your design, the URL won’t update on its own. Instead, you choose when you want to update the design online. I’ll discuss updating your published prototype later.
Publish Design Specs: This option publishes a snapshot of your design to the web in a view specific for developers. The link gives you a UX Flow as well as redlines and specs (colors, fonts, measurements) for individual artboards. At the time of this writing, the spec does not allow a developer to extract assets or copy CSS code, but, that’s being worked on.
Manage Published Links: This option takes you to the web where you can view all of the prototype links you have ever published. You will have an option to delete them.
Publish Prototype
Once you have selected “Publish Prototype”, you get the following options:
Here is what each of the options will give you:
Allow Comments: When sending someone a link to your design, if “Allow Comments” is checked, the reviewer will see a comment icon on the top right of the header. This allows them to view comments that you write to annotate the design or to leave comments themselves.
Reviewers leave comments by signing in with an Adobe ID or by signing in as a guest. Signing in as a guest has extremely low overhead. The person leaves only a name and nothing else. However, guest commenters do not get email notifications for comments or replies to their comments. Anyone signing in with an Adobe ID will receive notifications via the Creative Cloud Desktop application or email.
Reviewers can leave two types of comments: Artboard level comments or pinned annotations.
On our team, we also capture feedback in live meetings as comments on the prototype. This saves someone from writing separate notes and keeps all feedback in context.
One final note on commenting… it unfortunately is not supported when viewing URLs on mobile. This is just something on the backlog for the future.
Open in Full Screen: This option gives you a URL that opens your design in the browser in full screen mode. This mode includes no header, no comments and no artboard navigation. It is just your design. This mode is perfect for user testing or presentations.
When in full screen mode, XD adds “?fullscreen” to the URL. This allows you to send a URL to reviewers or users that drops them directly into this view.
Show Hotspot Hints: Hotspot hints give someone reviewing a prototype hints as to where they should click. This blue highlights show up in the web whenever someone clicks in an area where there are no interactive elements.
When user testing your design via a web link, showing hotspot hints is undesirable. You can turn them off in the publish settings, or add “?hints=off” to your URL.
Updating a Published Design
Once you have published a prototype to a URL and received feedback, you likely need to make some design updates. To make an update to an existing URL, you would again, click on the share icon and select Publish Prototype giving you the following dialog.
Here, you will have two options: Update Link or New Link. Clicking on “Update Link” will publish all of your design changes to the last url created. At this time, you can only update the last link you published from a design document. Clicking on “New Link” will publish all changes to a new link. It is useful to publish to a new link when you want to keep separate versions for each iteration of a design.
In the future, we would definitely like to support the ability to update any of your previously published links.
Scaling Your Design
This past month, we changed how scaling of your designs work when you go into full screen mode. In full screen mode, on the web, the artboards are now shown at 100% of the size you designed. Previously, we always scaled artboards down to fit in the browser. This scaling was undesirable especially for websites.
Still, you can’t make everyone happy. When this change was made, some of our designers wanted the scaling in full screen mode to be scaled to fit. So, we added a URL parameter to help you do this (Note: It was a quick an easy fix pushed out in a day to solve the issue for some). The URL parameter is: featureset=fullscreenScaleToFit. Compare:
Conclusion
If you haven’t shared a prototype using Adobe XD, do it. Combined with the quick and easy design and prototype features, you’ll speed through the design and feedback process.
