Проверяем вёрстку макета дизайна из Figma с помощью Pixel Perfect

Зачем проверять вёрстку

Когда дизайнер передаёт макет в Figma, а верстальщик превращает его в HTML/CSS, неизбежно возникают расхождения. Отступы на пару пикселей, чуть другой размер шрифта, смещённые элементы — всё это снижает качество итогового продукта.

Что такое Pixel Perfect

Pixel Perfect — это расширение для браузера Chrome, которое позволяет наложить полупрозрачный скриншот макета поверх свёрстанной страницы. Так можно визуально сравнить каждый элемент.

Как использовать

1. Установите расширение Pixel Perfect из Chrome Web Store
2. Экспортируйте нужный экран из Figma как PNG в масштабе 1x
3. Откройте свёрстанную страницу в Chrome
4. Активируйте Pixel Perfect и загрузите скриншот макета
5. Настройте прозрачность (50-70% оптимально) и позиционирование
6. Сравнивайте элемент за элементом

На что обращать внимание

• Отступы между элементами (margin/padding)
• Размеры и начертание шрифтов
• Цвета — используйте пипетку для точной проверки
• Размеры кнопок и интерактивных элементов
• Адаптивность — проверяйте на нескольких разрешениях

Когда допустимы расхождения

Идеальный pixel perfect не всегда нужен. Расхождение в 1-2 пикселя допустимо. Главное — визуальная целостность и консистентность. Если пользователь не замечает разницы — вёрстка хорошая.