When designing for iPhoneX, the best way to review your prototypes is on an iPhone X device, using the free Atomic iOS Review app. Your testers and colleagues can also download the review app, it's free, and any Atomic share-links they're sent can be opened within the app without logging in.
If you need to also preview your iPhone X prototypes on desktop, you may want to apply a mask to simulate the rounded corners and notch of the real-thing.
You can download our iPhoneX Mask template for Sketch, or take a copy of this sample prototype which already has the mask within it.
This sample is a component, so when you copy it, you'll find it in the Components tab of your project. You may also want to move it to your team library, so you can access in any project without having to copy it each time.
Need desktop reviewers to see a device image as well as the canvas mask?
If you want reviewers on desktop browsers to see your prototype with the mask above, and to see a device wrapper, there's one thing to remember - if you simply enlarge your canvas and add a device wrapper (like one of these) then they will be visible to reviewers on native devices too, which isn't ideal. Here's what we recommend:
- In the same project as your iPhone X prototype, create another new prototype.
- Next, type
cto bring up your components browser. Look for your iPhone X prototype and select it. Why? This will place your main prototype inside the new prototype.
- Finally, grab a device image and add it to the new prototype, then resize your canvas to fit the device image.
- Now you'll be able to have reviewers using a native device access the original prototype share-link, and reviewers who are using desktop browsers can be sent a share-link from the second prototype.