I'm trying to reset all my workflows and prototyping to get to grips with 'designing @1x', so I have a few general design questions and also specific framer questions.
After playing with Jordan Robert Dobson's fantastic DPR module (https://github.com/jordandobson/framer-DevicePixelRatio) I realised that (and this is not to denigrate its usefulness) that the module is essentially just multiplying by a scalar whatever size you set your widths, heights and fonts to, based on the device pixel ratio (DPR) of the device. So I did some reading and I think I understand the concepts, but I need confirmation of my understanding:
1st Question (GENERAL DESIGN):
To 'design @1x' means to design at the DP setting of the device. That is, even if using pixels (photoshop) instead of points (sketch) then find whatever those DP values are, make your canvas that size, and design all your elements to that canvas:
So for example:
iPhone 6: 375 * 667
Google Pixel: 411 * 731
If I export at this size (straight export from PS/AI) or export @1x (from sketch), these items will literally be this pixel height and width, but would look half-sized on the actual device.
I can then use these resources:
to find out the "DPR value" of the device that I'm exporting to, and multiply all of my heights, widths and fonts sizes by this value, then export an asset '@x.x' size, I will get the correct asset for the screen size.
From https://material.io/devices/ I can see that a Google Pixel is 16:9, 2.6 xxhdp.
So, I should be able to use it's "DP" value: 411 * 731 for the canvas, multiply that by 2.6 and get the right value in PIXELS for my assets.
Width: 411 * 2.6 = ~1068
Height: 731 * 2.6 = ~1900
That's a screen res of 1068 x 1900, missing 12 pixels in the width, and a whopping 20 missing in the height!
2nd question (framer specific):
Experimenting in Framer, I was able to get this, which finally gives me an accurate result:
fullscreen = new Layer
height: 2.62654 * 731
width: 2.62654 * 411
Resulting layer = 1920 x 1080
I had to use a DPR factor of 2.62654 to get accurate @2.6x on the google pixel device!
When we do this on an iPhone - 375*667, it gives you the correct pixel size!
375 x 667 @ 2x = 750 x 1334. So what gives?
Look at the attached framer project, and you'll see that if you use the guideline @2.6x DPR for the Pixel, you'll get a layer that wont' fit!