Дизайн

Сравнить экран с макетом дизайна

Наложить макет из Figma на экран телефона, дать Holtdroid найти все расхождения и отправить дизайнеру отчёт.

Зачем: о «кнопка какая-то не такая» трудно спорить. Макет поверх настоящего экрана показывает, что именно не так и на сколько пикселей, а отчёт снимает вопросы.

Что происходит

Откройте вкладку Pixel perfect рядом с DevTools.
Добавьте макет: перетащите картинку, выберите файл или вставьте через Cmd+V (Ctrl+V). Он станет референсом и ляжет поверх экрана.
Ползунком Opacity регулируйте, чего видно больше — приложения или дизайна.
Нажмите Find differences. Каждое расхождение объяснено простыми словами: сдвиг, другой цвет, чего-то нет.
Нажмите на расхождение, чтобы найти его на экране.
Export report сохраняет картинку, которую можно приложить к задаче.

Полезно знать

Из Figma лучше всего брать SVG: выделите фрейм, Copy as → Copy as SVG и вставьте во вкладку. Такой макет чёткий при любом размере. Делайте фрейм размером с экран телефона в dp (например, 360 × 800). Если SVG не получается, экспортируйте PNG в 3×.
Референсы принадлежат вам, а не сессии: они есть в каждой сессии, макеты текущего приложения — первыми.
Телефон под макетом продолжает работать: нажатия проходят насквозь.
Что-то на экране исчезает за секунду (тост, анимация)? Freeze замораживает текущую картинку, чтобы сравнить её спокойно.
Режим наложения Difference делает совпадающие пиксели чёрными и подсвечивает то, что отличается, — быстрая проверка на глаз.

Если не работает

Макет мутный или не того размера: скорее всего, это PNG в 1×. Используйте SVG или PNG в 3×.
Расхождением считается всё подряд: макет не совмещён с экраном. Включите Move, перетащите его на место и сравните ещё раз.
Видео или карта всегда отличаются: скройте эту часть макета или исключите эту область экрана во вкладке, чтобы её не сравнивали.

Подробнее: Pixel perfect.