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 or the Comment mode.

In the right bottom corner you’ll find the Pixel Checker.

After you click on the icon, you should see the design expanded in to a separated window.

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.

Change opacity
To adjust the transparency use the slider or press keys 1-0 

Reset view
Press Reset to restart the original view of the design.

You can also press CMD + 0 to

Turn on/off backround
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.

NOTE: If you're a Windows or a Linux user, all shortcuts work with CTRL instead of CMD. To access all shortcuts, just go to App preferences/Shortcuts.

Did this answer your question?