1 00:00:00,310 --> 00:00:02,090 If you're designing an app for mobile, 2 00:00:02,090 --> 00:00:06,270 then it's more than likely you will want to view those designs on a mobile device. 3 00:00:06,270 --> 00:00:10,080 If you have an iOS device, you can do just this with Sketch Mirror. 4 00:00:11,650 --> 00:00:14,210 Sketch Mirror is an optional separate app for 5 00:00:14,210 --> 00:00:17,120 iOS, which means you will have to buy it on the App Store. 6 00:00:17,120 --> 00:00:20,800 And you can do this by searching for Sketch Mirror. 7 00:00:20,800 --> 00:00:24,690 Or clicking on the button that appears into the mirror pop over in the toolbar. 8 00:00:28,010 --> 00:00:32,190 The application's price will depend on the country's App Store, you are visiting and 9 00:00:32,190 --> 00:00:36,005 it can run on any iOS device running iOS 6 and up. 10 00:00:36,005 --> 00:00:42,204 [SOUND] So once you have downloaded and installed the app, 11 00:00:42,204 --> 00:00:47,253 we will need to connect it to Sketch on the Mac. 12 00:00:47,253 --> 00:00:53,140 To do this, make sure your iOS device and Mac are on the same WiFi network. 13 00:00:53,140 --> 00:00:55,100 Once they are, launch Mirror and 14 00:00:55,100 --> 00:00:58,290 then on the Mac, click on the mirror icon in the toolbar. 15 00:00:59,640 --> 00:01:01,510 You should have now connected, and 16 00:01:01,510 --> 00:01:06,450 Mirror on the iPhone will show a view saying no artboards, so let's add one. 17 00:01:07,920 --> 00:01:12,050 If we go into the Insert menu, we can select Artboard from the list. 18 00:01:12,050 --> 00:01:17,909 [SOUND] Now, I can either draw an art board on the canvas or 19 00:01:17,909 --> 00:01:25,155 select one from the list that is replaced the inspector on the right. 20 00:01:25,155 --> 00:01:28,313 As my device is an iPhone 6, 21 00:01:28,313 --> 00:01:32,796 I'll select Portrait 6 from the list. 22 00:01:32,796 --> 00:01:36,101 [SOUND] This will be added to the canvas and sketch, and 23 00:01:36,101 --> 00:01:39,636 should now see a solid white color appear on your device. 24 00:01:39,636 --> 00:01:43,854 An art board is a fixed frame that sits on sketcher canvas. 25 00:01:43,854 --> 00:01:49,040 They also appear in the layer list and behave in a similar fashion to groups. 26 00:01:49,040 --> 00:01:50,920 You can put layers inside them, but 27 00:01:50,920 --> 00:01:55,090 if they stick out of the artboard on the canvas, that content won't be shown. 28 00:01:56,395 --> 00:02:00,280 Artboards and their contents can be exported without having the need of 29 00:02:00,280 --> 00:02:03,110 a slice or exportable layer. 30 00:02:03,110 --> 00:02:05,930 But they are required when you use Mirror, 31 00:02:05,930 --> 00:02:08,770 to tell the app what part of the canvas should be shown. 32 00:02:09,880 --> 00:02:13,610 Artboards are typically used when designing mobile interfaces. 33 00:02:13,610 --> 00:02:18,088 And each screen of an app that needs to be designed tends to be in its own art board. 34 00:02:19,120 --> 00:02:24,420 For the purposes of this demonstration, let's fill our artboard with a nice color. 35 00:02:24,420 --> 00:02:27,460 I'll select the artboard, enable the background color, 36 00:02:27,460 --> 00:02:29,890 using this option in the inspector. 37 00:02:29,890 --> 00:02:30,930 Then apply this purple. 38 00:02:34,060 --> 00:02:36,596 I want three art boards in total so 39 00:02:36,596 --> 00:02:41,229 I'll just duplicate this twice using the Cmd+D shortcut. 40 00:02:41,229 --> 00:02:48,540 [SOUND] I'll press Cmd+1 to zoom out, then I'll color the middle artboard green. 41 00:02:48,540 --> 00:02:50,741 And the one on the right, orange. 42 00:02:50,741 --> 00:02:59,616 And rename them appropriately in the layer list. 43 00:02:59,616 --> 00:03:04,650 [SOUND] We can see Mirror is 44 00:03:04,650 --> 00:03:09,686 showing the third orange 45 00:03:09,686 --> 00:03:15,919 screen here as that was the last 46 00:03:15,919 --> 00:03:22,172 selected artboard in Sketch. 47 00:03:22,172 --> 00:03:26,800 But I can easily swipe horizontally between my artboards on my device. 48 00:03:26,800 --> 00:03:27,750 If I tap, 49 00:03:27,750 --> 00:03:32,005 I can reveal this menu at the bottom that let's me move to a specific artboard. 50 00:03:33,940 --> 00:03:35,930 Here, I can also switch between pages and 51 00:03:35,930 --> 00:03:39,300 sketch that I could otherwise do by swiping vertically. 52 00:03:39,300 --> 00:03:41,925 But we don't currently have any set up. 53 00:03:41,925 --> 00:03:43,588 Back in Sketch on the Mac, 54 00:03:43,588 --> 00:03:48,125 we can add pages to our document by looking at the top of the layer list and 55 00:03:48,125 --> 00:03:51,768 clicking the icon on the right to reveal the Pages panel. 56 00:03:51,768 --> 00:03:55,839 [SOUND] Press the add button to get a second page. 57 00:03:55,839 --> 00:04:02,279 [SOUND] Of course, to see this in Mirror, we need to add an artboard to this page. 58 00:04:02,279 --> 00:04:06,441 So I'll press the A key to get the artboard tool, and 59 00:04:06,441 --> 00:04:08,745 add iPhone 6 from the list. 60 00:04:08,745 --> 00:04:13,725 [SOUND] Give it a blue background color. 61 00:04:13,725 --> 00:04:21,999 [SOUND] And then I can see this appear on the device. 62 00:04:21,999 --> 00:04:25,672 If i swipe up from any of these three artboards on the first page, 63 00:04:25,672 --> 00:04:29,412 I can see my blue I've just added on the second, and, of course, 64 00:04:29,412 --> 00:04:31,540 use the menu to switch between them. 65 00:04:33,180 --> 00:04:36,570 And that covers all you need to know about exporting your designs from Sketch 66 00:04:36,570 --> 00:04:41,480 by saving out slices and exportable layers, to viewing your designs on mirror. 67 00:04:41,480 --> 00:04:45,520 Next, we're going to bring everything we've covered together in the final stage 68 00:04:45,520 --> 00:04:48,270 as we go on to create an iOS app interface.