🔳

Pixel-perfect

Pixel-perfect

Introdution

Have you used already used Photoshop? Well you've probably never thought about making it pixel perfect, it was probably more of a rough impression like "looks great like this".

Photoshop is the perfect opposite of what you will never do in Figma. Unlike Photoshop, FIgma is build from the ground up to give you precise guidance, grids, speed, alignement all effortlessly.

Definition

Pixel perfect literaly means that your shapes (rectangle, buttons, ...) in your frame (iphone frame, desktop, ...) are:

  • round numbers (21,34px)
  • well aligned with the frame and other relative elements (8px left ← → 8px right)
  • placed at a multiplier of 4 (4, 8, 12, 16, 24, ...)

This is not good
This is not good
This is good
This is good

Pixel perfect is a constraints for your creativity to gain in structure. Taking the best practices of aesthetics. This will also help you gain natural alignment, therefore overall harmony and a clean structure between your elements.

Thanksfully, using Figma you will be able to:

  • Create grid for your Frame
  • Move elements around and snap them to your grid
  • Align elements effortlessly

Pixel perfect rules

PixelsDetails
4
Never go below 4px
8
Probably the most used
12
Not ideal but a great in-between 8 and 16 if necessary
16
The most used for sure
24
A great in between 16 and 32
32
Great separator in between elements or margins
40 - 48 - 56
I don't personally use them much but great to know them
60
Continue with round numbers, easier to remember and apply
80
Continue with round numbers, easier to remember and apply
120
Continue with round numbers, easier to remember and apply
160
Continue with round numbers, easier to remember and apply

Speed up your workflow

Adjust your Figma nudge amount to 8 when presseing SHIFT + UP / SHIFT + DOWN instead of + 10

image
image

Adjust your key repeat to Fast and Delay until Repeat to Short in your Mac OS keyboard Settings
image

Recreating my home page

Best practices

  • When designing always use a multiplier a 4px for small numbers and 8px for larger numbers.
  • Use as much as possible auto-layout and components based design to reduce sources of error
  • Never scale a group of elements (this will automatically give you weird numbers)
  • Avoid using your trackpad or mouse to move an element around and prefer your keyboard

Next up

📐
Layout Grids

Dive Deeper