"React Components (2018)" was retired on March 1, 2023. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Creating Mockups!
You have completed Creating Mockups!
Preview
Learn how to create a mockup in Adobe XD using Apple's UI kit.
Resources Mentioned:
- Human Interface Guidelines
- UI kits for Adobe XD and other design software
- San Francisco font - Apple
- SF Symbols (macOS 10.14.4 or later) or Font Awesome
- News article used in mockup - from NASA
Resources for non-Adobe XD users:
Further Reading:
- SF Symbols: The benefits and how to use them - by Antoine van der Lee
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Welcome back.
0:01
Now, let's start mocking up stuff.
0:03
I'll demonstrate making a high-fidelity mockup in Adobe XD.
0:06
But if you already have a favorite
design tool, feel free to use it.
0:10
Tools such as Figma, or
0:16
Sketch have a lot of the same
resources I'll use in this demo.
0:17
I'll start with these wireframes I made
for news article layout on an iPhone app.
0:21
Since I'm creating an iOS app, I'll refer
to Apple's human interface guidelines.
0:27
I'll use Apple's UI kit for Adobe XD.
0:32
A UI kit provides patterns for
native UI elements such as components,
0:35
cards, navigation,
filters, social share, and
0:40
so on,
that you can reuse in your app designs.
0:45
Think of them as stickers that you
can copy and paste in your mockup.
0:48
Download the UI kit and
check it out for yourself.
0:53
In order to use Apple's UI kit,
be sure to also install the SF Pro font
0:56
SF Pro is the native font
pre-installed on Apple
1:04
devices that run on iOS, macOS and tvOS.
1:09
If you're on a Mac, also installed
the SF symbols app as an icon resource.
1:13
If you're on Windows or another platform,
1:18
check out an alternative icon
resource in the teachers notes.
1:20
SF symbols is an icon
library created by Apple.
1:24
It contains free icons to use in your app.
1:28
Although, they can't be use for
any branding or trademark purposes and
1:31
some have additional license restrictions.
1:35
The great news is the vast majority
are free to use with minimal restrictions.
1:38
The components in the UI kit
frequently make use of these icons.
1:44
Before I move on, I wanna offer a tip,
1:49
in case you get stuck
installing these resources.
1:51
You may encounter missing icons that
appear as a question mark in a square, or
1:55
missing fonts which are noted in
the assets and text sections of XD.
2:00
This can happen if there's
a version conflict with the fonts.
2:05
This happened to me since I had an older
version of the fonts on my computer.
2:08
Try removing or
uninstalling the fonts, and
2:12
reinstalling the latest versions from
the Apple Developer resources website.
2:16
Another troubleshooting tip is to
double check the fonts are enabled.
2:21
If you're using a Mac,
check on font book under computer or
2:25
user to ensure the fonts are enabled.
2:29
If you're using a PC,
check in your font manager.
2:33
The first screen I'll
design is the home screen.
2:37
I'll copy and paste the tabbed app
artboard from the Apple UI kit.
2:40
That gives me the overall
shape of an iPhone,
2:46
the taskbar, toolbar, and home button.
2:48
So I actually find it difficult to
select elements when the display
2:53
shape is shown here because it's a layer
that's sitting on top of everything else.
2:58
And it's very easy to select that when
you actually wanna select stuff that's
3:02
underneath it.
3:06
So for now,
while I'm working on the mockup,
3:07
I just like to hide the display shape.
3:09
And then later on, when I wanna see how
that will look, I can turn it back on.
3:12
So now,
I'll trim the tabs down to three tabs.
3:18
And you can see here that matches
how it is in the wireframe.
3:24
So we just need Home,
Topics, and Personalize.
3:27
I'll use the house icon for
the Home tab, the book icon for
3:47
the Topics icon, and
the wand and stars icon for Personalize.
3:52
When you find the icon you like,
just select it and
3:57
then on your keyboard, do a copy.
4:00
So if you're Mac, it's Cmd+C.
4:02
And then you can paste it into Adobe XD.
4:04
So just select the icon and
then Cmd+V to paste.
4:08
So just select the icon and
then Cmd+V to paste it if you're on Mac.
4:15
And if you're on Windows, just do your
normal copy and paste commands for
4:20
keyboard.
4:24
So I'm just gonna go through and
copy in all those icons.
4:26
All right, now that I'm happy
with how that tab bar looks,
4:32
I wanna turn it into a component.
4:35
And as you can see here,
4:38
it's actually a linked component because
I copied it from Apple's UI kit.
4:39
And so,
It’s sort of linking off to that other file.
4:44
I actually just wanna turn
it into a local component.
4:48
So to do that,
I can go to the Assets panel, and
4:51
then scroll down where
it says the Components.
4:56
And here it is,
it's the Tab Bar Component.
4:59
And I just want to right-click, and
then click Make Local Component.
5:03
So you'd want to use the links components
if you are working on a file that
5:11
had all your design system in it.
5:16
And you just wanted
to update that one file so
5:18
it could trickle across
multiple Adobe XD files.
5:22
But in this case, I just wanna keep
Apple's UI kit as its own file and
5:25
not use that as my own
personal design system.
5:29
So in this case, I just wanted to borrow
from the UI kit, throw it in here,
5:33
and it's locally a component just for
this file.
5:38
Regardless, so now that it's a component,
5:45
I can use it very easily across all
the artboards within this file.
5:49
So now, instead of having to
reinvent the wheel every time I
5:54
want to create the tab bar,
I can just edit it here in one spot.
5:59
So, now I want to add the logo
to the top of the screen.
6:07
So I wanna have this colored
rectangle background behind
6:35
the taskbar to accentuate the logo.
6:39
So let's grab the logo here from the
brand's artboard, and then paste it in.
6:45
And that looks really great.
6:54
I also wanna make sure I'm renaming
these artboards as I go along.
6:56
So we're working on the the home
screen for this app.
6:59
And I wanna copy in all of this
content that I have here because I'm
7:03
gonna build off of that.
7:07
So selecting that home screen,
I'm just gonna paste in everything.
7:10
And you see how it's overlapping here.
7:19
We just wanna make sure we right-click and
send to the back, so
7:21
that way the tab bar is on top.
7:25
And I'm gonna do Cmd+G just
to turn everything into
7:28
a group, And label that content.
7:32
Great.
7:41
Now, I have some colors in mind for
these labels,
7:43
so health, environment and lifestyle.
7:46
Those are the different news categories,
and I wanna color code them.
7:50
So I wanna go back to the brand board
here and select all these colors and
7:56
add them to my palette.
8:00
So I'm just selecting each color,
and then adding them here.
8:08
By clicking this + icon, and
that just saves them for later.
8:14
So I can easily refer to those same
colors, when I wanna apply them.
8:17
And also, have a couple gradients here.
8:24
And so, now you can see here this color.
8:29
I could just easily select it from the
palette here to make sure I'm always using
8:33
this light green.
8:38
Okay, so for health,
I wanna make it that nice pink color.
8:41
Environment, I think
green would look nice,
8:51
it has that kind of
earthy nature look to it.
8:54
And lifestyle, let's do the purple.
8:58
And then now, I wanna replace
all that placeholder text that
9:05
worked really well in
the wireframe with actual content.
9:09
So I have this content
off the screen here.
9:13
I'm just gonna copy it in for time's sake.
9:16
All right, this is looking great.
9:21
I'll move on to the article view now.
9:23
All right, so I've copied my artboard and
I've renamed it article.
9:26
And then, I'm just gonna copy all
the contents from the article view and
9:31
paste it over.
9:36
And Send to Back.
9:40
And once again, I'm just gonna
group it and call it content.
9:45
And then just a note, you can also copy
all the text styles from the Apple UI kit.
9:51
And if you do,
9:57
I just wanted to note something about
the way that the text can be resized.
9:58
So let's say I copy this.
10:04
And then if I paste it on here,
you'll see that the only option for
10:07
resizing this text is
through this little dot here.
10:13
And that makes the text larger or smaller.
10:17
But if you're hoping to resize
the actual blue box here and,
10:20
say, make this a more narrow text box,
the way you do that is down here.
10:25
So see how this is selected?
10:33
Click this and
then it turns it into area text, and
10:37
that's when you have more dots for
more control.
10:42
So I could make this spanned really long,
10:46
I could make it shorter and get cut off,
I could make it tall and wrap.
10:48
And so you'll notice that when you
copy the text over from the UI kit,
10:54
it always starts out as point text.
10:59
So point text changes the font size,
11:01
whereas the area text changes
the actual dimensions of the text box.
11:04
So hopefully that helps you out as you're
trying to wrangle the text in here.
11:13
And then for this screen,
I'll add the actual content as well.
11:19
So in the standard iPhone view,
11:24
the article gets clipped off
pretty early on in the text.
11:26
But since I want to design for
the entire article,
11:30
I can stretch the height of
the artboard to show all of it at once.
11:33
I've actually already designed this view,
and
11:38
I'll paste it in to show you how it looks.
11:41
Now, you'll notice there are a couple
new pieces to this screen here.
11:45
So I'll show you how I added those in now.
11:48
Now let's add a couple
more navigation pieces.
11:52
I'll grab a navigation
bar from the UI kit.
11:55
I'll hide the Right Accessory for now,
I don't think I need an action over there.
12:02
I want this to just say Back, and that'll
just lead folks back to the home screen.
12:09
And this will just say the name
of the app, YORLY news.
12:15
I'll just stretch that out so we can
see all that text and center align it
12:24
All right, so now I need a toolbar.
12:33
So let's pop over to the UI kit again.
12:39
All right, I'll grab this toolbar.
12:43
And then same concept as before,
12:48
I just wanna replace these
icons with icons that I want.
12:50
And you can see I actually
already did this here for
12:54
this view that I just showed you,
so I'm just gonna copy this over.
12:57
So I just have a back button,
heart to like the article,
13:03
a little comment box so that way
you can comment on the article, and
13:09
then a share icon so that way you can
share it through email, for example.
13:13
All right, so this is basically two
different ways to do this article view.
13:20
So on the left here, it's kind of
a limited view of how this page looks, but
13:25
this is actually in proportion to
how you would see it on an iPhone.
13:29
And then on the right here,
13:34
I have the entire page in view because I
wanna actually show how I wanna do this.
13:36
Pull quote, for instance, I have a really
subtle, wavy gradient back here,
13:42
this shape, it gives a little
bit of interest to the page.
13:48
And then I also have this image here
with a caption, Another headline,
13:53
and this little blurb here that
talks about the related stories and
14:00
links off to related articles.
14:05
So for this option,
you'll notice that the toolbar
14:09
actually just stays in place as
it would appear on the iPhone.
14:12
And that just makes it easy if you
want to demo how the scrolling looks.
14:16
So if you select the artboard, this little
14:20
dotted line shows up, and that is
where the vertical scrolling happens.
14:24
So you can see here the default
state would be none, but
14:30
if you set it to vertical, you can set
it to stop where that toolbar ends.
14:33
Oops, that's not it.
14:43
So the normal height of
this iPhone screen is 812.
14:45
So I just take that number,
add it to this viewport height for
14:50
the scrolling, and then it knows
to pin that toolbar at the bottom.
14:55
So you can see how this looks if I click
Play, and I can scroll down the page.
15:01
So we're not gonna get into interactive
prototyping in this workshop, but
15:09
I just wanted to show you that if you were
curious to see how it really looks in
15:13
action.
15:17
It is pretty exciting.
15:18
All right, so
next up is the article share screen.
15:20
For this, I'll copy the activity
view control from the UI kit.
15:24
All right, so I just customized the title
there, and otherwise it's pretty default.
15:38
All right,
now I'll mock up the comment panel,
15:46
just gonna copy Article Share,
15:51
rename it Comment,
delete this activity view.
15:54
Keep that semi-translucent
gray rectangle that's
15:59
overlaying everything because this,
again, will be another overlay.
16:05
All right, that's just my
little placeholder for the X.
16:18
Actually gonna copy this
from SF Symbols again.
16:21
I'm gonna copy in a little icon of
a user here also from SF Symbols.
16:41
Make this a little smaller,
16:51
And tighten this line height a bit.
17:06
I wanna lighten this to a lighter gray.
17:08
And then let's zoom out a bit,
I just wanna copy this a few times here.
17:13
Let's make this a little taller, and
that way I can put a few more comments in.
17:24
And then I wanna paste in some
realistic comments in here.
17:29
And then I noticed this one
actually wraps to three lines, so
17:36
I'll make that a little bigger,
move this one down.
17:40
And then I wanna add a rectangle here,
17:45
Get a light gray.
17:54
Add some border radius, I'll make it the
same width as the other content in here.
18:00
And I've got some placeholder text.
18:08
Seems a little big,
let's tone it down a bit.
18:14
And all right,
now let's mock up the next screen,
18:18
which is what the user will see
when they click on the comment box.
18:22
So I'll copy the Comments artboard and
I'll rename it to Comment Active.
18:28
So I wanna keep everything except for
these comments here.
18:37
And I'll make the comment box larger
to give them more space to type.
18:43
And then you can see here I just did the,
I don't know the technical term, but
18:48
the the vertical line character on your
keyboard, just above the Enter button.
18:53
And it looks like a cursor, so it looks
like I'm actively gonna type in this
19:01
box here, which is what I want,
that's what effect I want here.
19:06
And then I'll just zoom in a bit and
I wanna add a button that says Post.
19:11
And now I wanna copy
the keyboard from the UI kit.
19:26
So you can see, my text box is
actually too tall right now, so
19:41
I'm just gonna shorten this a bit.
19:46
I'm gonna group this button so
it's easier to select.
19:51
Nudge that 12 pixels apart there and
make sure that's aligned to the bottom.
20:00
Okay, great.
20:09
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up