Дизайн

Порівняти екран із макетом дизайну

Накласти макет із 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.