Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
If you’re designing an app for mobile, then it’s more than likely you will want to view those designs on a mobile device. If you have an iOS device, you can do this with Sketch Mirror.
iOS Mirror is a separate application from Sketch
You can find Sketch Mirror in the iOS App Store.
If you're designing an app for mobile,
0:00
then it's more than likely you will want
to view those designs on a mobile device.
0:02
If you have an iOS device, you can do just
this with Sketch Mirror.
0:06
Sketch Mirror is an optional separate app
for
0:11
iOS, which means you will have to buy it
on the App Store.
0:14
And you can do this by searching for
Sketch Mirror.
0:17
Or clicking on the button that appears
into the mirror pop over in the toolbar.
0:20
The application's price will depend on the
country's App Store, you are visiting and
0:28
it can run on any iOS device running iOS 6
and up.
0:32
[SOUND] So once you have downloaded and
installed the app,
0:36
we will need to connect it to Sketch on
the Mac.
0:42
To do this, make sure your iOS device and
Mac are on the same WiFi network.
0:47
Once they are, launch Mirror and
0:53
then on the Mac, click on the mirror icon
in the toolbar.
0:55
You should have now connected, and
0:59
Mirror on the iPhone will show a view
saying no artboards, so let's add one.
1:01
If we go into the Insert menu, we can
select Artboard from the list.
1:07
[SOUND] Now, I can either draw an art
board on the canvas or
1:12
select one from the list that is replaced
the inspector on the right.
1:17
As my device is an iPhone 6,
1:25
I'll select Portrait 6 from the list.
1:28
[SOUND] This will be added to the canvas
and sketch, and
1:32
should now see a solid white color appear
on your device.
1:36
An art board is a fixed frame that sits on
sketcher canvas.
1:39
They also appear in the layer list and
behave in a similar fashion to groups.
1:43
You can put layers inside them, but
1:49
if they stick out of the artboard on the
canvas, that content won't be shown.
1:50
Artboards and their contents can be
exported without having the need of
1:56
a slice or exportable layer.
2:00
But they are required when you use Mirror,
2:03
to tell the app what part of the canvas
should be shown.
2:05
Artboards are typically used when
designing mobile interfaces.
2:09
And each screen of an app that needs to be
designed tends to be in its own art board.
2:13
For the purposes of this demonstration,
let's fill our artboard with a nice color.
2:19
I'll select the artboard, enable the
background color,
2:24
using this option in the inspector.
2:27
Then apply this purple.
2:29
I want three art boards in total so
2:34
I'll just duplicate this twice using the
Cmd+D shortcut.
2:36
[SOUND] I'll press Cmd+1 to zoom out, then
I'll color the middle artboard green.
2:41
And the one on the right, orange.
2:48
And rename them appropriately in the layer
list.
2:50
[SOUND] We can see Mirror is
2:59
showing the third orange
3:04
screen here as that was the last
3:09
selected artboard in Sketch.
3:15
But I can easily swipe horizontally
between my artboards on my device.
3:22
If I tap,
3:26
I can reveal this menu at the bottom that
let's me move to a specific artboard.
3:27
Here, I can also switch between pages and
3:33
sketch that I could otherwise do by
swiping vertically.
3:35
But we don't currently have any set up.
3:39
Back in Sketch on the Mac,
3:41
we can add pages to our document by
looking at the top of the layer list and
3:43
clicking the icon on the right to reveal
the Pages panel.
3:48
[SOUND] Press the add button to get a
second page.
3:51
[SOUND] Of course, to see this in Mirror,
we need to add an artboard to this page.
3:55
So I'll press the A key to get the
artboard tool, and
4:02
add iPhone 6 from the list.
4:06
[SOUND] Give it a blue background color.
4:08
[SOUND] And then I can see this appear on
the device.
4:13
If i swipe up from any of these three
artboards on the first page,
4:21
I can see my blue I've just added on the
second, and, of course,
4:25
use the menu to switch between them.
4:29
And that covers all you need to know about
exporting your designs from Sketch
4:33
by saving out slices and exportable
layers, to viewing your designs on mirror.
4:36
Next, we're going to bring everything
we've covered together in the final stage
4:41
as we go on to create an iOS app
interface.
4:45
You need to sign up for Treehouse in order to download course files.
Sign up