critical part of the design process has nothing to do with designing -- it’s about collaborating and sharing with others. Product design involves working with other designers, product managers, user researchers, developers, stakeholders, clients, copywriters and many others.
With Adobe XD, we’ve always worked to provide a platform that allows teams to design, prototype and share, all in one platform. Teams were stitching together multiple tools and creating chaos: outdated assets, tools out of sync and no easy way to get feedback. That’s why sharing and collaboration are core to XD.
In this post, we’ll outline all the ways you can use XD to communicate ideas, get feedback and work with developers to turn your designs into real products.
You can take advantage of any of the workflows below by downloading Adobe XD or by updating to the latest version of XD. If you have ideas for how we can improve XD, you can upvote or suggest features on the Adobe XD UserVoice.
Working with other designers
Design teams waste a lot of time finding files, working on outdated versions, merging changes or worst of all, duplicating work. As projects get more complex, staying on the same page and removing overhead is essential. That's why the XD team has implemented a series of collaboration features to simplify workflows and improve communication.
Cloud documents let you and your team work on projects from wherever you want to work. Cloud documents automatically save as you work and you can invite teammates to work in the same documents, even designing together in real time with Coediting. XD saves your document as you work and you can jump to previous versions or bookmark important versions.
If your team is building a design system, you can share assets like colours and components across documents, allowing your team to design quickly and consistently. If an asset changes in the source document, you’ll receive a notification of the changes and can preview and update in your designs. That way, your team can maintain a source of truth for your design system and you can easily work with those assets in your own documents.
Coediting in XD lets your team design together in real time. Coediting operates in the background of XD and lets multiple people design and iterate together in the same document at the same time. With Coediting, you don’t have to worry about duplicating work or maintaining redundant documents.
You can enable Coediting on any cloud document and invite other designers to edit the document with you. You’ll see when other designers are active in a document and which objects they’re currently editing.
Getting feedback and streamlining reviews
Getting feedback early in the process can help you to spend time on the most impactful work and ultimately build better products. Depending on your team’s structure, who you want to get feedback from, and the other tools you use, XD offers a number of ways to share your work to get input from others.
When you’re ready to share with your extended team, such as with product managers and creative directors, XD lets you create links to your designs that you can send to others. When someone clicks a link, they’ll be brought to an interactive version of your design in their browser on desktop or mobile.
To create a link, you can navigate to Share mode. In Share mode, XD will highlight which artboards will be available in a link, determined by the “home” artboard of a prototype and any prototype flows you’ve defined. You can wire the artboards in Prototype mode as you would like them to be published in the navigation sequence.
In the right panel, you can select which setting you’d like to use using built-in presets for your sharing use case, such as design review or sharing with developers or “Customised” to control all the sharing settings yourself. The Design Review preset is ideal for getting feedback because it creates an interactive version of your design and allows reviewers to add comments. With your setting selected, you can control who can access your shared link and set a password to the link to protect your work.
Once you’ve configured your link, click “Create Link” and copy the link to your clipboard. You can click the drop-down next to your link to manage links you’ve created directly from the right-hand panel in Share mode or you can click “Manage Links” to see all links you’ve published on https://assets.adobe.com/.
Using XD integrations
Once you have a shared link for your designs, you can send it to your team, your stakeholders or post publicly to share your work, such as on Twitter or Behance. Adobe XD integrates with other applications and tools your team uses so you can bring your designs into conversations and projects in other applications with ease. For example:
Adobe Creative Cloud for Microsoft Teams lets you post shared links to Teams where your teammates can preview your design and provide feedback. You can also receive notifications whenever someone comments on a shared link. You can also access and attach Creative Cloud files right within your Microsoft Teams workspace.
The Adobe Creative Cloud Slack app lets you post an XD link to a Slack channel and members of the channel can see a preview of your designs from within Slack. You can also grant access to a shared link with a single click for anyone on a channel who does not already have access. You can also respond to any comments on your links from right within Slack.
If your team uses a user testing platform like UserTesting, you can create a user test and start gathering feedback from within XD. The UserTesting plugin lets you select a user panel, indicate which type of test to run and paste a link to your prototype. From there, the UserTesting plugin for Adobe XD will create the test in UserTesting and start gathering feedback on your prototypes from sample users.
If your product and engineering teams work in Jira Software Cloud, you can give teams access to the latest designs and specs in Jira with the Jira Cloud plugin for Adobe XD and the Adobe XD app for Jira on the Atlassian Marketplace. The Jira Cloud plugin lets you share links and assets to Jira without having to leave XD and the XD app for Jira displays rich context and thumbnail images of your designs right within Jira so developers have access to the latest designs and information.
XD integrates with other applications like Microsoft Teams, Dropbox Paper and Zeplin and offers more than 200 different plugins to extend the power of XD.
Preview and commenting
When you share a link with someone else, they’ll be able to preview your designs in the browser, either on a desktop or a mobile device. When they click the link, they’ll see an interactive prototype and can explore artboards, click-through a user flow and see any interactions or animations included in your designs. Anyone who clicks one of your links will experience your designs as though they were working products.
Reviewers can view your designs at the artboard level or using the Grid View, which allows them to see all artboard thumbnails at once. They can see which artboards have comments attached and see which artboards are linked together.
Anyone reviewing one of your links can provide feedback by commenting on the design as a whole or pinning a comment to a specific part of the design to provide more granular feedback. You can mention other people to make sure they see your comment. Adding or replying to comments or mentioning another user will send them a notification and they can also see and interact with these comments directly in Slack, with the Creative Cloud Slack app described in the previous section.
“It’s difficult to explain how you would remove friction from the purchasing process or improve the browsing experience without an interactive environment. Adobe XD helps us change the focus from the toolset to the experience, resulting in much more productive conversations.”
Michael Adamson, Client Services Director at Perficient Digital (read story)
Sharing with clients and stakeholders
In some cases, you might want to have complete control over how somebody views your designs, like when you’re sharing with a client or executive stakeholder. XD offers useful features for sharing polished assets with clients in stakeholders.
Not everyone is comfortable sending a link of their designs and letting stakeholders navigate them on their own. That’s exactly why we built the “Presentation” setting in Share mode.
Presentation links remove everything in a shared link except for your designs, so they’re great to use when presenting in a meeting. Presentation mode expands your design to full screen so there are no distractions and you can focus the conversation.
If you’re like us on the XD team, you might use XD to not just present your designs, but to create presentation slides for sharing an idea. To help, you can use this useful presentation UI kit, created by Zacht Studios.
Previewing on devices and recording videos
Video is an amazing way to share designs because you can capture the visual aspects of the design as well as the interactions.
When working in XD, you can preview your designs by clicking the play arrow in the upper-right corner of XD. Clicking this will open a preview window, which lets you interact with your design. You can also connect your iOS or Android device, either using the XD mobile application for iOS and Android or via USB, to preview your designs on a mobile device or even use the Amazon Alexa Preview plugin to export your designs to an Alexa-enabled device when designing with voice.
If you’re using XD on macOS, you can record videos of your designs and your interactions to capture the complete experience. When previewing a design, click the record button at the top of the preview window and XD will record your interactions, even showing where your cursor is on your screen. When you stop recording, XD will prompt you to save the video file (.mp4 format) on your device.
Export as images or PDF
For quick sharing, you might want to export an image of an artboard (or artboards) or create a PDF for your designs that you can send to a client. To export, go to File > Export. Here, you can select what you want to export and then select the location and file format you wish to export into. You can save these files on your device.
Working with developers
Once you’ve created your designs, iterated with your team, captured feedback and got approvals, it’s time to head to production. Developer handoff can be a painful process, but XD makes it easy to share designs, specs, assets and sample code with developers.
Design specs for developer handoff
Design specs in XD are links that provide the necessary context and information for developers. Similar to a shared design link, design specs open in the browser and provide developers with an interactive prototype for your designs and explore developer specs.
With design specs, developers can see and inspect your designs and access specifications like height, width, alignment, spacing between objects, colours and character styles. They can download any assets like image files and provide feedback via comments, just like with a design review link. Developers can also see automatically-generated CSS code that they can copy and paste into their codebase.
Creating a design spec link follows the same process as creating other types of links: open Share mode in XD and create a new link. Under the view setting, select Development and then choose which platform you’d like your specifications built for.
That’s a quick overview of all the ways you can share and collaborate with Adobe XD. We are constantly adding new features and improving XD, with new updates released monthly. If you have a feature that you are looking forward to, please upvote it on UserVoice.