1
00:00:00.05 --> 00:00:02.05
- [Instructor] You can
also easily export out

2
00:00:02.05 --> 00:00:04.04
all of your content out of XD.

3
00:00:04.04 --> 00:00:05.06
And that's what I want to do now.

4
00:00:05.06 --> 00:00:08.06
Notice that I don't
have anything selected.

5
00:00:08.06 --> 00:00:12.04
Because all I want to do
is go to File, Export,

6
00:00:12.04 --> 00:00:15.05
and just export out to my desktop

7
00:00:15.05 --> 00:00:18.01
in a folder for my artboards.

8
00:00:18.01 --> 00:00:22.02
So, I'm going to make a new
folder called Artboards,

9
00:00:22.02 --> 00:00:23.09
just like that.

10
00:00:23.09 --> 00:00:28.00
I can export out a JPG, PDF, SVG, PNG.

11
00:00:28.00 --> 00:00:30.06
So, let's say, for instance,
I want to do a PDF,

12
00:00:30.06 --> 00:00:36.01
I can do all those as a single
PDF or multiple PDF files.

13
00:00:36.01 --> 00:00:37.07
We could easily do either one of these.

14
00:00:37.07 --> 00:00:40.03
I'm going to do a single
PDF exporting that out.

15
00:00:40.03 --> 00:00:42.05
And those are all my artboards

16
00:00:42.05 --> 00:00:45.09
as one single PDF for review.

17
00:00:45.09 --> 00:00:47.08
So, that's one way of doing things.

18
00:00:47.08 --> 00:00:48.08
In this Artboard folder,

19
00:00:48.08 --> 00:00:52.01
sure enough there we see our
website and all of the pages

20
00:00:52.01 --> 00:00:53.06
as I click through them.

21
00:00:53.06 --> 00:00:54.09
Works out great.

22
00:00:54.09 --> 00:00:55.09
Let's go beyond that.

23
00:00:55.09 --> 00:00:58.08
Because what if I want to
give things to a developer.

24
00:00:58.08 --> 00:01:01.01
So, I need to give these
assets to the developer.

25
00:01:01.01 --> 00:01:02.07
Well, all I need to do there

26
00:01:02.07 --> 00:01:05.07
is select that individual asset.

27
00:01:05.07 --> 00:01:07.04
And what I'll typically do is

28
00:01:07.04 --> 00:01:10.03
I'll select multiple
assets that are the same.

29
00:01:10.03 --> 00:01:14.04
So, all of these, I want
them all to be JPGs.

30
00:01:14.04 --> 00:01:16.00
So, with them all selected,

31
00:01:16.00 --> 00:01:19.08
I'll go to File, and
then I'll go to Export.

32
00:01:19.08 --> 00:01:21.00
And in this case,

33
00:01:21.00 --> 00:01:25.07
I'm going to create a new
folder called Exported

34
00:01:25.07 --> 00:01:27.03
for my developer.

35
00:01:27.03 --> 00:01:30.06
In this case, JPG, 100%,

36
00:01:30.06 --> 00:01:31.08
Export.

37
00:01:31.08 --> 00:01:34.02
And it does exactly what
you think it's going to do.

38
00:01:34.02 --> 00:01:36.01
But let's just take a
look at those assets.

39
00:01:36.01 --> 00:01:37.09
You can see them right in here.

40
00:01:37.09 --> 00:01:40.06
So, that's the name of these graphics

41
00:01:40.06 --> 00:01:43.01
in that particular layout.

42
00:01:43.01 --> 00:01:44.07
And then you can see this photo

43
00:01:44.07 --> 00:01:46.03
was just peak photo grays.

44
00:01:46.03 --> 00:01:50.03
These happen to be the
images named accordingly.

45
00:01:50.03 --> 00:01:51.04
All right, so let's go beyond that

46
00:01:51.04 --> 00:01:53.06
because there are more
options that we can do.

47
00:01:53.06 --> 00:01:55.09
In fact, oftentimes what we need

48
00:01:55.09 --> 00:01:58.02
is we need these assets here,

49
00:01:58.02 --> 00:02:02.04
these graphics right here
as maybe a different type.

50
00:02:02.04 --> 00:02:04.00
So, just holding down the Shift key,

51
00:02:04.00 --> 00:02:08.04
I'm actually selecting all of
these vector-based graphics.

52
00:02:08.04 --> 00:02:10.01
Okay, with them all selected,

53
00:02:10.01 --> 00:02:13.05
I can go to File, Export,

54
00:02:13.05 --> 00:02:16.02
and change this to SVG.

55
00:02:16.02 --> 00:02:18.05
For SVG, you can have the images embedded

56
00:02:18.05 --> 00:02:19.08
or even linked.

57
00:02:19.08 --> 00:02:22.03
You can also optimize them using Minify,

58
00:02:22.03 --> 00:02:24.03
which is a great way of doing things.

59
00:02:24.03 --> 00:02:26.03
But we'll just export to the same folder.

60
00:02:26.03 --> 00:02:27.07
And it's going to do the obvious.

61
00:02:27.07 --> 00:02:30.01
Keep in mind these icons are white,

62
00:02:30.01 --> 00:02:32.04
so we're really not going to
be able to see them too well

63
00:02:32.04 --> 00:02:33.06
as I go into this folder.

64
00:02:33.06 --> 00:02:36.09
Maybe the logo you can see those dots.

65
00:02:36.09 --> 00:02:41.05
So, actually everything
is exported out as an SVG.

66
00:02:41.05 --> 00:02:43.04
And if you want to get really crazy,

67
00:02:43.04 --> 00:02:46.00
the last thing I'm going to point out

68
00:02:46.00 --> 00:02:49.03
is exporting for even mobile.

69
00:02:49.03 --> 00:02:50.01
All right?

70
00:02:50.01 --> 00:02:52.07
So, what I can do is I can
select all of these assets

71
00:02:52.07 --> 00:02:53.05
if I want to.

72
00:02:53.05 --> 00:02:54.03
Everything.

73
00:02:54.03 --> 00:02:56.03
Go to File, Export.

74
00:02:56.03 --> 00:02:58.02
And in this case, I'm
just going to do PNG.

75
00:02:58.02 --> 00:03:00.07
But what I want to show
you is I can export

76
00:03:00.07 --> 00:03:04.01
at just the size that
it's at or I can say Web.

77
00:03:04.01 --> 00:03:08.00
So, if you want to export
them out as twice the size,

78
00:03:08.00 --> 00:03:11.09
it's going to give me two
different folders here.

79
00:03:11.09 --> 00:03:14.08
Since this is iOS, I'm going to
make this even more advanced.

80
00:03:14.08 --> 00:03:19.00
But we need to compensate
for high DPI images.

81
00:03:19.00 --> 00:03:23.02
So, it's designed at, say for
instance, one time the size.

82
00:03:23.02 --> 00:03:25.03
So, at 100%.

83
00:03:25.03 --> 00:03:27.00
And click Export.

84
00:03:27.00 --> 00:03:29.03
Again, I did it to that exact same folder.

85
00:03:29.03 --> 00:03:30.06
Let's see what happens.

86
00:03:30.06 --> 00:03:33.01
Here we have it.

87
00:03:33.01 --> 00:03:35.00
All of these graphics.

88
00:03:35.00 --> 00:03:38.03
So we can see, let's
actually take a look at

89
00:03:38.03 --> 00:03:40.06
some of these things in here.

90
00:03:40.06 --> 00:03:42.05
The background for instance.

91
00:03:42.05 --> 00:03:44.07
Here's the background.

92
00:03:44.07 --> 00:03:48.02
Background three at original size,

93
00:03:48.02 --> 00:03:50.09
two times the size, three times the size.

94
00:03:50.09 --> 00:03:53.08
Which I actually created
it even larger than this.

95
00:03:53.08 --> 00:03:57.07
So, I'm covered when it
comes to exporting graphics

96
00:03:57.07 --> 00:04:00.04
using Adode XD.

97
00:04:00.04 --> 00:04:02.01
And it really is that easy

98
00:04:02.01 --> 00:04:04.02
when it comes to exporting out content.

99
00:04:04.02 --> 00:04:07.02
Notice that when you are not able to get

100
00:04:07.02 --> 00:04:09.07
any sort of code out of XD,

101
00:04:09.07 --> 00:04:12.02
I did want to point out one last thing.

102
00:04:12.02 --> 00:04:14.09
If I go up here, I can
Publish Design Specs.

103
00:04:14.09 --> 00:04:16.07
So, keep your eye on this.

104
00:04:16.07 --> 00:04:19.08
We're going to see a lot of
developments in this area.

105
00:04:19.08 --> 00:04:22.07
So, I'm not going to worry
about naming this or anything.

106
00:04:22.07 --> 00:04:25.07
I'm going to create a public
link based on this file.

107
00:04:25.07 --> 00:04:28.00
But this is going to give you a URL

108
00:04:28.00 --> 00:04:30.02
that you can also send to your developers

109
00:04:30.02 --> 00:04:34.01
and this will tell them
the, say for instance,

110
00:04:34.01 --> 00:04:36.00
the position of elements,

111
00:04:36.00 --> 00:04:38.01
what fonts are being used,

112
00:04:38.01 --> 00:04:42.02
the size of those fonts,
even different colors,

113
00:04:42.02 --> 00:04:44.00
all through these design specs.

114
00:04:44.00 --> 00:04:45.04
Looks like, even though
it's still uploading,

115
00:04:45.04 --> 00:04:47.06
we can go ahead and open this link.

116
00:04:47.06 --> 00:04:49.03
So, let's take a look at it right here.

117
00:04:49.03 --> 00:04:52.02
It's still publishing out.

118
00:04:52.02 --> 00:04:54.03
Here we have all of these pages.

119
00:04:54.03 --> 00:04:58.03
So, we can kind of see the
navigation for all these.

120
00:04:58.03 --> 00:05:00.01
I can click into this page,

121
00:05:00.01 --> 00:05:02.09
and you can see the number
of colors being used.

122
00:05:02.09 --> 00:05:04.07
And so you get the hex colors.

123
00:05:04.07 --> 00:05:05.07
You get the fonts.

124
00:05:05.07 --> 00:05:09.07
As roll over these character styles,

125
00:05:09.07 --> 00:05:12.00
I can see where they're being used,

126
00:05:12.00 --> 00:05:14.09
and then I can get
positioning for those items.

127
00:05:14.09 --> 00:05:16.08
So, as I select hikers,

128
00:05:16.08 --> 00:05:23.02
I can see where it's at on
this page as well as the size.

129
00:05:23.02 --> 00:05:25.01
So, there's a lot you
can do with design specs,

130
00:05:25.01 --> 00:05:28.00
all you need to do is send
this URL to your developer.

131
00:05:28.00 --> 00:05:29.05
And just keep an eye out for this

132
00:05:29.05 --> 00:05:31.09
cause there's going to be a
lot of development in this area

133
00:05:31.09 --> 00:05:33.03
from Adobe as well.