By Matt Rae
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. Since I haven’t connected these wireframes together in prototype mode yet, all of the artboards are highlighted in share mode. This highlight represents what will be shared as I generate a link.
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 at the top.
With my link opened in Chrome, I can now navigate through my design with arrow keys. If I had prototype links configured, I could use the interactions to navigate the design. 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 join as a guest, or login if they have an Adobe ID, and add comments, questions, and feedback to my design. Comments are easy to reply to and resolve, and notifications of new comments will come through on the Creative Cloud app, keeping me in sync with the conversation.
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 more, but this time I want to make use of another pre-configured share type in 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 hand side. ‘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 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. Since I named my colors and character styles in the assets panel of Adobe XD to match the design tokens used in code, XD generates a CSS variable definition list for my assets. 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. If a grid view of all screens is more desirable, that can be accessed here {top left}. This view also allows developers the ability to see, at a glance, which screens are connected with prototype links. Clicking on this flow icon will open up, and show the connected artboards.
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. However, 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!
Create a shared language between design and development teams using Design Tokens in Adobe XD. Assets such as colors and character styles can be given custom names in Adobe XD, which can align to token naming conventions from the codebase. Once renamed in Adobe XD - the design and prototype can be shared for development. When web based projects are shared for development a variables tab will appear in the web view providing a single CSS view with all Design Tokens for the project. These can then be added into a code base removing the confusion around which color is which.
