status-react/doc/pixel-perfection.md
Siddarth Kumar 4ac7f0bdda
update docs & makefile for iPhone 13 (#17784)
The design team has now decided to keep iPhone 13 as the baseline standard instead of iPhone 11 Pro.

This commit updates the docs on pixel perfection and starting guide.
We also update the default simulator to iPhone 13 for `make run-ios`
2023-11-06 23:55:06 +05:30

963 B

Pixel Perfection

The Status Mobile team aims to align the design implementation perfectly according to a given screens respective Figma design spec.

Currently, the Figma Designs match up with both "iPhone 11 Pro" and "iPhone 13" screen size.

The Dimension reference for iPhone 11 Pro is 375 x 812 (width x height) and for iPhone 13 is 390 x 844.

To test your implementation is correct you can take the following steps

  • Open a new Figma file so that you have write privileges.

  • Copy in the component or screen from the Figma file.

  • Using the "iPhone 11 Pro" or the "iPhone 13" simulator (it is the default now) you take a screenshot of your component and paste it into your Figma file.

  • To get the right size, set your screenshot to width according to your simulator:

    • for iPhone 13 set 390
    • for iPhone 11 Pro set 375

  • Lower the opacity so you can see it sitting on top of the Figma mock ups.