Adobe MAX 2018: New Features and Updates in Adobe XD | Adobe Creative Cloud

January 14, 2020 0 By Peter Engel

Now we’re
going to jump into the rapidly emerging field
of experience design. And you’ll see some exciting
new functionality in Adobe XD, our experience design
and prototyping platform. A couple months ago,
I raised a few eyebrows when I declared in some
press interviews no less that Adobe XD would someday be
as big as Photoshop. It is a controversial thing
to say, especially within Adobe. So, let me explain
how I got there. Think about your experience when you’re trying out
a new app or browsing the web
to find a hotel or restaurant. You know, sure,
we pay attention to factors like price and features,
but more and more, the decision
comes down to design. How intuitive is the interface? How many clicks does it take? What does the experience
make us feel about the brand? These are the factors
that make us push the “buy” button
and make the reservation. And in the future,
even more parts of life will have an interface. We created Adobe XD
because we knew there was a need
for an experience design tool that only Adobe could provide, one with exceptional speed
and performance, seamless interoperability with Adobe’s other powerful
design and animation tools, and the ability to design
across the Windows and Mac platforms. Over the last year,
we’ve rolled out new features and updates each month
to make XD a robust platform for designing
cutting-edge experiences. And here to show you
the very latest from Team Adobe XD
is Khoi Vinh. -Khoi.
-Thanks, Scott. (cheering and applause) Thank you! Adobe XD is a powerful
all-in-one tool that helps me design,
prototype, and share, and there are
some amazing features in today’s release. I’ve been using them
to work on this new project. This is going to be
a podcast player app that we’re calling “Episodic.” But the story
of the first feature I want to talk to you about, that actually starts
over here in Photoshop. That’s right, Photoshop, because Adobe XD
can now open up Photoshop files seamlessly. Now this is perfect
because I’ve designed these five screens
for Episodic right here where I can use
all of my favorite filters and I can get that rich texture that only Photoshop gives me. And now I can take this work
and open it up in XD directly. So, let me show you
how that’s done. Back here in XD, I’m just
going to go to “file,” “open.” And there’s no complex
importing or conversion. I’m just going to find
that PSD and when I click “open,”
I get a brand-new XD document with all those
five artboards right here. They’re native, the vectors
are super smooth, and the text is editable even though it came
right from Photoshop. This is the power of
creative product integration. XD complements Photoshop
beautifully. It also works seamlessly with
Illustrator files, by the way. Okay, so now that everything
is here in one place in XD, I can copy these artboards and then I can just merge them
with my main doc. And in fact,
I’ve already done that. I’ve got these five
same artboards right here. So, I can actually pick up
and keep designing exactly where I left off. In fact, I’ve also got
all the layers that I created in Photoshop, all those layer names
transferred right over. Just really seamless. You might also notice
that this layers panel is a lot more minimal
than what you might see in other apps,
and that’s because the whole XD interface,
it’s just context-aware, it’s very stripped back. It only shows me
what I need to see, when I need to see it. On the right side here,
this is our property inspector. Again, the settings change
based on what I have selected. XD also has
a terrific assets panel, and this is where I can sort
all my color swatches, character styles,
and symbols, too. And symbols is a great way
to keep everything consistent. I also want to note
that in today’s release of XD, symbols can now remain linked
between documents as well, not just within
a single document, but between documents, and that’s huge for consistency
and control. Okay, so that is a brief tour
of Adobe XD. Let me show you some more
of these cool new features that I was talking about. The first one is called
“responsive resize” and it’s going to save you
a tremendous amount of time if you ever find yourself
in a position where you need to reconfigure
a screen like this one for different aspect ratios,
different break points. Even just to get
this tab bar right, it’s really time-consuming
and really inaccurate. And some other design tools
have tried to solve this by forcing designers
to define really arcane behavioral rules
or even to do math. You know, math plus design. You know? The XD approach
does not require math. It’s actually
much more elegant. So, on this artboard here,
I just need to flip on this responsive resize toggle, and then I can
pull on any edge of this entire artboard and actually just
make it narrower, make it wider. Watch that tab bar. XD is doing all that work
based on the way I’ve grouped
those items together, so it’s using those
implicit relationships to be smart about
how it lays everything out. And that means
I can also drill down and grab a specific layer group,
like this one, and get a more nuanced design for this horizontal
orientation, and then drill down
and use responsive resize on this button here. And even with these
little tweaks that I’m making, I’ve saved so much time, and that is the point
of responsive resize. It just takes all the tedium out of designing
for responsive media. Okay, so… Thank you. (applause) Okay, so this next feature
is even cooler. So, we’ve heard
tons of great ideas from you, the design community,
on ways to enhance XD, and so what we’ve done
is that we’ve opened up the app so that developers can build
plug-ins on top of XD. That’s right, plug-ins in XD. And the developers have built
some amazing things already. We’ve got this
new plug-ins menu here. You can see them all
in one place. You don’t have to go out
and download them from a dozen different websites or install them individually. They’re all here,
available in one click, and they’ve all been vetted
by Adobe engineers, so we know that
they’re rock-solid on Mac and on Windows. Great, yes. Okay, so the first plug-in
I want to share with you is going to help me
get a preview of how my design
might hold up when it’s localized
for different languages. This is a plug-in
called “World Ready.” And when I open it up,
you’ll see developers can create
their own UI in XD plug-ins, as these have,
and they can hook into outside web services. So, I’m going to choose
Google Translate as my translation engine, and then I want to see it
in German, in Korean, and in French. And when I click
this button here I’m going to get three copies
of the same artboard: one in German, one in Korean,
and one in French. This is a huge time-saver. (applause) Okay, so this next plug-in
is really fun as well. This is a plug-in from a designer/developer
you might know. His name is Meng To
from Design+Code. He’s actually here
with us at MAX. You might run into him. This plug-in is called “Angle” and it’s going to help me finish designing this marketing
webpage for Episodic. And what I want to do
is I want to take the UI that I’ve designed
on this artboard and paste it into this
prospective mock-up of a phone. Now, to do this,
I’m just going to open up my layers panel and grab
the layer that defines– the vector layer
that defines the screen. This is where that
minimal layers palette really comes in handy. So, I’ve got it. Open up Angle. Now I select the artboard
that I’ve got all that UI on. And when I click this button,
you’ll see I get a flattened version
of that artwork, skewed in perspective
so it fits seamlessly onto the artboard. (applause) Thank you. I didn’t even need
to leave XD to do that. Why would you ever want
to leave XD anyway? So, it’s just a taste of what
you can do with plug-ins. Developers have been
using the JavaScript API for the plug-ins to build
some really amazing stuff, and we can’t wait for you
to get your hands on them. Okay, so, I just threw a whole bunch
of features at you. Just let me recap
really quickly. First, seamless import
for Photoshop files. Also works great
with Illustrator. I mentioned link symbols
now working between documents. That’s huge for design systems. I talked about
responsive resize, tremendous time-saver, and a rich
new plug-in ecosystem, all in today’s release
of Adobe XD. Some terrific enhancements
to design. But XD is not
just about design. It’s also about prototyping. And in today’s world, the ability
to build a prototype, that’s kind of a superpower,
because if you can create a convincing, compelling
prototype really quickly, you become
a much more effective, much more persuasive designer. And that’s why,
over the past 12 months, we’ve been working really hard to make prototyping
even richer and more capable in XD. You can now prototype
all kinds of common interactions
and gestures. Dragging, swiping. You can fix elements
on the artboard while the background scrolls. You can put one artboard
on top of the other as an overlay. But I want to share with you
a feature that we think is really going
to unlock creativity when it comes to prototyping. This is a feature
we’re calling “Auto-Animate.” And as the name suggests, Auto-Animate is a whole
new approach to animation, and it doesn’t require you
to learn how to write a single line of code or even to master
a complex timeline interface. You just switch over here
to prototype mode, start with two artboards, and you drag a wire
from one to the other. And if you’ve never built
a prototype in XD, that’s all you need to know. It’s just dragging a wire. It’s really simple. And, now, under the action menu, I get the option
to select Auto-Animate, and that’s really it. I’m just going to wire this back so that we can see here
in this demo how it works. Now to preview a prototype,
I just click on this icon here to get a virtual phone, and you’ll see
when I click on this button it’s going to morph into
that wide “continue” button or the large microphone button
automatically. Yeah. Yeah, this is really awesome. What’s really happening
behind the scenes is that XD is taking a look
at these two key frames, basically, and matching up
the layer names. So, you have a lot of control
over what gets animated. And then it’s
automatically generating those transitions for you. Now this approach
is so powerful because it’s so simple,
it’s so visual. It’s also really robust. Let me show you
on these other artboards here how Auto-Animate
just really adds a ton of life to the UI. So, watch these stats
at the bottom here. They sort of just pop off
the screen when I use Auto-Animate. And all that’s really happening is that some of these elements,
they’re changing scale from one artboard to the other, the wave form there
is changing shape. And here’s a cool trick. So, this number here is a column of numbers
that are partially hidden behind a mask, and the exact same layer
on this artboard, I’ve just shifted the position
of that column of numbers, and so XD is animating
between them for me. So, if you’re starting
to get this concept of how to Auto-Animate works, you’re probably
also getting excited about the creative
possibilities. And I have actually been
having a ton of fun with Auto-Animate. I’ve been using it to design
the tablet version of Episodic over here. So, when I preview this,
you’ll see that Auto-Animate adds
just a whole lot of drama to the way this screen
builds in and builds out. Just look at that. Yeah, thank you. (applause) So, that’s over
a dozen elements moving all at once,
super smoothly, and back here,
it’s just two artboards. It’s really simple
to work with automate but really powerful. And with all
the other enhancements to the prototyping in XD, you’re just able to create
even more realistic, even more convincing prototypes
than ever before. So, Auto-Animate,
it’s really going to unlock creativity for you. Okay, so there’s another part
of this prototyping story that I want to talk
to you about. You know, designers are being
asked to create for so many different kinds
of platforms these days, and immersive media,
like voice, that’s been challenging for us. Now, at Adobe,
we fundamentally believe that voice is
going to be a part of every major app experience
before too long, and that’s why
it’s so important for designers to be able
to design with voice. But the tools
haven’t been there. Well, all that changes today because in this release
of Adobe XD, for the first time anywhere, you can now design,
prototype, and share with voice as a medium. That’s right, you can create
voice prototypes. This is really exciting. (applause) Yeah. I’m really excited
about this, too. So, let me show you
how this works. So, there’s going to be
a voice assistant built into this app
that I’m designing, this Episodic app,
and so I’ve created these artboards here
to visually suggest how that’s going to work. Well, in the new version of XD, I can now just drag a wire to determine the actual
voice interactions, too. And that means I can set
a voice trigger here. So, I’m going to type in
“Hey, Episodic.” On the destination screen,
I’m going to type in what I want to hear
back from the app. XD is actually
going to speak back this text to me that I type. There’s a new
text-to-speech service integrated right into the app. “Hi, what can I do for you?” And for good measure,
let’s do one more screen. The command over here
is going to say, “Show me new podcasts.” And, then, on this screen here, I’m just going to copy
this text and paste it into the speech playback box. And that’s it. Now I can actually preview this on my mobile device
because it’s a mobile app. We have terrific companion
apps for iOS and Android. Starting today, those now
support voice interactions. But for the sake of time,
I’m just going to open up this same desktop
preview window here and give this a try. Hey, Episodic. Hi, what can I do for you? (cheering and applause) Show me new podcasts. You have seven new episodes
in your queue. (applause) I’m so happy that worked. (applause) So, that’s
a simple demonstration of Voice working,
but you can build some really, really robust
logic flows with our Voice feature. But I just want to take a moment
to sort of appreciate how this really opens the door
for us as designers. It lets us start designing
for all these places where voice is
going to play a role, these home automation systems, these artificial intelligence
applications, and all these devices
that are already around us, where, you know,
they really need designers to get to the next level, you know, devices
like the Amazon Echo, which are terrific,
but with design’s help, it can really become
something else. In fact, I’ve been
creating a version of this app, Episodic,
for the Echo Show. I’ve got all the artboards
for that device right here alongside my artboards
for mobile, for web, for tablet. It’s so great to have
the whole product in one document. And XD is so fast
on both Mac and Windows, it just doesn’t blink an eye. And on top of that,
the ability to go back and forth between design
and prototyping fluidly, that is a game changer, because I can finesse
the visual layout, I can build those awesome
voice interactions– I mean, build those
awesome animations. And I can define those
voice interactions all here. No other design tool
lets you do this. None. Only in today’s release
of Adobe XD. Thank you. (applause) But I’m going to pull
one more thing on you. So, these artboards here
that I’ve designed for the Echo Show, I can, of course,
preview them right here on the desktop, right? Just as with any artboards
for any other platform. But you can’t beat
the kind of feedback you get from seeing it
on a real device. And, so, I want to give you
a sneak peek of something
that we’ve been working on, something that’s coming soon, that we’ve been
collaborating on with our friends at Amazon, and that’s the ability
to run your XD prototypes on the Amazon Echo. And to demonstrate that, I’m going to bring out
one of the very first, all-new, second-generation
Amazon Echo Shows. Now this was just released. Amazon was nice enough to share it with us
about a month ago. We’ve had it in our labs
and we’ve been building XD– a bridge to XD on it,
so let’s give this a try. I want to make sure
Alexa hears me. Alexa, open Episodic
in Adobe XD. Welcome to Episodic. What would you like to do? Recommend some new podcasts
for me. Here are three podcasts for you. Want to learn more? Tell me about Wireframe. I hear that one is awesome. Wireframe is a podcast
about interaction design. Would you like to subscribe? Yes, please. You’re all set. (cheering and applause) Folks, this project
was just an idea in my head a few weeks ago,
and I designed it here in XD on my desktop. I brought it to that device. I was able to talk to my design and it talked right back to me. This is a huge breakthrough,
not just for XD, but for all of us as designers because it really sets us up
to build this next generation of experiences,
and Voice is a new tool that we can all work with. We’re so excited about this. If you haven’t already, now is the time
to try Adobe XD. Thank you very much
for having me. Have a great MAX! (applause) Thank you, Khoi. So, much of the power of XD comes from
its seamless integration with the rest of Creative Cloud and with third-party tools. Khoi pointed out a few
of the third-party plug-ins, but they are just the start. All of the partners
you see behind me are building
integrations with XD that are either shipping today
or sometime really soon. And starting today,
in an industry first, we are unlocking the world
of voice design in Adobe XD. We’re working closely
with Amazon as we develop
XD’s voice features. In fact, Khoi’s demo was built
using a new UI kit for XD that we’re releasing today
for Amazon’s Alexa. I talked earlier
about the idea of helping everyone develop
a basic creative literacy. We believe so strongly
in that idea that earlier this year
we took the highly unusual step of making Adobe XD free
for everyone to get started. Just as easy access
to word processing software has improved written literacy, we believe making XD
available for all will advance design literacy, making it easier for anyone
to bring their ideas to life.