Container layer

This prototype is in iPhone SE format because the original assets were prepared for this 640 x 1136 resolution (320 x 568 points).

But to make it possible to also test this prototype on other iPhones, we’ll make it responsive. We’ll do it the easy way, by just making everything bigger.

We place all our layers inside a container that we’ll scale up when needed. This way we can keep using the x and y-positions and layer dimensions for a 4.0″ screen since everything will simply be ‘blown up’ on a 4.7″ or bigger screen.

# Container for scaling up the prototype
container = new Layer
    width: 320
    height: 568
    backgroundColor: null
    originX: 0
    originY: 0
    scale: Screen.height / 568

We divide the actual height of the screen by 568 (the height of a 4.0″ screen) to get the correct scale for all the contents.

On an iPhone SE the result will be 1 (naturally), but on an iPhone 6 (or higher) the scale will be 1.174, and on an iPhone Plus even bigger.

The container’s transformation origin is changed to the top left so that everything scales up from this corner.

I should mention that all layers in Design are also anchored to the top left so that they will scale along nicely when placed in this ‘everybody’s parent’ layer.