2018’s Best Adobe XD Features and How the Experts Use Them
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.”
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 constraint but one of the more subtle XD improvements in 2018 — the full screen viewing of web prototypes — was exactly what Naomi needed.
“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.”
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.”
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.
Learn about Adobe XD, our all-in-one design and prototyping tool:
- Download Adobe XD
- Adobe XD Twitter account — also use #adobexd to talk to the team!
- Adobe XD UserVoice ideas database
- Adobe XD forum
Originally published at theblog.adobe.com on January 30, 2019.
