By Matte Rae
C
ollaboration 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. XD makes working together flexible and fast.
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.
As a small team or individual designer, keeping your most used assets in one location can help to maintain consistency when managing a project.
Cloud documents and linked assets
Adobe XD’s cloud file system makes it easy to create a centralised record of UI elements, character styles, colours and more. These cloud files can be imported directly into any XD document’s asset panel for use across project files. Updates made to the source document appear in any file making use of that library and can be updated with a click.
Using a cloud document as a library is easy. With your colours, character styles and components saved in an XD Cloud document, simply open a new XD file. At the top of the assets panel, click the “+” icon.
From the dialogue that appears, find the cloud file that you wish to connect. If the file is owned by a teammate and was shared with you, click the ‘Shared with you’ tab to quickly filter down the file list. Selecting the file will begin linking the assets between the shared cloud file and your working document.
These linked assets will be marked with a grey link icon in the asset panel and linked components used on the canvas will be denoted with a green link icon when selected. When these icons turn blue, it means a change has been made to the source document and an update is available.
Hovering over the blue icon in the asset panel will show a preview of the changes on canvas and clicking the same icon will update the asset, making it easy to stay on top of changes.
If at any time you don’t wish to receive updates or want to disconnect a component from the source, right clicking it in the asset panel and selecting “Make Local Component” will remove the connection.
Learn more about using Linked Assets & Cloud Library files in your next project.
Incorporating brand assets
Linked assets are great when the whole team is working within Adobe XD, like the product, interface or UX design teams. Oftentimes, you want to use assets from other apps in Creative Cloud. These may be icons and graphics from the marketing design team or logos from a brand team. This is where Creative Cloud Libraries can help.
Creative Cloud Libraries can be shared across team members and accessed from several Creative Cloud applications. To access Creative Cloud Libraries in XD, click the Library icon in the asset panel or “File > Open CC Libraries”.
In the floating window that appears, any existing libraries can be selected from the drop-down menu. To create a new library, simply select the “+ Create new library” option at the bottom of the drop-down list.
With the library created, assets like colours, graphics and more can be added to the library to be shared across applications and files.
Using assets shared in a library is just as easy as shared assets within Adobe XD. With an element selected on the canvas, colours and character styles can be applied with a click. Graphics can be dragged onto the canvas and placed exactly where you need them.
As assets are updated in the library, changes apply automatically to your elements on canvas. However, you can unlink a graphic asset at any time by right clicking and selecting “Unlink Graphic”.
Sharing design intent & gathering feedback
Often, the hardest part of a design team’s job isn’t crafting the design itself, its communication across the teams and stakeholders involved in a project. Articulating design intent and vision can sometimes be a challenge.
Using Adobe XD, design teams have several methods for presenting and communicating within and across teams. With sharing options focused on presentations, user testing, developer handoff and design feedback, as well as the ability to narrate design walk-throughs, there are many great ways to share design vision and intent.
Presenting design vision
Acquiring stakeholder buy-in can be an important step in aligning teams around a shared design vision. With XD’s powerful Auto-Animate and prototyping features, building rich presentations directly in a design tool is a breeze and allows teams to pull in shared components and assets to articulate their vision.
Using the ‘Presentation’ setting in Share mode makes sharing the presentation to distributed teams straightforward. Or, if presenting live, using the in-app preview screen can make for a great, distraction free presentation experience. Features like Scroll Groups and Stacks can bring life to the presentation and make it easy to rearrange content on the fly.
Recording for asynchronous sharing
hether you’re presenting an early design concept or handing off a design for development, the ‘Record’ feature in preview mode makes articulating your design intent incredibly easy.
With the microphone enabled, clicking record will capture both the prototype interactions and your layered narration and explanations. This is great for clarifying the little details and answering questions development might have along the way.
The resulting video can then be distributed through tools like Slack or attached to tickets in Jira and BitBucket.
Gathering critical feedback
Collecting feedback throughout the design process, from different stakeholders and team members is important for aligning and tracking towards the end result.
Using the ‘Design Review’ setting in Adobe XD can help you track feedback and comments throughout the design process. Since individual links in Adobe XD can be updated as the design progresses, it means that one single link can be used throughout the entire project.
As comments are added, the design team can reply, dig deeper and resolve comments as changes are implemented. When a link is updated, non-resolved comments remain, allowing teams to track which feedback has been implemented and what is still outstanding.
Anyone with the link can leave comments and interact with the design, allowing the design team to share across an organisation and collaborate with teams from development and product management, to marketing, customer support and more.
Collaborating with development teams
As your design progresses to the final stages, it’s likely that interaction with development teams will become more frequent as questions are addressed and implementation gaps are flagged.
The “Development” view setting provides not only the commenting and preview features of ‘Design Review”, but also includes important information and assets for development teams, like design specs and variables. Learn more about working with development teams in Adobe XD.
Ideate together with Live Co-Editing
Sometimes working together in real time can help expedite a project. In the early stages of a design project, working together to brainstorm and ideate can prove to be very valuable for collecting the input and ideas of a broader team.
Using the Whiteboard plugin and Adobe XD’s beta live Coediting features, teams can work together on a shared canvas to generate ideas or work through one of the various workshop templates to align across teams on product direction and user personas.
The best part is, the collaboration doesn’t have to stop there. Teams can move between ideation, design, prototyping and handoff, all from within a single shared file. Keeping a single source of truth through the duration of the project.
Inviting team members is easy. Select the “Invite” icon at the top of the screen, enabling ‘coediting’ for this cloud document and enter the emails of the teammates you wish to invite. As they open the document you’ll see their avatars appear at the top.
What it means to work with a team can change based on the project, the team you’re embedded in, and especially the company you’re working for. Teams have different workflows and needs. Adobe XD provides flexibility to allow you to build a workflow that helps to enable your team to do their best work.
