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.