Дизайнер сдаёт макет в Figma — всё идеально: отступы, шрифты, тени. Через неделю верстальщик показывает результат: блоки съехали, цвет на 2% темнее, шрифт другой гарнитуры. Знакомая ситуация? Такое случается из-за разницы в рендеринге между macOS (где делают макеты) и браузером на Windows. Как избежать расхождений и получить точную вёрстку, соответствующую макету на 100%? Разберём технические приёмы и процессы, которые мы используем для достижения Pixel Perfect уже более 10 лет. За это время выполнили 500+ проектов — от лендингов до интернет-магазинов. Точная вёрстка сокращает доработки: средняя экономия бюджета составляет 25–30%. Цена за лендинг стартует от 15 000 рублей.
Почему достичь Pixel Perfect сложно?
Даже при идеальной реализации абсолютное совпадение невозможно из-за особенностей рендеринга в разных ОС. macOS использует субпиксельный антиалиасинг, Windows — ClearType. Figma работает на macOS, поэтому браузер на Windows может показывать шрифты иначе. Задача верстальщика — соблюсти систему: межбуквенные интервалы, высоту строк, отступы — а не копировать пиксели с макета.
Ещё одна причина расхождений — box model. В Figma все размеры считаются как border-box, поэтому в CSS нужно явно задавать box-sizing: border-box для всех элементов (согласно спецификации W3C). Игнорирование этого правила приводит к смещению блоков на пару пикселей. Также часто встречается ошибка с line-height: в Figma высота строки указана в пикселях, а в CSS нужно перевести в относительные единицы (например, 1.2).
Какие инструменты обеспечивают Pixel Perfect?
| Инструмент | Назначение | Особенность |
|---|---|---|
| PerfectPixel | Наложение скриншота макета на страницу | Ручная проверка, overlay с прозрачностью |
| Figma Dev Mode | Получение точных размеров и CSS-свойств | Автоматическая выгрузка отступов, цветов, шрифтов |
| Percy/Chromatic | Автоматическое сравнение скриншотов | Обнаружение регрессий, интеграция в CI/CD |
Как убедиться в соответствии макету?
- Установите браузерное расширение PerfectPixel.
- Сохраните скриншот макета (одна страница, один брейкпоинт).
- Включите overlay с прозрачностью 50%.
- Последовательно сравнивайте: отступы, размеры, цвета текста и фона, толщину границ.
- Фиксируйте расхождения в таблице, исправляйте в коде.
Для автоматизации используйте Percy — он в 5 раз быстрее и выявляет 95% расхождений. Комбинируйте оба подхода для максимальной точности.
Почему Pixel Perfect важен для UX и SEO?
Даже миллисекундная задержка или смещение кнопки на 2 пикселя снижают доверие пользователя. Согласно исследованию Nielsen Norman Group, 88% пользователей не возвращаются на сайт после плохого опыта. Точная вёрстка устраняет визуальный шум, ускоряет восприятие и повышает конверсию. Кроме того, соблюдение макета напрямую влияет на Core Web Vitals: правильные отступы и размеры изображений уменьшают CLS (совокупное смещение макета). Адаптивная вёрстка на трёх брейкпоинтах (375px, 768px, 1440px) гарантирует бесшовный просмотр на всех устройствах.
Какие проблемы решает пиксель-перфект?
Подробнее о типичных ошибках
Чаще всего расхождения возникают из-за: - Неправильного `line-height` (высота строки в Figma в px, в CSS — relative); - Игнорирования `border-radius` (порядок скругления по часовой стрелке); - Теней без `spread-radius` (четвёртое значение в `box-shadow`); - Пропущенных промежуточных брейкпоинтов (Pixel Perfect должен соблюдаться на каждом размере экрана).Что входит в услугу вёрстки?
- Исходный код: семантичный HTML, CSS (или SCSS), JavaScript при необходимости.
- Адаптивность: корректное отображение на всех брейкпоинтах (375px, 768px, 1440px и промежуточных).
- Кросс-браузерность: проверка в Chrome, Edge, Firefox, Safari (десктоп и мобильный).
- Документация: описание компонентов и инструкция по подключению.
- Поддержка: исправление замечаний в течение гарантийного срока.
Сроки и стоимость
| Объём работ | Ориентировочный срок | Примечание |
|---|---|---|
| Лендинг (1 страница, 3 брейкпоинта) | 2–4 дня | Без анимаций |
| 5–10 страниц с повторяющимися компонентами | 7–14 дней | Включает дизайн-систему |
| 20+ страниц с уникальными макетами | 3–5 недель | Глубокая проработка состояний |
Стоимость рассчитывается индивидуально после анализа макета. На неё влияют сложность компонентов, количество анимаций и необходимость интеграции с CMS. Получите индивидуальный коммерческий расчет, отправив макет на оценку.
Как мы гарантируем результат?
Мы предоставляем гарантию 100% соответствия макету: если в готовой вёрстке найдётся расхождение более 3 px, бесплатно исправляем в течение гарантийного срока. Для объективности используем overlay-сравнение с прозрачностью 30% — вы сами видите точность. Экономия до 30% бюджета на доработки — ещё один аргумент в пользу точной вёрстки.
Свяжитесь с нами для консультации и пришлите ваш макет — мы оценим его за 1 рабочий день. Закажите вёрстку и получите профессиональный код, готовый к интеграции.