🔳

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

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