See designs and apps on iOS & Apple Watch while you work on a Mac.
Working on mobile applications for iOS and Apple Watch presents many unique challenges. You're working with small, high density screens that use layouts which are manipulated by touch: and none of these things exist on a Mac.
xScope's Mirror tool solves this problem by constantly moving the contents of a Mac window onto the iOS device. As you work on a Photoshop document or an iOS Simulator, what you see on your Mac is mirrored instantly onto the iOS screen. Once the image is on your iPhone, it can also be transferred to the Apple Watch for an instant preview.
To get started with the Mirror tool, you need to download the iOS app:
To start using the xScope Mirror, make sure that xScope is running on your Mac. (Since you're reading this help from the xScope app, you're good to go right now.)
Once the Mac app is running, you can launch the xScope Mirror app on your iOS device. You'll be presented with a list of Mac names to select from. Tap on your Mac's name to start the Mirror connection.
Connecting from an iPad
If you're having problems connecting from the iOS device to the Mac, here are some things to check:
If you continue to have problems, check the Knowledge Base article.
For security reasons, the Mirror connection must be accepted on your Mac. This prevents someone with an iOS device from spying on your Mac desktop. Click on "Accept Connection" to start mirroring your Mac desktop.
Accepting a connection from "Grande" on the Mac
After the connection starts, every window that you point at with your mouse will be mirrored on the iOS app's screen. After pointing at a window, you can drag the contents of the Mac window with your finger to align it quickly. As you drag the image near an edge, you'll see a highlight indicating that the position will be snapped to the screen edge.
In most cases, you'll want to "lock onto" a specific window. You can do this by tapping on the iOS screen to bring up the control panel followed by a tap on the lock icon. The arrow keys can also be used to "nudge" the window for precise positioning.
Tapping on the iOS screen displays a menu where you can select another Mac, nudge, scale, lock or save the image
While locked the Mirror ignores all gestures, except for tap and hold to display the control panel. This helps while you're doing usability testing on a new layout, since a single tap would display the panel and get in the way of your content.
The control panel also shows buttons to adjust the image scaling factor: useful for showing Retina graphics on a non-Retina device, or vice versa. An action menu also lets you copy the current image to the iOS clipboard or save it in your Photos. This makes it easy to save compositions for later viewing or to send them as email attachments.
By default, the Mirror works with desktop windows. You can also bring up the Mirror tool on your Mac to display the contents of a file, your clipboard, or a Photoshop document as work with them:
The Mirror tool window showing a large Photoshop document
You've already seen how the desktop mirroring works and the leftmost icon in the Mirror window lets you choose that mode. The next icon allows you to work with files by dropping them in the window. Any changes that you make to the file are immediately shown in the Mirror window and sent to the iOS device. The
key can be used to clear the file and return to screen mirroring.The next icon in the window mirrors the contents of your clipboard. Whenever you copy an image with another application, the contents of the clipboard are shown in the window and on the iOS device.
You can drag PSD, PNG, PDF, JPEG and TIFF files onto xScope's Dock icon and the Mirror tool will open automatically and send the image to your iOS devices.
xScope can display a Photoshop document two ways: you can mirror the PSD file (as described above) or the document as you edit. Mirroring a file will only update the iOS device when you save your edits in the PSD file, while mirroring as you edit updates any time you change the current document.
The other mirror modes don't require any configuration, however, both Photoshop and xScope require a little bit of setup to use the Photoshop document mirroring. The last icon in the Mirror window will be disabled until this configuration is complete.
Photoshop CS6 is recommended for document mirroring. You can also use CS5 as long as it has been upgraded to version 12.0.4 or later.
Here are the steps to setup the Photoshop document mode:
Note that in the future, you don't need to do this setup again, but you do need to make sure that Photoshop is running before you start this Mirror mode.
The maximum Photoshop document size that can be mirrored is 6000 × 6000 pixels. Also, the remote connection does not support transparency so layers are shown against a white background.
By default, the active Photoshop document is sent to the Mirror. If you're editing multiple documents in Photoshop, but only want to see one file on iOS, the enable the Lock in the app menu. When the current document is locked, switching to other documents will not affect the image being displayed.
After an image has been displayed on the iOS device, it can also be transferred to an Apple Watch. Here are the steps:
The Apple Watch is very agressive about saving power: it will automatically turn the screen off after about 15 seconds. If you're testing layouts on the watch screen, be aware that there's a preference to return to the last running app when you raise your arm or tap the screen. This preference can be found in the Apple Watch app on iOS. Alternatively, you can double-press on the digital crown to go from the watch face to the last running app.
By default, the xScope app running on the watch will refresh when you tap on the screen. When you're testing layouts with buttons and other controls, you may want to ignore these taps. Just force press on the screen and you'll see a menu item to lock the display. Another force press can be used to unlock or refresh.
WatchKit currently doesn't allow an app to display more than 312 × 348 pixels on 42mm or 272 × 302 pixels on 38mm. This is because the status bar uses 42 and 38 pixels on 42mm and 38mm, respectively.
When testing layouts on the watch, you'll probably want to leave the status bar out of your Photoshop document since one is displayed by xScope already.
The xScope Mirror does some processing of the image when it detects certain conditions:
When working with files, the image you're editing can automatically be applied to a template before being sent to the iOS device.
If a square image is dropped onto either the xScope Dock icon or the file panel of the Mirror window, a list of templates will be displayed as a popup menu in the window header:
When one of the items is selected, the square image will be composited and sent to the device for viewing. This makes is very simple to preview icon designs in a variety of contexts in iOS. Note that the largest icon size on iOS is currently 180 × 180 pixels (80 pts @3x on the iPhone 6 Plus home screen) so that's a good size to test with on all devices.
A file whose dimensions are 744 × 1392 (4-inch iPhone 5), 852 × 1608 (4.7-inch iPhone 6) or 2662 × 2662 (5.5-inch iPhone 6 Plus) will show options to display the image as it would look on the lock or home screens. Yes, those are weird sizes and it's all because of parallax.
Mirror templates can also be used with documents that are being edited directly in Photoshop. Easy just got even easier. 😃
Have you ever huddled around a small laptop screen while reviewing design work in a conference room? If you have an Apple TV, there's now a better way!
In the Mirror panel of xScope preferences, there's now a setting to
. When this option is turned on, any file, clipboard or Photoshop document changes will be displayed on the big screen. Tweaking a design becomes much more collaborative.This new output option also works fine with regular device mirroring: folks with the xScope Mirror app on iOS will be able to see the same image simultaneously.