October 2018 Release of Adobe XD: Voice-Based Prototypes and More Unveiled at Adobe MAX
Adobe MAX is here, and that means in addition to our regular feature updates, we have a number of major new capabilities coming to XD this month — namely, voice prototyping, new animation support, and third-party plug-ins.
Prototyping has always been at the core of XD, and now with the addition of voice triggers and speech playback, XD is the first and only UX/UI platform that seamlessly connects screen and voice prototyping in one app. Combined with auto-animate, a simple way to create immersive animations between artboards, you can create high-fidelity prototypes for web, mobile, and voice-based devices such as those with Amazon Alexa or Google Assistant.
This month also brings third-party plug-ins to XD, with a commitment to keeping XD an open platform that allows developers to integrate and extend the platform in new and exciting ways. Access a growing list of XD plug-ins directly within XD, alongside UI kits and app integrations, all of which allow you to customize and extend XD so that it works for you.
New to XD in the October 2018 release
Voice triggers and speech playback
Voice experiences are only becoming more common and in demand — from phones, to cars, to kiosks around the world. As such, we wanted to bring voice prototyping capabilities to every designer, without the need to understand the complexities of each platform. By introducing voice triggers and speech playback in Adobe XD, we’ve brought screen and voice prototyping together into one application. Check out our new voice capabilities in the video below.
Creating a voice trigger is very similar to defining a click or tap in prototype mode today, allowing you to start an interaction when a user says a specific word or phrase. Speech playback gives designers access to a powerful text-to-speech engine, which means you’ll be able to design for new platforms like voice assistants and smart speakers. We’re excited to add voice capabilities to XD and look forward to feedback in UserVoice as we continue to enhance these features.
Plugins, UI kits, and app integrations (with more on the way)
We’ve been working behind the scenes with developers from the community to add new capabilities to XD and to enable integrations with third-party apps and services. Now, we’re excited to release the first wave of plug-ins, which will help you automate tasks, integrate with other tools, leverage data in your designs, and much more. This also includes integrations with some of the best collaboration and productivity apps on the market, including Slack, JIRA, and Microsoft Teams.
Part of our extensibility approach is to make sure the platform is open to developers so that the library of plug-ins and integrations just keeps growing. If you’re interested in developing plug-ins for Adobe XD, be sure to check out our APIs and learn about the Adobe Fund for Design.
Auto-Animate
On our journey to increase the fidelity of the prototypes you can create with XD, we’ve added support for overlays, fixed elements, and timed transitions. Now it’s time for the biggest addition to our prototyping features since the first release of XD — introducing Auto-Animate.
With Auto-Animate you can now easily create prototypes with immersive animated transitions. Simply duplicate an artboard, modify object properties, such as size, position, rotation, etc., and apply an Auto-Animate action to create an animated transition between artboards. See more of Auto-Animate in the video below.
Auto-Animate is deceptively simple to use, but can create stunning effects and transitions and help you quickly communicate how the end user experience should feel. For now, playback of animations is supported in the preview window and mobile apps only — it’s not supported on prototypes viewed in the browser just yet, but that will be coming soon.
Drag Gestures
Drag Gestures in XD takes the Auto-Animate feature one step further, allowing you to simulate the drag experience of touch-enabled devices. You can now smoothly drag between artboards and simulate experiences like image carousels as described in the video below.
Drag Gestures is supported in both the left-to-right and top-to-bottom directions, and is simulated on a track pad by pressing and dragging in the direction of the animation.
Linked symbols
It’s easier than ever to stay on top of changes to symbols you frequently use or use in multiple documents. Now, those symbols can remain linked. When you make changes to the source document you’ll be able to accept the same changes in all documents where the symbol appears. In the video below, you’ll see exactly how easy this new feature makes it to manage your own design system with symbols. It allows you to maintain a single source of truth in a world of increasing design surfaces.
With linked symbols, you’ll receive update notifications every time a change to a shared symbol has been made. This means sticker sheets and style guides are always up to date, and it’s easier than ever for members of design teams to ensure their documents always reflect the most current changes.
Easy integration with Adobe Illustrator
After introducing native support for opening Photoshop documents in XD earlier this year, our team turned their attention to supporting Illustrator. Now, with this month’s release, we’re delivering the ability to open .ai documents, preserving all layers, artboards, and symbols with the ability to edit Illustrator artwork directly in XD.
You can use this to bring across high-fidelity vector artwork that you’ve created in Illustrator and want to use in your XD design, or you can go directly from Illustrator designs to creating shareable interactive prototypes in XD. See how Illustrator and XD work together in this latest release in the video below.
With a high volume of UserVoice requests for this new integration, many designers have been looking for an easy solution to use Adobe XD’s features with artwork they’ve already built in Illustrator. Previously, designers would lose their ability to edit their Illustrator designs when they copied and pasted them into XD — now, the two programs work together seamlessly.
Export to Adobe After Effects
When you need to create complex UI animations, motion studies, presentations, and digital marketing content that require motion playback, you can now export your XD designs to After Effects, the industry-leading animation tool.
It’s a quick and simple process that brings across layers, vectors, and artwork from XD into After Effects, in editable form with 1:1 visual fidelity. XD designers will also be able to fully leverage After Effects’ powerful plug-ins for exporting motion to code and specs. It’s a big win for anyone looking to level-up their animations.
“With micro interactions being another way of expressing our client’s brand, sometimes we need the advanced controls offered by After Effects to bring that vision to life. XD makes it easy to get our designs straight into After Effects within a couple of clicks so we can start animating in no time,” said Maxx Morgan, Associate Creative Director, Perficient Digital.
Reading this in the future? Check out all of the major updates to Adobe XD in 2018.
UX community
We’d love to continue the dialogue! Help us shape the future of Adobe XD by submitting feature requests or file bugs. You can follow our handle @AdobeXD for updates or reach the team on Twitter using #AdobeXD. You can also talk to us using Facebook, where we share videos and updates as well as answer questions during live sessions.
#MadeWithAdobeXD
While sharing your prototypes on Behance, don’t forget to tag them with #MadeWithAdobeXD and select Adobe XD under “Tools Used” for the opportunity to be featured in the Adobe XD newsletter.