Pixel checker can help you align your pixels and code the design just as the designer created it.
Also when you're editing a website or a mobile app that has already been coded based on a new design iteration, the Pixel checker will help you find the differences so you can quickly implement them.
Where can I find the Pixel checker tool?
Open any design in the Inspect mode.
Last item in the left panel is the Pixel Checker.
After you click on the icon, you should see the design expanded in to a separated window.
NOTE: Pixel checker is available in Desktop app only.
How to use the Pixel checker?
Move/scale the window
Start by positioning the window over the coded result to align your pixels. The window behaves like any other system window. You can minimize it, scale it, maximize it and move it between desktops.
Pin the Pixel checker window
Turn on the window pin to keep the window above all windows.
Zoom in/Zoom out
Once you open the design in the Pixel checker view it will open in 100% of the current design scale. For example, if you had the design in @1x - 100% will be @1x, if you have it in @2x - 100% will be @2x.
To zoom in, either write a precise value in the input or press + or - to zoom in/out by 50%.
Pan/move the canvas
If you're using the touchpad on a Mac, feel free to swipe two fingers horizontally or vertically to move around the canvas.
You can also use arrows to move around.
To adjust the transparency use the slider or press keys 1-0
Press Reset to restart the original view of the design.
You can also press CMD + 0 to
Turn on/off background
The background around the design is turned on by default (whenever you go to the Pixel checker tool) so you can see where your design ends.
Press the square button or the B key to toggle the background.
Having an issue with the Pixel checker?
Does it seem to you that you may be experiencing an issue with the Pixel checker? Please, perform the following command:
Help > Troubleshooting > Clear Previews