By Matte Rae
I
n today’s product space, designing great products is not just a job for design teams in a silo. Great products require strong collaboration across teams, from product and marketing to engineering and design. Challenges arise when teams are working across different tools, which can make it difficult to share work. In this guide, we’ll share some best practices for using collaboration features in Adobe XD to work more efficiently with development teams.
Share for development
The first method for better collaboration is by using the ‘Share’ function in Adobe XD. ‘Share’ can be found next to the ‘Design’ and ‘Prototype’ tabs in the top left of the application. There are four available preset share types and one customised one as follows:
Design Review
Development
Presentation
User Testing
Customised
Each type serves a purpose and has different features based on the audience that you’re sharing to. Depending on the stage you’re at in your design process, you may want to use the presentation or design review links to solicit feedback on technical feasibility with engineering teams.
When it comes time to prepare your design work for development, the ‘Development’ share type is an excellent choice for communicating interactions and specs. To create one, simply select ‘Development’ from the ‘View Setting’ drop-down. You can choose to lock it behind a password or leave it open to anyone with the link.
You will also notice an ‘Export for Web’ option under ‘Development’. When you have assets marked for export in your design file, you can enable ‘Downloadable Assets’ from this panel to allow your development teams to save the assets you have marked for export. This becomes a big time saver later; rather than sending assets back and forth over Slack or a cloud storage solution, you can point your development teams to this link as the source of truth.
Clicking ‘Create Link’ will generate a link in the top input “Link will appear here”. Click the link icon to copy it and share with developers. If you make changes in the future, just click ‘Update Link’ to make your changes available.
When the project link is opened, viewers will see the home screen of your prototype, with a panel to the right showing a feed of comments made. Viewers can make comments and add markers to the screen to ask questions about particular elements. This is a good way for development to ask clarifying questions around behaviours, styles and more.
By clicking the </> Spec Mode tab, viewers can see all the styles associated with your design, from the component library. This includes colours and fonts that you have added to your design. You’ll also see the ‘Assets’ section showing all available assets for that view. Simply select the assets and click ‘Download’. Colours and Character Styles can be copied to the clipboard with a click.
Inspecting an element on the screen is as simple as selecting it. Once selected, pink lines will appear showing alignment, as well as dimensions of the selected object. In the panel to the right you will find specifications on the object, it’s appearance, any assets available for download and CSS snippets to copy. Hovering around while an element is selected will provide measurements between objects, which is helpful when setting padding and margins.
‘Share for Development’ is fantastic for sharing specs and ‘ready-for-development’ designs to development teams and helpful in asynchronous collaboration scenarios where you’re not working in real time. When you are working in real time and at earlier stages of design iteration, sometimes you need a way to work alongside others synchronously.
Live Coediting
Adobe XD’s live collaboration feature, Coediting, allows designers to work together in the same file, in real time. But Coediting does not have to be just for designer-to-designer collaboration, especially in remote or distributed teams where it is difficult to have face-to-face whiteboarding sessions.
You can leverage live Coediting when navigating a problem space and require insight from development teams. Connect over a conference call and invite them to your file. For Coediting to work, files must be saved as cloud documents and collaborators will also need to have XD installed.
To get started, click the “Invite to Document” icon and type in the email addresses of those you’d wish to invite (If you haven’t already, you’ll need to click “Enable Coediting” at the bottom of this panel to activate the feature). Once someone joins the file you’ll see their avatar appear with a colour ring around it in the top right. This colour is used to represent selections and actions being performed by that user.
You’re now set up and ready to use live Coediting! As you navigate your file, you’ll now see coloured selections representing the different individuals in the file. Yours, as the host, will always be the standard blue (or green when working with a component), while the others will match their coloured rings around the avatars.
As you move and edit assets, they’ll be updated in real-time across all screens so everyone can be kept in-sync. If you’re concerned about inviting others into your design file, try making a copy and using that for feedback gathering and brainstorming. Once you’ve collected your ideas and have a direction, update your master file so everything stays clean and organised.
Integrations
Sometimes you need to meet development where they are, in their own tools. Thankfully Adobe provides several fantastic integrations with tools that many companies already use, such as Jira and Slack or with other developer handoff tools like Zeplin.
Jira Software
The Adobe XD app for Jira helps designers link design files to Jira tickets so they’re front and centre for development teams. The integration is a free add-on for Jira customers. Once connected, simply select ‘Adobe XD’ from the Apps drop-down on a ticket and enter in the link you generated when you shared for ‘Development’.
The XD app for Jira will generate a preview snippet where you can add a comment and developers can quickly jump into the ‘Design Specs’ view of the page. As with any link, once you make changes in the design file, simply clicking ‘Update Link’ in the share view in XD will push the changes to this integration as well.
You can learn more about the integration and install it here.
Other integrations
Adobe XD integrates with other popular tools like Slack, Zeplin and Microsoft Teams. While the Slack and Microsoft Teams integrations put your design files in-line with your team’s communication, the Zeplin plugin provides another avenue for development handoffs, similar to the ‘Spec Mode’ when sharing for Development in Adobe XD. With the Zeplin plugin installed, it’s as easy as selecting an artboard and pressing Option + Command + E on Mac to send the files over to Zeplin.
Whether you’re working in Jira Software, communicating in Slack or collaborating remotely with a development team, Adobe XD provides various tools to help you to accomplish your tasks. As always, performance is top of mind and you’ll find these integrations working smoothly and keeping your process efficient.
Happy collaborating!
The above post uses Tractiv, a free mobile UI Kit designed exclusively for Adobe XD by San Diego designer Cody Brown. It features 15+ mobile screen pages to get you started on your projects. It contains a comprehensive style guide with symbols, colours, fonts, buttons, overlays, repeat grids and many other elements. Download the Kit from Behance.
