Adobe XD was created as an end to end user experience design platform, which means moving
between stages of your design process is easy, from ideation and design, to prototyping,
and into sharing and handoff.
On the screen I have a wireframe for a design I’ve been working on, and I’d like to
collect feedback from the development, and product management teams to discuss technical
feasibility, and answer questions they have about the design.
To do this, I’ll navigate to the ‘share’ mode in the top left corner.
I can also use (control + tab on the mac) to toggle between modes in the UI.
In the panel on the right, I have a number of options.
By default my ‘view settings’ are set to design review, but I can change that based
on my needs.
Since I’m looking for feedback, and am not ready to distribute specifications for the
design yet, I’ll stick to this setting.
I’ll give my link a title, and select who I wish to share it with.
Clicking ‘Create link’ will generate the link for me, and I can open the link in my
browser by clicking on the generated link.
With my link opened in Chrome, I can now navigate through my design with arrow keys.
Or by selecting the arrows at the bottom of the screen.
To provide context to my team, I’ll add some comments to the design to indicate design
intent.
This is easy with the built in pin comments in Adobe XD.
As my team navigates the prototype they can see my comments by hovering on the numbered
indicators.
Now as I share this link out to my team, other team members can sign in if they have an Adobe ID
Or continue as a guest
other team members can add comments, questions, and feedback to the design.
Comments are easy to reply to and can be resolved with a single click.
I'll receive a notification in the Creative Cloud app when a new comment is made
After several rounds of iteration, my design is in a state that I’m happy with, and ready
to hand off to the development team.
Since they have been involved from the beginning, there shouldn’t be any major surprises when
they receive my final design.
I’ll navigate to share mode once again, but this time I want to make use of another pre-configured
share type in Adobe XD - Development mode.
Development mode saves the hassle of marking up my design files with red lines and dimensions,
and provides an interactive view for developers to inspect as they build it out.
I can either create a new link, or simply update the link I already shared - since my
team has this link, and I’ve been updating it through the design process, I’ll update
the existing link with this modified setting.
Now in the web-view, there are two new tab options on the right.
‘View Specs’, and ‘Variables’.
The View Spec mode allows the development team to move through the prototype, and inspect
elements to understand colors, character styles, spacing and more.
CSS snippets can be copied by highlighting them with the mouse - and colors can be copied
with a simple click.
Assets and imagery marked for export will appear here with an option to download when
clicked.
Navigating to the ‘variables’ tab will surface a list of CSS variables or design tokens.
Because I named my colors and character styles with custom names
in the assets panel,
Adobe XD provides a CSS variable definition list for developers to use.
A developer can either copy and paste this CSS code, or click ‘download’ at the bottom
to generate a download of the CSS file.
Variables ease communication by translating colors and character styles from design language
to developer language, making implementation more seamless.
The development team can now continue implementing this design, and as changes, questions, or
feedback arise, they can navigate back to comment mode, and mention me to get my attention.
My development team uses other apps for documenting and communicating their work.
XD integrates with these tools including Jira, Zeroheight, Slack and Microsoft Teams.
Since this development team is using Jira to track their tickets and manage their development
efforts, I want to provide these design assets inline with their workflow.
The Jira integration for Adobe XD makes this really easy.
With the XD app installed on Jira, I can navigate to the relevant ticket, and paste in the same
share URL I created before, and Jira will create an embed for me.
From here, the development team can open up the design spec, view the interactions, and
best of all - as I update the link, all the changes apply here as well.
Some teams prefer communication tools like Slack and Microsoft Teams over email, and
sharing to these tools is easy as well.
I can quickly paste the link in the app of choice, and the integration will do the rest.
Adobe XD also works great with apps like Zeplin for design handoff, or Zeroheight for documenting
your design system and importing elements from Adobe XD.
Whether you’re working with an external development team across the world, or collaborating
with internal teams, XD provides you power and flexibility to build a workflow that works
best for you.
Happy collaborating!