Designers Deserve Better Than Mirroring Apps.

Ditch mirroring for a new way to view your designs across every iPhone device in a way that is true to life.

Product design involves dealing with a lot of unknowns. As designers, we must consider what a user understands, what they don’t, and what they want to achieve, among many other factors. One of the biggest unknowns can also be the most fundamental — what exactly does a user experience on their screen?

One of the first things you’ll do in your design tool is choose an iPhone size to base all of your frame sizes on. This frame size acts as the foundation of many other design choices, including layout, spacing, and type styles.

When it comes time to preview what your design looks like on an actual device, discrepancies begin to arise. The first and most obvious issue is that designs look different on different devices. As a designer, you need to make sure what you have designed works well in the frame size you chose for your core design, but also works across all the sizes you didn’t.

The same design viewed on different iPhone models. Not only are the scale and content cutoff areas different, but other details like text wrapping also need to be considered.

The Problem We’re Solving

Traditional design tools ask you to select a device size and then attempt to resize your design to fit those dimensions. The catch is that with this approach more unknowns are introduced — every monitor and laptop screen can have a different resolution, physical size, and pixel density. The end result is that your “resized” design can look wildly different depending on your display.

This issue is amplified when you bring mirroring apps into the equation. If you mirror your design to a device of a different size than the original frame, you’ll find your work scaled in a way that is not true to form. For example, the dimensions of your designs might reflect the logical screen size of an iPhone 13 mini, but if you mirror to an iPhone 11 Pro Max, your work will be scaled improperly, without accounting for the different ratios of each device.

L: An iPhone 13 mini frame in Figma being mirrored to an iPhone 11 Pro Max. You can see every aspect of the design is simply being scaled up, which is not what would actually happen. R: The same design with device size set to iPhone 13 mini on Play iPad being viewed on an iPhone 11 Pro Max where the design is seen true to life, accounting for all the layout changes (text wrapping, content cutoff, image aspect ratio).

On the left side of the image above is a frame in Figma set for an iPhone 13 mini and that same design mirrored to an iPhone 11 Pro Max. You will notice that images and text are just scaled up.

On the right: side of the image is the same design with the device size set to iPhone 13 mini on Play iPad and being viewed on Play iOS from an iPhone 11 Pro Max. You will notice a number of changes: The number of lines for both the headline and sub-headline is different, the aspect ratio of the image is different, and because of these changes, the content cutoff is much different.

We frequently encounter these situations while designing mobile products. Not only are they frustrating, but they can prevent us from properly understanding how our designs work across different devices. And while there are plugins to assist with this, they are only good enough to detect larger issues with scaling or content cutoffs.

What if you could know exactly how any user, with any iPhone, would view and experience your app designs? If you held an actual iPhone up to your design tool and it looked exactly the same with no surprises, maybe then you’d be able to trust the previews for all the devices you may not have available to physically test on. And those forgotten iPhone SE owners would finally feel acknowledged!

Play’s Unique Solution

Play breaks with tradition, letting you view and edit your designs in context by cutting out the middleman that is mirroring.

Bringing Play iOS to the iPad presented us with a unique opportunity to solve this problem. Since the size and resolution of every Apple display is well documented, these dimensions are no mystery. With Play for iPad, we’re not only letting you choose the specific device you want to preview your work on — but we’re making the preview true to life and perfectly scaled.

If you preview your work at the size of an iPhone XR and place it next to an actual iPhone XR device, their sizes will match up, no matter the size of your iPad.

Viewing your designs true to life on every iPhone device size from Play iPad.

Why is this important? Most of the design work we do on our screens is not true to life. The less we understand about how others are experiencing what we create, the more we risk introducing inconsistencies and issues. Being able to accurately consider screen size while designing helps identify issues early and gives you more control over your output.

How it works

Achieving this required some clever calculations but we think the result makes our iPad product even more powerful. Our team mapped out all the various sizes for each device we support—there are a lot, and the number of unique screen sizes is certain to grow.

Available data provided us the following measurements for each device:

1. The screen diagonal, measured in inches.
2. Logical size, in pixels: This is the measure of the pixels observed by the software.
3. Physical size, in pixels: This is a measure of the physical pixels that are contained in the screen’s hardware.

When a user selects a virtual device size (an iPhone size), we know the logical dimensions to use, but what we’re looking for is the amount to scale those dimensions depending on our real device size (the iPad you’re designing on).

Here’s what we need to calculate and how we do it:

1. Physical dimensions in pixels are dependent on PPI (pixels per inch), which can change from device to device. It’s important to keep things uniform, so we need to convert everything to inches. Using the pythagorean theorem and the individual device height/width ratios, we calculate new dimensions for the real and virtual devices, which are decoupled from pixel density.
2. Next, we find the ratio between the size of the real and virtual devices.
3. Up to this point, all calculations have been based on the physical dimensions, but we’re interested in adjusting the logical size. We take the ratio between the physical device sizes, and apply it to the logical size of the real device.
4. Last, we divide this by the logical size of the virtual device, providing us with a new ratio describing how much to scale the canvas.

Snippet from our resizing logic.

Experiencing your product as you design it is core to what we’re building at Play. We’ve thought a lot about how to show your designs as true to life as possible and device resizing is a big part of that. As new Apple devices are released, we’ll add support for their screen sizes. For now, we’d love to hear how device resizing will impact your workflow!

You can learn more about Play on our website, follow us on Twitter, and install Play from the App Store.