Ask a UXpert: The Best Adobe XD Features Introduced in 2018
Illustration: Justin Cheong.
Adobe XD improved significantly in 2018, especially around prototyping and extensibility. There were many landmark releases, including the addition of fixed elements and voice prototyping, as well as the launch of XD plugins.
For senior UI designer Timothy Salter-Hewitt, who regularly publishes UX and XD tutorials on YouTube, the decision to make XD free to use was “a really big deal, especially when you consider how much design is growing as a requirement in businesses.”
Timothy also praised the XD team’s active use of community feedback channels, in particular UserVoice and Twitter, which makes the team accessible and accountable and shows that they’re listening to users.
In 2019 Timothy is looking forward to included vectors in the Creative Cloud libraries. Before we get there, however, we wanted to know how the new XD features went down with other designers and how they have improved their workflow, so we set out and asked our UXperts for their favorite features introduced to XD in 2018.
Save time with responsive resize
For art director and visual/product designer Zhenya Rynzhuk, co-founder of the Sochnik Design Thinking School, responsive resize has become a real timesaver.
“Nowadays, it’s a must to have a website with responsive design,” she explains. “The best way for a designer to ensure the right look of the website across different devices is to prepare several versions or so-called breakpoints for mobile, tablet, and desktop devices and hand those over to the developer. In most cases, this is done manually by changing the grid, scaling, and rearranging the elements of the interface, which is a rather time consuming thing to do. Thanks to responsive resize a lot of time can now be saved when preparing the ‘responsive’ design versions of the interface.”
The responsive resize feature in Adobe XD enables you to easily create a tablet version based on a desktop design.
When using the responsive resize feature, Zhenya recommends keeping an eye on the elements’ positioning in relation to the borders of the artboard. She also advises to group elements together and ensure that the spacing is kept the same when making changes to the arboard version.
Zhenya recently created a free Fashion Editorial UI Kit for XD and is currently working on another UI kit, available next month.
Share designs more effectively with full screen viewing
In all her past processes designer and consultant Naomi Atkinson felt constrained when sharing flat web designs with clients. She could link hotspots with other pages and fake hovers or animations but it was a constant disappointment to have to “choose a specific width, or average device ratio” to share initial designs with clients.
Responsive resize removed this
“When sharing a work-in-progress wireframe for writing app Novlr, I knew that both (remote) clients were on smaller laptop screens than my own, and both different to one another,” Naomi remembers. “At this early stage of the redesign process, we’re not worrying about the middle content being responsive (as it already exists and does this well), we want to concentrate on the framework and functionality.”
Being able to share a link from XD to launch the wireframe in full screen meant that everyone had the same desired preview experience. Naomi didn’t have to add the usual caveat of ‘obviously, this would be full screen,’ or set the designs at a smaller size, in the hope that the clients could then resize their screens just to get the right ‘feel’ of a full browser preview. It made a massive difference.
Check out Naomi’s free Crowdfund Companion UI kit for XD.
Create working prototypes with Auto-Animate
For Chris Cannon, art director and founder of Colours, Auto-Animate is the feature that sets designers up for the future.
“It allows us to accomplish so much more in the story we are trying to articulate with our designs,” he explains. “Combining this with the creation of a prototype offers us, as designers, the tools needed to remove the mistakes, which we may make after a product or website has shipped, from the wireframing stage.”
Auto-Animate at work.
Specifically, Auto-Animate has helped Chris to offer developers a look into how micro-interactions would work in a design. As Chris also firmly believes that animation should be part of a brand and design system, he’s especially excited that Auto-Animate helped him better define design systems.
“Prototyping with Auto-Animate helps you explore what is possible in your design,” Chris adds. “Transitional animations permit the designer to fully think about the workflow and decide the best path for their user.”
Design voice experiences with voice prototyping
Voice prototyping, meanwhile, was one of the most exciting additions to Adobe XD to date. No other UX/UI platform seamlessly connects screen and voice prototyping in one app.
Freelance UX designer and XDI Clive K. Lavery recently started working on voice user interface designs and welcomes the new XD capabilities.
“It makes it very easy to prototype the ‘happy path’ of a dialogue flow,” he points out, “and demo it to clients or other stakeholders just by using voice as a trigger and speech playback as an action. I don’t need to jump into another tool to transport my core voice concept anymore, and especially multimodal experiences that use a blend of voice, audio, touch, and images can be prototyped really fast to create a realistic sound, look, and feel of the end product.”
Khoi Vinh, principal designer at Adobe, demonstrates how to prototype a voice assistant in a mobile app with XD.
Clive adds that the prototype mode now enables him to select different triggers, commands, and actions to create the interactions required for a device like the Echo Show, which can be “a real time saver to get buy-in quickly and then focus on the nitty-gritty.”
“While XD still does not eliminate the detailed concept work like crafting extensive dialogue flows, considering synonyms for user utterances, or catering for error scenarios, it’s a great first step in the right direction,” Clive concludes.
For more on XD’s new features and major product developments, see this review of Adobe XD in 2018 by XD product manager Elaine Chao. For more UX insights sent straight to your inbox, sign up for Adobe’s experience design newsletter.