Как сверять верстку с макетом в Figma

Что проверяют

Умеете ли вы сверять верстку системно, а не «на глаз», и отличаете ли дефект от допустимой погрешности. Следом часто спрашивают, как вы оформите такой баг и можно ли проверку автоматизировать.

Как отвечать

Опишите процесс по шагам:

• договорённости: какой фрейм актуален, на каких ширинах проверять (часто это 360, 768 и 1440 пикселей), какая погрешность допустима. Без этого спор «пиксель в пиксель или нет» бесконечен;
• условия: масштаб браузера 100%, ширина окна как у фрейма, в DevTools режим устройства с нужным разрешением. Иначе расхождения вы создадите сами;
• измерения в Figma: выделите элемент и зажмите Alt (Option на Mac), чтобы увидеть расстояния до соседей. В Dev Mode или на панели свойств видны размеры, отступы, шрифты, цвета и переменные дизайн-системы;
• сравнение в браузере: вкладка Computed в DevTools показывает итоговые шрифт, line-height, letter-spacing, отступы и цвет. Для наложения макета поверх страницы есть расширения вроде PerfectPixel;
• не только статика: состояния hover, focus, disabled, error, длинные тексты и пустые данные, переносы, поведение между брейкпоинтами, картинки на экранах с высокой плотностью пикселей;
• баг-репорт: ссылка на конкретный фрейм, ожидаемое и фактическое значение (margin-top: 24px против 16px), ширина экрана, браузер, скриншот с выделением.

Для регресса подключают скриншотное тестирование: toHaveScreenshot() в Playwright или Storybook с сервисом визуального сравнения. Оно ловит неожиданные изменения, но эталоном служит прошлый скриншот, а не макет.

Где спотыкаются

Сверяют на произвольной ширине окна или при масштабе 90%, а потом заводят баги на расхождения, которых нет.

Уходят в пиксели и пропускают крупное: у поля нет состояния ошибки, у кнопки нет hover, текст вылезает из карточки на мобильной ширине.

Считают дефектом разницу в сглаживании шрифтов между Windows и macOS или сверяют со старой версией фрейма. Сначала уточните у дизайнера, что актуально, и заводите то, что влияет на восприятие.