chore: add doc on pixel perfection (#16539)

This commit is contained in:
Jamie Caprani 2023-07-12 12:31:14 +02:00 committed by GitHub
parent 7282ba04bc
commit 4801342a42
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 0 deletions

View File

@ -24,6 +24,7 @@
[Patching](patching.md)
[Creating a pixel perfect UI](pixel-perfection.md)
## Testing

Binary file not shown.

After

Width:  |  Height:  |  Size: 564 KiB

17
doc/pixel-perfection.md Normal file
View File

@ -0,0 +1,17 @@
# 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 an "iPhone 11 Pro" screen size.
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" 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 375px
![](images/pixel-perfection/layer-width.png)
- Lower the opacity so you can see it sitting on top of the Figma mock ups.