- [Instructor] You can also easily export out
all of your content out of XD.
And that's what I want to do now.
Notice that I don't have anything selected.
Because all I want to do is go to File, Export,
and just export out to my desktop
in a folder for my artboards.
So, I'm going to make a new folder called Artboards,
just like that.
I can export out a JPG, PDF, SVG, PNG.
So, let's say, for instance, I want to do a PDF,
I can do all those as a single PDF or multiple PDF files.
We could easily do either one of these.
I'm going to do a single PDF exporting that out.
And those are all my artboards
as one single PDF for review.
So, that's one way of doing things.
In this Artboard folder,
sure enough there we see our website and all of the pages
as I click through them.
Works out great.
Let's go beyond that.
Because what if I want to give things to a developer.
So, I need to give these assets to the developer.
Well, all I need to do there
is select that individual asset.
And what I'll typically do is
I'll select multiple assets that are the same.
So, all of these, I want them all to be JPGs.
So, with them all selected,
I'll go to File, and then I'll go to Export.
And in this case,
I'm going to create a new folder called Exported
for my developer.
In this case, JPG, 100%,
Export.
And it does exactly what you think it's going to do.
But let's just take a look at those assets.
You can see them right in here.
So, that's the name of these graphics
in that particular layout.
And then you can see this photo
was just peak photo grays.
These happen to be the images named accordingly.
All right, so let's go beyond that
because there are more options that we can do.
In fact, oftentimes what we need
is we need these assets here,
these graphics right here as maybe a different type.
So, just holding down the Shift key,
I'm actually selecting all of these vector-based graphics.
Okay, with them all selected,
I can go to File, Export,
and change this to SVG.
For SVG, you can have the images embedded
or even linked.
You can also optimize them using Minify,
which is a great way of doing things.
But we'll just export to the same folder.
And it's going to do the obvious.
Keep in mind these icons are white,
so we're really not going to be able to see them too well
as I go into this folder.
Maybe the logo you can see those dots.
So, actually everything is exported out as an SVG.
And if you want to get really crazy,
the last thing I'm going to point out
is exporting for even mobile.
All right?
So, what I can do is I can select all of these assets
if I want to.
Everything.
Go to File, Export.
And in this case, I'm just going to do PNG.
But what I want to show you is I can export
at just the size that it's at or I can say Web.
So, if you want to export them out as twice the size,
it's going to give me two different folders here.
Since this is iOS, I'm going to make this even more advanced.
But we need to compensate for high DPI images.
So, it's designed at, say for instance, one time the size.
So, at 100%.
And click Export.
Again, I did it to that exact same folder.
Let's see what happens.
Here we have it.
All of these graphics.
So we can see, let's actually take a look at
some of these things in here.
The background for instance.
Here's the background.
Background three at original size,
two times the size, three times the size.
Which I actually created it even larger than this.
So, I'm covered when it comes to exporting graphics
using Adode XD.
And it really is that easy
when it comes to exporting out content.
Notice that when you are not able to get
any sort of code out of XD,
I did want to point out one last thing.
If I go up here, I can Publish Design Specs.
So, keep your eye on this.
We're going to see a lot of developments in this area.
So, I'm not going to worry about naming this or anything.
I'm going to create a public link based on this file.
But this is going to give you a URL
that you can also send to your developers
and this will tell them the, say for instance,
the position of elements,
what fonts are being used,
the size of those fonts, even different colors,
all through these design specs.
Looks like, even though it's still uploading,
we can go ahead and open this link.
So, let's take a look at it right here.
It's still publishing out.
Here we have all of these pages.
So, we can kind of see the navigation for all these.
I can click into this page,
and you can see the number of colors being used.
And so you get the hex colors.
You get the fonts.
As roll over these character styles,
I can see where they're being used,
and then I can get positioning for those items.
So, as I select hikers,
I can see where it's at on this page as well as the size.
So, there's a lot you can do with design specs,
all you need to do is send this URL to your developer.
And just keep an eye out for this
cause there's going to be a lot of development in this area
from Adobe as well.