Дизайнер здає макет у Figma — все ідеально: відступи, шрифти, тіні. Через тиждень верстальник показує результат: блоки з'їхали, колір на 2% темніший, шрифт іншої гарнітури. Знайома ситуація? Таке трапляється через різницю в рендерингу між macOS (де роблять макети) та браузером на Windows. Як уникнути розбіжностей і отримати точну верстку, що на 100% відповідає макету? Розберемо технічні прийоми та процеси, які ми використовуємо для досягнення Pixel Perfect вже понад 10 років. За цей час виконали 500+ проєктів — від лендінгів до інтернет-магазинів. Точна верстка скорочує доопрацювання: середня економія бюджету становить 25–30%.
Чому досягти 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 робочий день. Замовте верстку та отримайте професійний код, готовий до інтеграції.