Вёрстка Pixel Perfect по дизайн-макету
Pixel Perfect — это методология вёрстки, при которой реализованный HTML/CSS визуально совпадает с дизайн-макетом с точностью до пикселя. На практике абсолютная точность недостижима (разные браузеры рендерят шрифты по-разному, системы антиалиасинга отличаются), но профессиональная вёрстка по макету даёт результат с погрешностью 1–3px — незаметной в реальных условиях.
Что такое Pixel Perfect на практике
Pixel Perfect — не про совпадение пикселей на скриншотах, а про соблюдение системы. Хорошая вёрстка по макету:
- Точно воспроизводит отступы, размеры, цвета из дизайна
- Использует те же шрифты с теми же weight и size
- Корректно реализует компоненты во всех состояниях (hover, focus, disabled, active)
- Соответствует макету на всех брейкпоинтах (не только desktop)
Плохая вёрстка «по мотивам макета» — когда верстальщик «на глаз» выставляет отступы, теряет промежуточные брейкпоинты и игнорирует состояния.
Инструменты для работы с Figma-макетами
Figma Dev Mode (требует Professional подписку у дизайнера) — показывает точные размеры, отступы, CSS-свойства, экспортирует assets. Разработчик кликает на элемент и видит готовый CSS.
Figma Inspect — бесплатная альтернатива, с ограниченным функционалом. Для базовых задач достаточно.
Браузерные расширения:
- PerfectPixel (ChromeExtension) — накладывает PNG скриншота как полупрозрачный слой поверх страницы. Позволяет сравнивать вёрстку и макет визуально с регулируемой прозрачностью.
- PixelPerfect Pro — аналог с дополнительными функциями позиционирования оверлея.
Рабочий процесс: экспортируем PNG страницы из Figma с нужным scale, загружаем в PerfectPixel, накладываем на открытую страницу в браузере, уменьшаем прозрачность до 30–50% — видны все расхождения.
Типичные расхождения и их причины
Шрифты. Один и тот же шрифт рендерится по-разному в macOS (субпиксельный антиалиасинг) и Windows (ClearType). Figma используется преимущественно на macOS — вёрстка может выглядеть не идентично на Windows. Это нормально: задача — соблюсти систему, а не добиться совпадения на конкретной платформе.
line-height. В Figma line-height задаётся в пикселях или процентах. В CSS — в относительных единицах (1.5) или пикселях. Пересчёт: если в Figma текст 16px с line-height 24px → в CSS line-height: 1.5.
Box model. Figma размеры — как box-sizing: border-box (padding включён в размер). Если CSS использует content-box (по умолчанию) — размеры съедутся. Первая строка любого CSS-файла:
*, *::before, *::after { box-sizing: border-box; }
Тени. Figma shadow: X: 0, Y: 4, Blur: 16, Spread: 0, Color: #000 @ 10% → CSS: box-shadow: 0 4px 16px rgba(0,0,0,0.1). Spread в Figma — это spread-radius в CSS (4-й параметр).
Border radius. При разных сторонах: border-radius: 8px 8px 0 0 (top-left, top-right, bottom-right, bottom-left по часовой).
Адаптивная вёрстка по нескольким макетам
Pixel Perfect применяется для каждого брейкпоинта, под который предоставлен макет. Стандартный набор: 375px (mobile), 768px (tablet), 1440px (desktop). Верстальщик не «угадывает» промежуточные состояния — он проектирует плавный переход между брейкпоинтами так, чтобы на любом промежуточном размере экрана выглядело корректно.
Техника: CSS clamp() для плавного изменения размеров, min() и max() для гибких отступов, grid и flexbox с gap вместо фиксированных margin.
Кросс-браузерная совместимость
Pixel Perfect вёрстка должна работать в целевых браузерах. Для 2024–2025 года минимальный стандарт:
- Chrome/Edge 120+
- Firefox 121+
- Safari 17+
- Мобильный Safari (iOS 16+)
- Android Chrome
CSS Grid, Flexbox, CSS Variables, aspect-ratio, gap — всё это поддерживается во всех актуальных браузерах. Проверять через caniuse.com до использования экспериментальных свойств.
Сроки
| Объём | Время |
|---|---|
| Лендинг (1 страница, 3 брейкпоинта) | 2–4 дня |
| 5–10 страниц с компонентами | 7–14 дней |
| 20+ страниц, дизайн-система | 3–5 недель |
Скорость зависит от сложности компонентов, наличия анимаций и количества состояний. Вёрстка с нуля по готовому Figma-макету с Dev Mode — быстрее, чем по PDF или скриншотам.