Previewing Designs on Sketch Mirror

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