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