status-im/status-react
2
0
Fork 0
mirror of https://github.com/status-im/status-react.git synced 2025-01-24 09:49:51 +00:00
Code Issues Projects Releases Wiki Activity

chore: add doc on pixel perfection (#16539)

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
doc/README.md
View File

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

BIN
doc/images/pixel-perfection/layer-width.png Normal file
View File

Binary file not shown.
Side by Side

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.