status-react/doc/pixel-perfection.md

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.