By Mike Schwartz
6 Jan2021 ·
5 min read
A
critical part of the design process has nothing to do with designing -- it’s about collaborating and sharing with others. Collaboration is at the root of making incredibly rich user experiences possible. Whether you're partnering with developers, getting buy-in from clients or receiving feedback from your users, working with these stakeholders helps you to take your ideas to production. Collaboration has great benefits but the complexity and time it takes to work together can make it hard to move fast. Adobe XD helps you to collaborate more effectively with your team.
In this guide, 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.
Collaborating 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. Adobe XD includes several collaboration features that can keep your team on the same page and in sync with shared assets and real time collaboration.
Cloud documents
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
Coediting in Adobe XD allows your team to design together in real time. Coediting operates in the background of XD and lets multiple people design and iterate together in one document at the same time. Redundant documents and duplicate work are no longer a concern with Coediting in Adobe XD.
You can easily invite colleagues and other collaborators to an XD Cloud Document with their Adobe ID and Coediting is enabled automatically. When other team members join your document you’ll see their avatar in the top right corner with a ring of colour around it. This ring of colour and avatar will also show on the canvas as a live cursor so you can see where they are in the document at any time.
Sharing styles & assets
A common hurdle many design teams face, especially in large, distributed organisations, is having the latest up to date assets and styles available on-demand. Having access to these assets is one piece of the puzzle, while understanding when they’ve been updated and having a simple path for updating is yet another.
Creative Cloud Libraries unlock the ability to share assets like colours, character styles and components across Adobe XD documents. Since these libraries are connected to Creative Cloud assets from Adobe Illustrator and Photoshop can also be shared, allowing design teams to work with branding and product assets from the same source.
Learn more about Creative Cloud Libraries in Adobe XD.
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.
Design reviews
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/.
Share selected artboards
Moving quickly? If you don’t have your prototype flow connected together, not to worry, as Adobe XD comes equipped with a way of sharing selected artboards quickly. Simply select the desired artboards you wish to convert into a flow and click the share icon above the top left of the first artboard. This action will open Share mode and automatically generate a Design Review link for you, all you have to do is share the link.
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.
Creating presentations
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.
Related content
