Adobe XD: Advanced Layout and Prototyping Techniques with Chris Converse | Adobe Creative Cloud


(upbeat music) (crowd cheering)
– Thanks. Hello, everyone, thanks for
joining me this morning, especially after Bash. So I’m gonna jump right in. So what I wanna do today
is show you a whole bunch of really super cool
things you can do with XD to prototype out ideas that you have and not just on a mobile
phone or a desktop, but imagining all the different
things you can do with XD that affect your lives, things that you can do to make
riding in your car better, maybe talking to your refrigerator, all of these different things
that we can use XD for. So what I’m gonna do is I’m gonna build on some of the new features
that just came out in XD, and show you some of the
workflows that we use to sort of imagine some of our ideas. So tonight I’m gonna go through
three different projects. The first projects is
going to be a real project. This actually exists. If you search for Adobe
Resource Calculator, you’ll come up to this calculator. And so this posed a really
challenging design problem, because what they wanted to do with this resource calculator
was come up with a way to show people how many
resources they could save if they stopped printing paper. So all of these organizations are printing tons and tons of paper. And one of the challenges
was to take a number, like how much water would you save. If you look at five million
some gallons of water, that doesn’t really mean anything. But if we then take an
equivalency and show you how many loads of laundry that is for you. Because you have to imagine one person’s actually using this. We can then take that data and
make it personal for people. And XD is all about experience, and if we have a story, we can put all this together and just really make that
experience more powerful. This also means that we have
to work with all this data. So as designers, this is a lot of numbers. This is only one snapshot with
how much money we’re saving, how many pages, how many loads of laundry, how many reams of paper, how
many gallons of everything. And so this can be a real pain, especially if we gotta
through and set all the type. So I’m gonna show you ways
that we can hook data into XD and make that much more powerful. The second two projects are
sort of made up projects, and I’m gonna use XD to
explain my idea to you and show you how to use XD
to get your idea across. So wouldn’t it be really cool
if when you’re in your car or in a search engine and
you search for something, if you could have an application
run as a search result. So what we’re gonna do is mock up an idea that you’re in your car, and you ask your car to find
you a local coffee shop, and one of the coffee
shops has an application that runs inside search
that you can place an order, and then when you’re done, you go back to whatever you were doing. So we’re gonna mock up that
entire experience inside of XD, and we’re gonna hook our voice up to it. So I’m gonna talk to XD, and it’s gonna talk back to me. And then finally, after MAX, I always look forward
to all of the sessions. So whatever session I don’t get to go to because I’m doing this or I’m sitting at somebody else’s session, I was always look forward to MAX online to see when all of the
videos are available. So wouldn’t it be cool if
maybe I’m playing a game, playing Xbox or Playstation, and I could get a notification that all of the videos are available, and maybe it’s a game console app where I can watch the videos
right on my game console. So I’m gonna hook an Xbox
controller up to my Mac, and we’re going to prototype
out an entire experience on a game controller, and show our clients
what that would look like if we actually were able
to watch all the videos through a game console. It’s a little aggressive, but that’s all the things that we’re gonna try to cover today. And so with that I wanna start. Inside of XD, I’m gonna start
with a blank artboard here, and the first thing I wanna
show is a new feature in XD which is when you create
a component in XD, you now have the ability
to create multiple states of a component. And just like with other
tools in creative cloud, when a feature gets added to a product, not only does that one feature
give you new capabilities, but if we combine it
with existing features, we can actually compound all
of those existing features, so we can create more advanced workflows. I wanna demonstrate this
on a really simple file, because this principle we’re gonna use in all three of those other designs. So to begin I have just
a simple artboard here inside of XD. And so what I’m gonna
do is come in here and just gonna draw a circle, and I’m gonna add a text block. We’ll add a name in here. I’ll just pick some random name. Kim sounds like a great name. I hear some giggles, that’s my wife. So, got a little circle here. Let’s just fill this in
with gray, looks great. Gonna select both, click on repeat grid, and now I can repeat grid this down. Okay, standard feature, one of my favorite features in XD. So what we can do in XD is they extended the architecture in XD so that people could write plug-ins, so the only plug-in
I’m gonna use for today is going to be a plug-in
called Google Sheets. And you can find any number
of plug-ins inside of XD by going to the file menu
and searching for plug-ins. So Google Sheets allows us to
link to online spreadsheets or load CSV files directly into our data. Now a CSV file is just a simple text file. So what I’m gonna do is come in here and open this simple text file. Show ya what we get with the CSV, it’s really just quoted text
with some commas in there. So when this pops up, we’ll
just take a quick look at this. You can get a CSV file from any number of online spreadsheets,
from Excel, from Numbers. So it’s just a really simple file. The very top just says names, and then we have all of our
different names in there, so really, really simple. So what we’re gonna do is, I’m gonna hook into my file
all of those different pieces. So I’ve got my repeat grid here. Gonna go to my layers panel, gonna select the repeat grid, I’m gonna go to plug-ins, Google Sheets, and I’m gonna choose load CSV. I can click on select a CSV file, and let’s go over here
and grab that names file. I’m gonna click open, and the next thing I
can do is map the data. So I have an ellipse. This would be little headshots if I was gonna make a contact sheet. And then down here, it picks
up the name of the text that I put in the first text field, and I can map it now to
anything in my CSV file. So since I just have the names column, I can just select names. And then I can choose apply, so now all of those names
get applied directly into XD. So it’s super cool. If I were to take this artboard, option drag a copy over here, I can go to the second copy, click on repeat grid. I can go plug-ins, sheets, load CSV, and I can load a second set of names. Now something interesting happens here. Now I have all of these
different items to map. And that’s because once
we apply different text to every one of those
items in the repeat grid, when we map to a new CSV file, every one of those unique text fields now has to be mapped over. So I need to map Mike to names, Lauren to names, Chris to names, Audrey. I can click apply, and then those’ll be reassigned. Not the end of the
world, this is fantastic. It’s much better than
typing all of this in. But now that we have the ability to create multiple states in a component, and components can hold
anything XD supports including repeat grids, now I can have a component
that contains a repeat grid, and I can make multiple states, and each state can link to
a different piece of data. So this is where this
gets incredibly powerful. So I’m gonna undo all the way back to before I even made a repeat grid. So we’re all the way back
to the original piece. Same thing as before,
I’ll hit repeat grid. Now before I do anything, I’m gonna actually name this the actual name in the CSV file. So the name of that first
column is called names. Now with this repeat grid selected, I’m going to go to the object menu, and I’m gonna make this into a component. So I’m gonna choose command or control K. Now this is a component, and over on the right-hand
side in my inspector panel, I can see that the component
has a default state. The first thing I’m gonna do is come over here and
click on the plus sign. I’m gonna add a new
state for this component, and I’ll call this list one. Now with list one selected, I can open up my component,
click on my repeat grid, Google Sheets, load CSV. I’m gonna do the same workflow. We’ll pick names one, click open. It automatically creates the correlation, and now I can click apply. Try that one more time, load CSV. Click names, open, and apply. There’s all of our names. Now I can select the component, so I’m at the component level now. Let’s go over here. If I go back to the default state, there’s my default state, let’s create a new state in here. This is going to be list two. Once I have list two defined, open up my components, my repeat grid. Everything about this particular
state is being recorded. Go to repeat grid, go to
sheets, load CSV, pick the file, pick names two, open, apply. There is my whole second set of names. You’ll also notice I only
had one record to deal with. If I go back to my main component state, this is the main state here. Here’s list one and here’s list two. I can have any number of pieces of data hooked to any number of
states in my main component, and now I can start to
gather more and more data. And where I’m going with this is we’re gonna use this technique to create that calculator that’s
got all that data in there. And it would be just really time consuming for us to build all of that. If I wanna make us of this in a design, I can take an artboard, option drag the copy of the artboard, go to the first artboard,
activate list one. Go to the second artboard,
activate list two. And then I can use multiple
states in multiple artboards across my entire interactive project. Feeling good about that so far? Great, so I’ll get to that. (crowd applauding) You can just nod I just wanna know that we’re gonna forge
ahead on the next one. So we’re gonna use these exact principles for the rest of all of
these different examples. So I’m gonna close this file, and let’s jump into the calculator. So I’m gonna start
inside of the calculator into a project like this. So this is typically how
we would start to work on a project like this. We get our design inside of XD, lay out everything. In the left-hand side,
everything’s properly named. Nothing’s called untitled. That gives me hives if I see untitled. So we’ve painfully labeled
everything and made sure that everything was super
organized and set up. So for this project what
I was mentioning before is one of the things that we were doing inside of this particular project was setting this up so that
as you were interacting with this calculator, we
were not only showing you how much of a resource you were saving, but making an equivalency to a person, because even though it might
be a giant corporation, individual people are
using this calculator, so we want you to know how many days worth of driving a car
of energy you’re using. So again that becomes a lot of data, so it’s really great if we
can be able to start to share all of that data with the people who are actually doing
all the calculations. So here I have a whole series
of Google spreadsheets. So in my account here I have
four of them set up here, so what if we stopped printing 710 pages? So I can create a spreadsheet
and then share this or this can be shared with me. And in here I can see all of
these different properties, so resource measurement,
gallons for the water, pounds for wood, how many this
is, the equivalency value, and the loads of laundry. So this is incredibly accurate,
this is incredibly boring. As designers we wanna make
this experience super cool. The other thing we wanted
to do with this experience is we wanted to make it so that you could accidentally make a calculation. So the idea was if we
had slider down here, if you just tapped on the slider, and you could accidentally
drag it a little bit, you would start creating
some calculations. So that was our idea. We wanted you to have this knowledge, and we wanted the equivalency
to speak to you personally, and so this is the whole interface that was gonna make all of that possible. So now for this particular project, we do have the advantage of
having the final project. So the final project looks like this. So after it’s been programmed
you can click on the slider, you can drag this back and forth, and everything is calculated in real time. We can change currencies down here. We can change the
frequency that you print. We can change the measurement
from empirical to metric. But the really enticing
thing about this is as you click and drag
this you start reading all of these little pieces
like how many loads of laundry, how many trees does this all save. So we built this for Adobe. They’re partnering with a
couple of other agencies and governments like
government of Utah and Hawaii, and some global organizations. And just as a side note, this can go up to a million pages per day. We’re going to need to be
increasing the number on this just to give you an idea of
how much companies are printing across the world. So that’s just a interesting note. So again, to get everybody sort of engaged in this amount of content, I’m gonna come back here, and let’s start with our
220,000 pages per week, so that’s gonna be our basis here. So back inside my XD document, I’m gonna come in here,
select this resource folder, open this up, and here
are all of our text files that are going to be part
of this complete project. And so inside of here what we’re gonna do, I’m just gonna open
this file up real quick, and so what I’m gonna do in this main file is we’re going to select
the resource folder. I’m gonna hit repeat grid. Now I can click and drag, and I can drag out five copies of this. Get between the two, move these around. Everything in that repeat
grid is completely live. Now I come down here and select
the pages selected group, and I’ve gone ahead and
named everything in here, inside of XD, the exact
names that are inside of my Google Spreadsheet, so resource management,
type, all of these top values match everything inside of my XD document. So with this folder selected,
I’ll go to my plug-ins. I’ll go to paste public
URL from a Google sheet. Then I can go over to
Google, go into share. From the share menu, we wanna
come down and choose more, and make sure you turn
on creative public link. This is how you can share
your spreadsheet data. And this isn’t just tied to Google. This is just one way you can
do this with spreadsheets. So we’ve got our public
link; I’ll hit share. I’m gonna hit copy link right here, clicked on, go back to XD, and I can paste that URL right into here, and click continue. So now XD will show me
everything that maps to that, so these two items show up, and notice if I click
on this drop-down menu, I can pick any piece of
data from that sheet. So here’s our savings, here’s our pages. Everything else has no
mapping that is in that group. So these two things look great. I’ll click apply, and there’s our two numbers
that show up in there. Go back to the spreadsheet. These are the two numbers
showing up over here. Let’s go back to our repeat grid. Let’s click on resource. Same thing sheets, public link. I’ll paste in the same URL. Paste, hit continue. That’s gonna find all of
these pieces that match: equivalency measure, equivalency value, resource type measurement. I can go down here and click apply. If I have one that I misnamed, I can just close that
real quick and show you what would happen if I
didn’t misname my column. And here’s all the data that is showing up inside of here as well. So if we go back to our
sheet and move this down, we can see water down
here, 1,224,000 gallons. I can see that showing up here. The equivalency is
32,000 loads of laundry, and all of this data gets populated here. So now just like before, I can put this whole thing in a component, make multiple pages, link
each component instance with its state to a different
sheet in my Google document. So my Google Docs, I have
these four settings here. I can go in and create
four final artboards. So before I show you the final artboards, the last I’m wanna do is come
in here and add our artwork. So I’ve got a repeat grid here, let’s go back to my file. We’ll open up my data. I have a whole bunch of icons here. So here’s our washing
machine, trees, paper, car, and refrigerator. The order that these show
up in the operating system is the order they’ll be
applied to the repeat grid if I simply grab this number
folders and just drop them in. So I’ll grab all five of these, and I can drop them on any one of these
little squares in here, and when I let go, all
those icons will be assigned to every one of the
items in the repeat grid. Let’s do the same thing for resources. Let’s come in here. There are the graphics
for water, trees, waste, greenhouse gases, and energy. Marquee select, we’ll grab all these. Drag them into any one of
the top background graphics, and quickly apply all of the
graphics into there as well. So order that the files show
up in the operating system is the order they’ll be
applied to the repeat grid, and you can do this for hundreds of files if you have all of them. You create a repeat grid and move it out, name all your files and just drop them in. You can also do this
onesie twosie as well. I can grab waste, for example, and just drop into one
specific spot here too. But it just makes it much faster if you have everything in one group, and you can just bring them all over. So if we skip ahead a little bit, when we have all of our final artboards all hooked up to individual Google sheets, we end up with something like this, where I can come in here and take a look at all of this data. So think about how long this would take to lay this out in more traditional tools. We would have to get spreadsheets. We’d have to type in these textblocks, option drag things around, but all of this stuff
can be hooked into here, and if there’s any changes, I can select one of these objects, go to the plug-ins, Google sheets, and choose refresh content. So if somebody has told me that
they have updated that data in my local CSV file, on a shared drive, on on Google Docs, or any type
of cloud based spreadsheet, all that data will get
flowed in and look fantastic. So now there’s two things I can do with sharing this content. With something like this, the interactivity isn’t really intense. It’s just a slider that
they moves back and forth. So what I might need to do is simply take all of these artboards and just save these out
to a multi-page PDF. So I could go under the file menu, and I could just export all
of this out to a PDF file, maybe export it out to some sharing place that everybody can get access too, and just sign off on the
design and the process. But the other thing I might wanna do is I might wanna make a
prototype out of this. I might wanna have people see kind of what I would like to have happen
showed to our developers, and so there’s another
technique that we can use to sort of simulate something
that works like this. Now there’s a whole bunch
of different calculations that this would do. As we drag the slider, every
number in this whole thing is beginning to change. And there’s a feature in XD where we can create a drag gesture where an object on the stage,
if we click and drag it, we can animate between two artboards, but I need more than that. I need more artboards to create
this advanced experience. So what I’m gonna do is I am
going to create that experience with two artboards, and what we’re gonna
do in the two artboards is we’re going to take all that data, and we’re gonna set them
up into larger text blocks. So to demonstrate that,
I’m gonna zoom up here on one of our resources. Let’s click on the first one here, so let’s go to water. I’ll come down and click
on the equivalency. I’m gonna click again to
go into the text block, and so what I’ve done here is I’ve made a really tall text block with six values in it that all match what’s in the spreadsheets, and I created a mask layer above that. So I have this little clip layer here, which is actually behaving
like a clipping mask, exactly the way you would do
this inside of Illustrator. Shape, artwork underneath, select both, create clipping mask. XD does the same thing, and the icon here actually
looks exactly the same as Photoshop and Illustrator’s. So we have all of these numbers here, and the key here is this font size is smaller than this font size which is smaller than this font size. But all I needed to do was make sure when I have that text block selected that the height of this is 387 pixels. They all have to be the same height, because when we animate
from one to the other, all those text blocks
are gonna move together. So if I come up here and
select this resource, it’s hard to see all the numbers, but this is 387. So to get these to space out, all I did was change the line heights. So this one has a different
line height than the other one. Let’s go down to all the numbers. We’ll double click on this. These are all the different values. So 170, 700, all the way up to a million. And then these are all
the values that are saved. Everything’s masked in. So now what we’re gonna do
is let’s come over here. Let’s option drag a copy
of that entire artboard, and for the copy, let’s come over here, and make some changes. Let’s double-click, let’s
go into the numbers, let me select this. I’m gonna hold my shift
key and use my up arrow, and I’m gonna move the numbers, and notice how they’re all moving. All those resources are one repeat grid. The repeat grid can have multiple values or any properties as an
override each instance along the entire set of the grid. But if I make a change
to any one of the objects that the other ones don’t
have an override on, they’ll all be modified as well. So now I’ve just moved all of these to their million pages per week state. Let’s see the same thing
for the equivalencies. Let’s come down here, select that. Let’s grab this. Let’s
move all of these up. And we’ll do the same thing for the number of pages per week. 170, let’s drag that
up, get up to a million. And then finally let’s come over here, and let’s bring up the dollar value. Let me zoom out. So now we have those
two individual states. So now let’s wire this
up to create a prototype. So come over here, we’ll
click on prototype. What I wanna do here is
let’s select this thumb on the track. I have that selected. Let’s click the wire,
let’s bring this over, let’s link it to this artboard. For the trigger, let’s come
down and set this to a drag. Let’s use auto-animate, and what auto-animate does
is XD will take any objects that appear on both artboards and automatically animate, that’s why they call it that, the different properties, so anything that I’ve changed: opacity, scaling, rotation,
anything I can change in XD will become part of that animation. And the fact that it’s on a drag means it will animate at the
speed that I drag this object, so it gives me this really
intense feedback piece there. We’re gonna go to page one dot one, and we don’t have to do
any easing or anything, because we are controlling the animation. Once we’re over here, let’s come down here to this thumb. Now when we’re on this page, the thumb should be
all the way at the end. So let me switch back to
design view real quick. Let me just move this out to the end. I’m also gonna come in here, and let’s go inside of the track. Let’s find this small
little rectangle here, and let’s extend this as well so it looks like the track bar fills up. Back to prototype mode,
click on the thumb, and let’s wire this back
to the original page. XD remembers all the last
settings, so drag, auto-animate. Let’s zoom out. Now to test this, we can
come up here, hit play. And now we can come in
here, grab the thumb, and drag this back and forth. And we get something that
feels almost like exactly what we had before. We’re only using two artboards. We took the time to set all
of these individual items up so that each text block
was the same height, changed the line height
so everything matched, and it looks like we have a
six state drag animation set from just two artboards inside of XD. Now if we wanna take a look
at how this feels on an iPad, because the original design we had, we actually had the
slider above the numbers. The slider was up here. And on a computer, that
felt completely fine. But when we tested this
on a mobile device, the first thing we realized
is when we put our hand over top of the numbers
to drag the slider, we couldn’t see the numbers
changing the savings. So it really helps to look at
things on a device as well. So I have a device up here, and so what I wanna do is in my iPad here, I’m running
the XD application on the iPad. This is connected through a USB cable. So with XD open in the background, let me move this over here. I want you to see everything at once. So here’s our XD artboard, with our live screen in the back. I’m gonna down here on the iPad. I’m gonna tap on live preview. Whatever document I have open in XD is what’s gonna show up on the iPad. And this is a real time collaboration between XD and the device, so if I click on this option for example, switch to design view
and move these around, this moves around in real
time on my iPad as well. So if you’re not quite sure
how the font’s gonna look or the design or how it’s gonna fit, you can hook this up to your mobile device through a USB cable, and see all of your designs in real time. We can also go into preview mode, and I can actually come in here on my iPad and interact with this on my iPad. So now I can tap and drag and see exactly what this feels like. So when the slider was above the numbers, my finger was in the way
of me seeing those numbers. So I immediately realized we’re gonna need to modify the layout. So it becomes really
important to make sure that you look at the experience
in all different areas so that we can make sure
that everything is optimal for those pieces. So that’s the first example. All kinds of cool stuff, live data, and a way that you can actually
get more than one state in the drag effect, so as long as you make sure
everything in XD lines up. It just gives you sort
of another dimension to that single drag
capability that we have for those pieces. So with that I wanna
move into our next idea which is this idea of
having an application that could run inside of search. And so when you’re working inside of XD, you’re gonna come up with
your own sort of workflows for how you want to put
your content together. So one thing that I like to do I like to have an artboard
that I call master components. And the reason that I do this, this is again just my personal preference, is that I wanna know where all
of my master components are when I’m working inside of my layouts. So I like to create a
master component one, and when I come in here and
select any of my components, I can see this little green
triangle here at the top. This indicates to me that
every one of these is a master. And what that means is when
we modify a master component, any of the children will be modified unless they have an override
that’s been specified. So to demonstrate this real quick, if I came into this
component here, this button, this is the same button
that’s being used down here in this little messiness that we’re gonna attack in a minute. So if I came in here
and then made a change, like a rotated the text around, all of the text will change
in this miniature repeat grid in this app component, but the colors will not change because they have been overridden locally. So this is not a new feature here, but the fact that we can change
this content, have it flow, and the fact that we can
have multiple states, still picks up this piece. So again we’re compounding
all of these features into the things that we can start to do. So what I wanna do here, this is gonna be the application that’s gonna let us go
through and order some coffee while we’re driving in our car. So the first thing I might do is sort of play with some ideas with some interactivity and some layout to get this design kind
of working a little bit so we can see if we like the
direction we’re going in. So I’m gonna start by
clicking on this option here. This entire thing is a component. I’ve named it coffee app. And if I open up the component, I can see all of the items inside. I have a masking group
here which just masks this to this entire shape. We can toggle this open;
here’s my clipping area. And then we have a whole bunch of different pages or
options inside of here. So what I’ve done is I’ve
taken every piece of art that controls the states of
this little interaction here and put them all in the same component. And so what I can do
with my component states is I can activate these. I can turn them on and off. So I’m gonna go back to the main state. This is called the default state. And so for the default
state, let’s come in here and let’s turn off the latte sizes. Let’s turn off the latte
art, gonna turn off the map. I’m just hiding these layers. I’m not really deleting
them or anything like that. And let’s go back and get all the way to, we’ve got a repeat grid showing up here, and it’s showing this bottom piece. So we go all the way back to this gonna be our sort
of main menu screen here. And we needed a little
bit of room at the top for our title bar, and we’ll take a look at
that in a few minutes. So now I click away, and this is the new default
state for that application. So now I’ll come in
here, click the plus sign just like we did before. I’m gonna add a new state, and I’m gonna name this the menu state. Now it’s gonna look exactly
like the default state, but I like to create another one, because this is the one we’re gonna add some interactivity to, so again my personal preference, I like the default to look like
the main application piece, especially when it’s in a larger project, which is what we’re
going to bring this into, so that I can sort of identify
this on my main stage. So here’s our menu stage. I’ll go back to default. Let’s come and create a new state, and once we decide we wanna latte, the next thing we’re going
to be asked is what size. So I’ll name this one latte size. Now with this state selected, I’ll come over to the coffee composition, open up mask group. Let’s come in here and I
want to know what size, so the first thing I’m gonna do is I’m going to grab
this background graphic. I need some room on here so
I’m gonna use my arrow keys. I’m just gonna move the
coffee cup over to the left. Maybe about here, we wanna
see both the bear’s eyes. We’re going to take the navigation menu. We’re going to hide that. I’m gonna take the coffee
shop logo, right here, and I’m gonna move this over a little bit, and then we’re gonna come over here, and we’re going to turn on a
couple of our options here. So we’re gonna turn on the
options for the beverage size, and the latte title. I can select these, let’s
bring the latte title down. Basically I’m coming in here, and I’m just sort of
redesigning all of the pieces inside of this state. So we’ll bring these down
here, grab the latte title. We’ll bring this down. Logo’s a little big, let’s come in here and just scale this down. The logo’s also a component, but I’m treating this as
sort of a graphic component, so I turned off the responsive
design phase over here, so that this will not respond to having the items inside respond
to their individual sizes. This will treat this
like a regular graphic. Oops, so I’ll just move
this down into place. So I’m going in here just
to sort of putting this new sort of layout together. So now when I click
away, this is the state of that component when it’s
in its latte size state. When I go back to menu,
it looks like this. And then there’s our default state. So from the latte state, let’s come down. Let’s add one more state
just for demonstration, and this is going to be the latte art. So we’re gonna create our art state. And we’ll do the same thing,
we’ll come into our layers. When we want to pick the art, we’re gonna bring up another photograph, and we’re gonna bring up some text, so you can choose what you like, and we’ll turn off the
other two latte pieces. Move my layers around. So when this comes up
you can actually choose the type of art because
they have a latte artist, and you can actually pick what
design you’d like on there, and so this is going to
be the latte art state. Okay, so we’re good so far. So this is what all of the
different states are giving us, the ability to create all of
these different variations inside of this one object. If you’re familiar layer
comps inside of Photoshop, this works exactly the same way as that. So now at this point, I can come in and start to prototype this. So I’m gonna create a couple
of links inside of here, and then we’re gonna
jump into another file and start to work with some audio. So you might wanna create
a clickable version for two reasons. One if you’re in the car
and the passenger is there, the passenger can
actually touch the screen and advance this. And two if you wanna be able
to share this on the web and your clients just
wanna click it with a mouse or a trackpad or a touch device, they don’t have to
speak to it or anything. They can just sort of click around. So to demonstrate that, and this we saw this
in the keynote as well. If we come back to the
main composition here. I’m gonna set this to the main menu state. From the menu state,
let’s go to the prototype. From prototype, let’s double-click, and for purposes of the prototype, I’m gonna link all of
these buttons to the same. Everybody’s getting a latte
regardless of what you click. So I come over here and I’ll
click on the plus sign here, and now since I’m inside
a component right now and I’m adding some prototyping tools, if I use the tap option, I can come in here and choose
something like auto-animate, and I can also choose from
all of the different states of this component in this object, so I can come in here and
go to latte size, ease out, and we’ll do this at about
0.65 seconds, so 0.65s. So when I click on this,
the component itself is gonna switch or animate
into that secondary state. So now on the main component, let’s set this to the latte size state. So now I’m in the latte size state. Let’s come down here,
if you click on medium, come down here and select this. Same thing doesn’t matter what you click, you’re getting a medium. Let’s go in here and click on that. We’re going to do the same
thing, tap, auto-animate, and we’re gonna go to
the latte art screen, ease out 0.65. So now from the main screen, we’re gonna come back and
set this back to the menu. And now if I come in here and click play, and we wanna preview this, I can come in here, I can click on latte. Isn’t that cool? It animates to the second state. Click on medium, that
animates to the next state. So all the interactivity
is now being built into that one single component. And all of the animations
are being controlled by setting auto-animate to go between all the different states. Let’s take a look at adding a little bit of audio into our project as well. So at this point, we can create all of
those prototyping pieces by, again, having the tap
gesture or the tap event assigned to these
individual states in here. Now if I wanna go beyond tapping, I wanna go into audio or
even game controllers, what I need to do is I need
to create multiple artboards and activate the
different component states on those individual artboards. And so the reason we need to do that is because there’s so
many things I could say, and there’s so many buttons
and other types of inputs on different platforms. So what I’m gonna do is we’re
gonna select the main app. I’ll set it back to its menu state. I’m gonna come in here. In the design view, I’m gonna hit copy. And let’s go over here and hit paste, and we’re gonna paste that into the first artboard over here. So now on this first artboard,
we have menu selected. I’m gonna option drag a copy. From this artboard on the second one, let’s come over here and
set this one to latte size. Then I’ll make a third one, and we’ll set this one down to latte art. Now what’s also fantastic about this is if I go back to my master component, change the state to latte size, come in here and make
a change to latte size, what we’ll see is notice
the latte size artboard still gets updated. I still have a dynamic
link between the states on the master component
on my master artboard to the individual state of the component on its individual artboard. So it can a little getting used to, but the power is just incredible here, because I just can wield
great power and control over my entire layout
from one particular spot. So now the other thing that I like to do when I’m working with media or mediums, whatever the word is, that we can’t click on or see, I’ll make another set
of symbols that I’ll use as the objects that will be the trigger. So if I want this artboard
to react to my voice, I need to have something in the artboard that’s going to listen to
see if I’m saying anything. Now typically I will apply
events like a clicking event to actual objects within the layout. So if I wanted to link this
to the artboard for example, let’s do that real quick. So if I hit prototype, I can click on this
option here, like latte, and I can just click and drag and link this over to the other artboard. That’s a tap, that’s auto-animate. We can set our easing and so forth. But when I have an audio queue, I can pick anything here and
attach it to the audio queue, but then later on I might not remember what I actually attached that too. So what I like to do for game
controllers and for audio is to create a little piece of art that I’m gonna put on all
of the different pages. And I put this in a component
because once I’m done, I can go to the master component and set the opacity to zero, and the opacity will be set
for every single artboard. So I can get rid of it
when I wanna prototype it. I can bring it all back
when I wanna work with it. So I’m gonna come in here
and select this symbol here. So this is called the listener. Let it copy. Let’s come over here
to this first artboard. I’m gonna paste that here. And this going to listen for when I would like to order a latte. So I can put this anywhere. I usually tend to put it
a little be near where it’s actually controlling. Now over here in my artboard, let’s hit command or control G. I’m gonna create a group. I’m gonna call this audio. Gonna sorta quarantine
all of my audio pieces. And this actually going to listen for whether I’m going to order a latte. So again I just do this so
that I can go back later and be able to update
and control all of this. So now I’m gonna select this. Let’s go to our prototype mode, and what we’re gonna
do is with this object, I’m gonna click and drag. I’m gonna link the speaker to the second artboard. And then over in our inspector panel, we’re gonna come in here and
set the interaction type. So I’m gonna come in here
and set the type to voice, and down here I can type in
what I want XD to listen to or listen for for me to go to a latte. So I’m just gonna type in the word latte. We’re gonna auto-animate. We’re gonna do all the
same things we did before. We’re gonna do an ease out. 0.65 seems a little long, since we’re already in that state, so we’ll bring this down
to maybe 0.4 seconds. And then press return. So now I’ve got this speaker
here that’s kinda listening. So to test this I can come over
here, hit play, or preview. Showing up here it’s listening to me. Now for me to talk to it, I’m gonna hit the spacebar and say latte. I’ll have a latte. I can let go. XD picked out the word latte and then advances me to the next screen. So that worked great, so let’s come over here,
let’s select the audio group. Yay, how ’bout that, that was kinda fun. (audience applauds) Let’s go to the next one. Let’s hit paste, let’s change the name. This is listening to go to art. Or no actually listening
to see if I say medium. So I’m ordering a medium latte. And I can also have the machine
talk back to me as well. So we’re gonna link this back to here. Then I’m gonna go into a text file where we’ve sort of written a script. And so this everything
we wanna have happen throughout our audio. So if I come in here, so
what sizes would you like. Let’s hit copy here. So now when I say that I want a latte, we’re gonna get to this screen. We have a listener even
that’s going to listen to bring us to the place where we can pick the
artwork we would like. But if I click on the main artboard here, and this is highlighted in blue, I can come over here and
add an interaction here, and what I wanna do is add a timed action, and the timed action is
going to be speech playback. We’ll set this to Joanna, and I’m gonna paste in this content. So now when we’re on this artboard and I say I would like a latte, we’re going to auto-animate
to this artboard, and then the machine’s
gonna talk back to me, and it’s gonna tell me what’s
available once we do that. So let’s test that,
I’ll hit command return. Hold the spacebar, I’ll have a latte. – [Joanna] Would you like a
small, medium, or large latte? The sizes are eight, 16,
or 24 ounce size cups. – [Chris] Pretty cool. I’ll have a medium.
(audience applauds) And then I can hook up medium. I forgot to type medium
ins for the listener, and then we can go to the next phase. Good so far, just a little nod? Okay, so now–
(audience cheering) Oh, it’s gonna get crazy. I do like the enthusiasm over here though, wherever that came from. This is super cool and everything, but the thing that’s
not realistic about this at this point is we don’t just interact with an app like this all by itself. This app is going to be
in an entire environment, and the idea here, the whole sorta concept
that I wanted to push was this idea of having an application that runs inside a search. Which means you’re doing
something, you decide to search. Search comes back and gives you the option to do something extra and
then go back out of it. So I really wanna simulate
the entire experience for where this is going to happen. And what I’m gonna do is
put all of this inside of an environment. So we’ll start with the beginning
parts of the environment. I’ll show you how this is put together, and then we’ll show you
the whole thing wired up. So the first thing that I did is I created four individual applications, and this is where you
can storyboard in XD. You can draw in a notebook. What would the scenario really be like if we were gonna use this application? So if we were in a car, we
would probably be driving. I don’t know if you guys noticed, you’re all getting Rickrolled right now. (audience laughing) We would all be driving,
we’d be listening to music, and then we would talk to our car or the driver next to
us might tap and say, “Hey I wanna find something.” And you might say hey
I want a cup of coffee. So then we would have a, we’d go from the music application to the search results screen, and the search results would come up, and then here’s where
part of the idea comes in. Some of the search results
might have the option for you to interactive with them. So maybe The Coffee House actually put together an application, partnered with a search engine, and said if somebody’s
wants a cup of coffee and they’re within our geolocation, you can place an order. We’ll give you an API, so now the search result comes back. It says to me hey I can order
from this particular place if you’d like. The other places have many more locations, but you’re near us and
we can place an order. And I say great. Then we go into the coffee
app that we just prototyped in the last example. Once we do that, the coffee
app can then send off to the directions application
and track our directions, and then when we’re done, we can go back to playing our music app. So it’s a lot of things going on, but our lives are complicated, and this is how intricate this would be. So we’re now gonna put
our entire experience into this real world example. So just like before, I have all of my buttons and things set up, so if I come down here for example, again just to demonstrate this, everything’s a component. Everything are repeat grids. Notice the Coffee House, the order button. Everything is all hooked together. And then the third little thing we have, fourth thing, or however
many we’re at now, is this little tiny title bar, and this is its only little application. And I have this separated
because as you’re using the app, I want the title bar to
be there the whole time. At the larger level, imagine all of this is really part of one application. Imagine this whole thing is part of the entire operating system
of a dashboard in a car, so the navigation, search,
the app, and the music is all part of one full system. So this gives me all the
little pieces that I need. If I click on each one of
these little individual items, like the music for example, I have a mini player state, so here’s the mini player
and the big player. For the map, we have two different states. I have the default state and then I have the zoomed in state. Oh and look, The Coffee
House is right here in the Microsoft Theater, oh it’s so cool. The main app here, we can come in here, and I can go through all
these different size states. So just like we did before, every one of these just has a couple of different design states. And then finally I have one component here called car dashboard. I open this up, I’ve got
an image from Adobe stock. I cut out the center here, and all of these will fit perfectly inside of that car dashboard. So now when I zoom out, what I did is I just put the car dashboard
in every one of these. When I wanna work on these applications, I can go to the master component artboard. Come in here just hide the dashboard, hides it for everything else. You can see how my little
speaker’s up here as well. And then what I did is I just went from artboard to artboard. So on the very first artboard,
we have our music playing. I have a title bar at the top. I can double-click on these, and I can type in the new titles. So we’re listening to satellite radio, and the search component
is on the page just below. In the car dashboard, the little hole I cut out in Photoshop is hiding the rest of this art. So when we go from this
artboard to this artboard, I just moved my components up. So when we actually run this, we’re gonna get this really
immersive experience. From the order, we’re gonna come down, then our app’s gonna come in here, and then our app is gonna
run inside of itself for a couple of frames. We’re gonna be able to pick
the latte, pick the size do the directions, and then when we get to the end, the thing will tell us
how long it’s gonna take, and then we have our little music app in its mini player state, and then the machine will ask us if we’d like to continue
listening to our music. This will animate back
to the original state. So the one thing that you wanna do when you’re creating the prototypes, we’ll take a look at the final here, is you wanna make sure that you complete one entire user task. When we put this together
for the calculator, the user task was to be
able to take the slider and drag it from the beginning to the end. That was one full task. We gave people a lot of feedback. Here we wanna be able to
have people start an action, walk through the entire experience, and then go back to the beginning. That creates one full task and shows us if the experience
that we put together is actually gonna be useful
for somebody who’s using this. So let’s test this,
I’ll hit command return. So we’re driving in our car. We decide that we would
like to get some coffee. Find me a coffee shop. – [Joanna] Here’s some
coffee shops near you. I can place an order for
you at The Coffee Shop. – Oh, sweet, yeah, place an order. – [Joanna] They offer custom
blends of coffee and tea, but they specialize in lattes. – So now imagine that
everything that’s happening now a company created their
app and paid for it, and they sort of have control a little bit for what’s happening in this environment. They can push promotions. They can do anything that we need. I’ll have a latte. A latte. (audience laughing) A lot of traffic, you know it’s– – [Joanna] Would you like a
small, medium, or large latte? The sizes are eight, 16,
or 24 ounce size cups. – A medium please. I like to be polite so the– – [Joanna] And lastly, their latte artist can illustrate a tulip, a
bear, or a rose on your latte. – I’ll have the teddy bear. So now the directions come up. – [Joanna] Here’s the
directions to The Coffee Shop. Your order will be ready when
you arrive in 12 minutes. Would you like to continue
listening to your music? – Yes. Then we go all the way
back to the beginning. Now we’ve fully completed
one entire user task for that entire process (laughing). (audience cheering) So in the beginning when I
was explaining this idea, oh it’ll be this in-app
thing, it’ll, you can, it’s an app, but it’s in
search, but then you leave. It’s really hard to explain
all that kind of stuff, but if I spend the time here in XD and just walk people through it, everyone gets that idea. And if any of the big search
engines are listening, you know, call me. So for the next one, let’s
come in and take a look at working with our gamepad. So for this example, I wanna
do something very similar. Oh, and by the way,
I’ll be taking questions at about 20 after, which is in about 12 minutes or so, so there are some microphones set up. Forgot to say that before. So what we’re gonna do here is I have set everything up in
here exactly the same way we have set up everything else. We have our master components. Again, this is the way I like to work. So I have a game here. This is a game that we’re, so pretend I’m playing this game. When I get notified that all of the videos are available from MAX online. So the idea here is maybe
there’s an application that’s running on my game console, or maybe there’s an application that’s running on my
television, my smart TV. In either case I’m using
my game controller. I’m working on this, and I wanna use my game
controller to continue to go through that entire experience. And so that’s gonna give me
this really extra dimension to hooking in some of my
content into my XD experience. So I have all the same
things we had before. I have the label. So here is small notification. So if I click on the notification, I can go to my intro
state and the hover state. In the intro state, if I open this up, what I did is I went into the logo, let me unhide this for a
minute, set the opacity. I set the artwork, and I just moved all of the
artwork around a little bit. So I took the MAX logo, don’t tell Adobe. I took the MAX logo, and I just rotated all
the triangles around to sort of make this sort
of interesting shape. And so what we’re gonna do is
I’m gonna auto-animate this. So this is gonna be the notification that’s gonna pop up while
I’m playing my game. And so it’s gonna sorta
animate into place, and then it’s gonna let me know that all of the MAX videos are available. So that’s what we’re gonna do
with this notification here. Next I have this little icon here which is going to be the highlight, so as I go through this experience, it’s gonna highlight
each one of these items down in the video channel. And I’m gonna hook that
up to the left controller, the left thumb controller on the gamepad. I can also set this to have a blend mode. If I double-click into here,
I can click on this exclusion which is actually created
by two different shapes excluded in XD. By the way all of the boolean
transforms are live in XD. So it’s like Pathfinder and Illustrator, but they are completely live. And I used a blend mode set to screen. Since we’ve got this nice
rainbow color in the background to match the branding of this conference, I’ve got this red highlight, but the red’s gonna interact
with the colors differently as it sorta goes through. So we’ve got this live
blending mode of this object that we’re gonna be working with as well. And then of course this
piece is wrapped up in its own component. And then we have the main
sort of MAX application. So if I open this up, and we can see we have
our MAX logo at the top. We have our masking group. I have a video list. The video list actually
hooks to a CSV file with everybody’s names, so all of these titles. Once you get used to hooking in with data, you’ll never type anything else again. Or if you do, you’ll type it in the data, or get your friends to do it. And you just hook that data into here so you don’t have to type it back out. And if I come back to
the main application, let’s come down. This is gonna be the intro state, ’cause imagine, again, I’m in
the middle of doing something, and when this starts, I wanna have this sort of start black, which would give me the impression that I’m exiting one application
and going into another. Then from there, we’re gonna
go into our title screen. Then this is gonna give
the application a chance to load all the videos. That’s gonna bring us
into our scrolling option. Now I have two different states here. I have the, after the
title, this is gonna pop up. We’re gonna get into
our, where’s the intro, oh, our default state. So go to default state here, and then I have a scrolling state where what I’ve done is
I’ve taken this repeat grid and just moved it off to the left. And this how I’m gonna
simulate having more than one video in my entire screen. And then finally, this is the
little shape I’m gonna use for anything that’s gonna be hooked up to the game controller. So for audio, I use the little speaker. For this one, I just have
a little gold diamond that I’m gonna put into place. And so what I’ve done is
I’ve gone through here, so in this particular example, I just have the two artboards set up. And let’s take a look
at how we would start to wire some of this together. So anybody who’s, I know
this is being recorded, and my friends are gonna see this. Pretend I’m actually
playing the video game. I am the worst gamer ever. My friends invite me
into Grand Theft Auto, because they like to watch me try to not fly my
helicopter into a building, or set myself on fire. They find this entertaining
for some reason. So let’s just pretend that
I’m playing a video game. Inside the game, what we’re
gonna be doing is just playing, and then once we get to the point where the videos are available, we’re gonna have this
notification that’s gonna pop up. So what I’m gonna do is
I’m gonna come in here and click on the playing option here. Let’s go to our prototyping mode, and from playing, we’re going to create a time based event. I’m gonna choose auto-animate, and we’re gonna auto-animate
down to the notification page. So that’s gonna bring us down here. It’s gonna take 1.6 seconds. On the first page, I have the
notification sitting here, and the notification
is in its intro state. There’s also a hover state, so if I move my mouse,
it’ll create a hover. And then on the second screen, the notification is in
its default state here. And if you remember I took
all the MAX triangles, I moved them around. They’re set to the opacity of zero. So now when I hit play,
this is going to play. It’s gonna go to this artboard. It’s gonna automatically time transition to the second artboard where this piece here
will do its animation, so it’s gonna animate at the same time. So to test that, I can
just hit command return. We’ll wait a couple of seconds. I’m playing my game (imitates gunfire). And then it says hey by
the way, all of the MAX conference stuff is available. Do you wanna watch all this stuff now? So that’s the beginning of that. So now let’s hook up our game controller, and let’s create something that will allow me to sorta go
into this application. So I’m gonna option drag a
copy of this entire artboard. Let’s bring this down here. Let’s go into our design view. So in the design view, I’m
gonna take the video game. Let’s just zoom this down a little bit. Let’s go back to our main artboard. I’m gonna simply come
in here and copy that. Let’s paste it in here, so that’s gonna come up on the front. And then let’s come in here
to the notification artboard. I put all of the controls
into game controller. So let’s grab one of
these, let’s grab exit. Let’s duplicate that. Gives me another copy. So I just like to put
these somewhere close to where they’re going to be. So this is going to launch
our MAX application, so I’ll just name this MAX. And now to make this work,
let’s go to prototype mode. I’ll remove the effect from here. And now I have a game
controller hooked up. So to hook up a game controller to your Mac or Windows machine, on the Mac you can go into
your Bluetooth settings. Turn on your wireless, sorry turn on your Bluetooth device, put it in discovery mode. Once it’s connected, we’ll see that the controller
is connected down here. When this is connected,
XD can pick this up and realize anything that I’m
doing inside of this document. So let’s go in and let’s bring
up the video camera again. So now you can see I’m
holding the Xbox controller. Over here on the right,
I have my XD experience. So move this over, let’s come down. Let’s select that yellow triangle. Let’s come over here
and add an interaction. Let’s come down and
choose game and keypad. Now down here for the key, in audio I can type in
what I wanna listen for. If I type in down here with the
gamepad or keyboard selected I can now come in here to the controller and start to just use the controller. So if I type the Y key, notice how it picks that out inside of XD, and it maps it to the Y
key on the controller. I can do A, X, I can do menu. I can do any of the analog
controls of the digital pad, the analog controls, the triggers. Anything that I wanna hit,
XD is gonna pick that up. Pretty sweet.
(audience applauding) So let’s come in here, this
is super fun by the way. All right, so let’s hit the A key. Again, I’m a terrible gamer, but usually when I hit A, I go into stuff. So let’s try to keep
some of the conventions from the gaming world. So if I hit A, A is going to let me go from the artboard I’m on,
we’re gonna auto-animate, down to the menu MAX down here. So now I’m gonna hit command
return, I’m gonna play this. We’re gonna wait a couple seconds. Our notification’s gonna come up. I still have the triangles there, and now I’m gonna hit the A key. And A is gonna bring me to… I wanna go to artboard one, there we go. Oh, no I wanna go to the notification one. Yeah, I should name that better. My bad, it’s called MAX, there we go. So now we’ll come in here
and we’ll link this… Come on. There we go, we’re gonna
link it down here instead. So then if I have this artboard selected, I can just hit that real
quick, hit the A key. Now we go over to MAX. So now let’s take a look
at this entire experience. Thank you, all at once. And then we’ll take a couple of questions. Let’s bring up our entire final example. So the other thing that
I’d like to do inside of XD is I will take a few
seconds and I’ll set this up so that I have all of the
artboards sort of lined up. That’s okay and everyone
comes up with their own ways to work inside of XD. For me I like to sort of structure this like I would do a CSS file, everything sort of nested down. And so what I can see from
this is from this screen here, I have a couple of listeners that are listening to
the game controllers. I’m listening to whether I’m taking the right thumb controller
and pushing it right or left. And I’m just cycling through all of these different highlights. So we’re gonna come up,
this is gonna fade in. We’re gonna see MAX. Then the videos are gonna come up. Then when I hit one of
my gamepad joysticks, we’re going to go to the first menu item, then the second, then the third, and you can see the blend
mode mixing in there. When I get to this state and I
hit the joystick to the right we’re gonna auto-animate to this state where the videos have been
adjusted toward the left. So we’re gonna get this effect
where I’m going this way, and the scroll bar is gonna
go the opposite direction. It’s gonna feel really
natural once we do that. We can do the last two. There’s an advanced technique in XD. That looks kind of fun,
I hope it comes out okay. And I hope it’s really
one hour and 22 minutes. And then if we click on that, we can go into our video playing state. I have a couple states here. And then finally we can go
actually into the video. So to test this entire experience, I’ll hit command return. Gonna move this down just a little bit. Let’s bring back our video. You can do it. There we go. And so now to play with
this entire experience. Let’s come in here. I will launch it again from the beginning. So I’m playing my game. My notification comes up. Let me just close this up a little bit. So in my game controller, I’m gonna hit A. We’re gonna go into our MAX thing. And actually just to make
this a little bit nicer, let me turn off all those triangles, ’cause I don’t wanna see those. So those are in my master component. Select this guy, open up the trigger. Take the rectangle, set
the opacity down to zero. Now we’ll do the whole thing. So now my notification’s gonna come up. I’m playing my game. I can hit X. It’s gonna bring me into that environment, background animation, auto-animate. Here come my videos. Now with my left thumb,
I’m gonna hit this. Now I can animate
through this whole thing. When I get to here, I go one more time. It slides over. I can come back. XD’s taking care of everything. All you need to do is link
to the different artboards. If I hit the X key, this will
exit me back out to my game. Let’s go in, wait for the
videos to come up again. Let’s arrow over. And it just the whole
point here is this feels like I’m really working in a game console. Let’s go here, let’s check this out. Play tutorial, more, add to my favorites. I hit down, it goes back up. Let’s play that so we’re watching that. I don’t like it anymore, let’s hit X. Let’s exit back outta there. I also tied the menu to
a tiny little artboard, so I can hit the menu, up and down. That’s gonna bring up the menu, and within the menu, I can actually start to animate through. Maybe go back to television, go home, or come down here, hit the
A key, go back to my game, and I can completely simulate
that entire experience inside of XD. (audience applauding) Cool, so it’s super fun. I can’t see if there’s
anybody who has questions. If you do, I’ll take
some questions, if not. – [Audience Member] I have a question. – Oh, excellent. – [Audience Member] Hi, I’m Amy. I’m a experience designer based out of LA, and I’ve been working
with a design problem that I’m having issues prototyping. So it’s a drag and drop interface with several different buckets that you can drop an object into. And within each bucket,
there are two zones. Is that something that’s
possible to prototype within XD? – You can prototype the action of dropping into each of the buckets
as a separate drag action. So you could have four artboards. You’d have artboard one
that simulates the drag into the first bucket. And then you could have the artboard that simulates the drag
into the second bucket. But you can’t do any
conditional logic right now with a single drag that would detect where you’ve actually
let go of that object. If that helps. So you can simulate the
drag to each bucket. You can’t do both buckets
in one single drag event. – [Audience Member] Got it, thank you. – Yeah. – [Audience Member] I have a question. – Yes. – [Audience Member] So does
XD if you put a video in, does it auto-play? – XD right now does not
support videos or animated GIFs in the design phase here. So the animations that you’re seeing here are all done with the
auto-animate feature. And you add a timing
event to the artboard, and XD will automatically
animate to those other artboards based on time. Like we’re doing here, I start the game. It waits five seconds and then
animates to the next state. – [Audience Member] Okay, thank you. – I’m super waiting for
media to be in XD though. – [Audience Member] Yeah, me too. – [Audience Member] I’ve
got a question here. – Yes. – [Audience Member] With the
first example with the slider, if you want it to actually
have it have stops so there’s six values, instead of it being one drag across and having all of the values float, could you actually do stops, or would that be six artboards
with a stop for each? – You can’t simulate one full
motion with the six stops, because when you have a drag event, the object when you drag
to the second artboard, once you’re on that second artboard, if you wanted to create another drag from that artboard to
the next one you can, but then you can’t go
back on the first one. It’s still one object that
is creating a transition between the two different artboards. – [Audience Member] Okay,
so if you wanna do say stop one to two, and two to three, you would have to have like
three artboards, you’re saying? – Yes, but you can’t go
from two back to one then. So what happens is you’re
on one, you click the thumb, you drag to two, you’re now on two. Because that thumb can
only have one action. – [Audience Member] And you
can’t ever reverse action to go back before?
– Right, right. Yeah, yeah, not yet. – [Audience Member] Thank you. – [Audience Member] Hi, Chris. Thank you so much for
the awesome presentation. – Oh, thank you. – [Audience Member] What’s the roadmap for conditional logic? – I don’t know, I don’t
work for Adobe (laughing). I don’t know, I don’t
know what the plans are. They talk a lot about it on the forums. If you wanna see some
of the roadmap things that they’re doing, they do talk about some
of the different things up on the forums, but I don’t have access to
know what that plan would be. – [Audience Member] Thank you. – I would love it though. – [Audience Member] You showed
us the Google Sheets plug-in. Do you have any other plug-ins that you’d consider essential? – Yeah, there’s a JSON
plug-in that came out just six or seven weeks ago where you can hook
directly into a JSON feed, which is incredibly awesome. And if you are working with developers who use REST API for example, that means you can then
construct your own URLs to control the JSON data
that gets pulled back, and then you can reassign those objects you defined in REST to objects that you have defined
inside of your XD artboard. And they’re adding plug-ins all the time. There’s tons and tons
of different companies adding these in. So you can just continue to search for things like dynamic data or live data, but JSON is probably gonna
become my next favorite from Google Sheets. – [Audience Member] Great,
this was awesome, thank you. – Oh, thank you so much. – [Audience Member] Hey,
I actually had a question about host design. So exporting to Zeplin or PDFs. Now that we’re dealing
with multiple states, versus multiple artboards, will you be able to
export those individually to make sure that the developers see each individual state
from a development side? – If you need solid screenshot
from an individual state, then you need to put each, define each state as one of the artboards. So like what I did with
the first calculator. I made four different artboards so that we could see the states of all the different calculations. That could go right out to a PDF, to multiple PING files. So if you do need to have
those static captures, then put each one on a different artboard. And we did that specifically
for the calculator as well, because we just wanted
to be able to see that all in a flat state. You can also, I would then duplicate that and make an interactive prototype, because I think being
able to show the developer things that you have in
mind for not only motion, but what items can trigger certain events and how things animate back and forth, is gonna help a lot as well. And and there is a share
with developer option in XD where XD will basically
put the entire document in the creative cloud and give your developer
like a little shopping cart, so they can go through and pick graphics. They can extract CSS rules and properties, and it’ll give them sort of extra data that you might not send to
the marketing department or to your client in order to see. So the share for developers
is a relatively new sharing mechanism inside of XD as well. So check it out. It opens up a whole bunch of
new stuff like extraction did in Photoshop for creative cloud files. And so that could offer you a whole bunch of opportunities as well. – [Audience Member] Thanks. – Cool. – [Audience Member] So
more or less kind of a, from a simpler perspective
than the animations, but whenever we’re doing repeat grids and we’re actually sending something that might be real to developers, when it comes to images, repeat grid doesn’t seem to retain
the file name the same way if you’re drag and dropping
an image into a single asset or square, circle, whatever it might be. Have you had any workarounds with that? So if you’re dropping multiple
images into a repeat grid, it doesn’t, when you go to like export, you drop in Avocode or Zeplin,
or whatever it might be, it’s not retaining a file name, and then developers end up naming a file, an image, image one, zero,
zero, zero, eight, dot PNG. – Oh, no I was not aware of that. Because it’s stored in the XD file as the name that you dragged in there. – [Audience Member] In
the repeat grid format? – Yeah, ’cause that’s
how it’s referencing it. Unless it renames it when it pulls it in. I’m not aware– – [Audience Member] It
usually like it keeps that like same single file name or whatever you name
that initial instance. – Oh, I see what you’re saying. Yeah, so if, this is like
what I was saying before. If you share that with the developer, do share for developer, every one of those individual instances across all the repeat grids will show up in a category of images that your developer can go in and pick. So they can go in and sort of cherry pick or make a little shopping cart of images they want to extract out. – [Audience Member] Yeah,
if they’re gonna name them whatever they want or pull
them as some sort of random. – Right, but as far as the state there, it’s XD’s mechanism in the repeat grid. You’re only working with a single group, and XD is replicating that out throughout the entire piece, so when you just look
at that at face value or translate that to another application, they’re not seeing the intelligence that the repeat grid is
applying to all that. – [Audience Member] Right, so
you haven’t had any experience of like actually keeping unique file names when you’re doing the data extrapolation or even just dragging and
dropping multiple images into a grid? – No, well, we did the
development on that too (laughs). – [Audience Member] No, it’s great. It’s really a useful tool. It’s just when we get to developers, they won’t uniquely name anything, or they’ll just keep it very random. – Yeah, exactly. – [Audience Member] No, it’s okay. – I don’t think, there’s
not a way to get to the internal naming
structure of XD’s repeat grid when you bring it into
another platform like that. – [Audience Member] All right, thank you. – Yeah. – [Audience Member] Hi, there. I’m wondering if you have any tips for prototyping searches or catalogs so that we could send the link and someone could type
something and hit enter and see a different artboard? – Oh. You can add an event with the keyboard. So when we added the game
controller for example. Inside of XD, there’s an
option that you can choose to say I’d like to listen
to, just grab an item here. You can come in and say the
event trigger for example is going to be game and keys. And then you can put in
a certain set of keys that somebody needs to type. You would trigger something
on the first letter, so if I wanted to search for cats, like you might just have the letter C. So when somebody typed C-A-T-S, as soon as they hit C, it’ll actually just go to that. So that’s the only thing
that you can do now. And I did the same thing with audio. I typed in just the word latte, but I can say something like, “I would like a latte, please,” and it’ll wait to see when it sees that. So you can use the key, individual keys to sort of start that search so that it would look
like somebody typed it in, but there’s no way right
now to type in a full word and hit search or evaluate
what they’ve put in there. – [Audience Member] Okay,
cool, that helps, thanks. – Cool, cool, all right. I can’t tell, all right,
I think we’re done. (audience cheering) Thank you very much for coming out to advanced prototyping with XD. (electronic jingle)

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *