Більшість ревізій у процесі розробки — не через те, що розробник "не так зрозумів". Просто дизайнер не перевірив файл перед передачею. Пропущений стан, хардкодний колір замість токена, забуте мобайл-відображення — і ось вже другий день ітерацій замість шипінгу.

Ось 12 перевірок, які займають 20–30 хвилин і заощаджують кілька ревізій у кожному спринті.

Блок 1: Токени і стилі

  • Всі кольори прив'язані до токенів/Variables — жодного хардкодного hex
  • Всі тексти використовують типографічні стилі з бібліотеки, не "Free" шрифти
  • Spacing між елементами відповідає 4pt/8pt grid
  • Border-radius, тіні і blur — з токенів, не вручну

Блок 2: Компоненти і структура

  • Всі елементи — з бібліотеки компонентів, не детачені копії
  • Відсутні "завислі" шари поза фреймами або з нульовою прозорістю
  • Назви шарів читабельні — не "Rectangle 234" або "Group 12"
  • Auto layout на всіх ключових контейнерах

Блок 3: Стани і edge cases

  • Є всі стани: default, hover, active, disabled, error, loading (де актуально)
  • Є порожній стан (empty state) для списків і таблиць
  • Є варіант з довгим текстом або великою кількістю елементів
  • Є мобайл-версія (якщо адаптивний дизайн)

Швидкий лайфхак: перед передачею перемкніться в Dev Mode і пройдіться по всіх компонентах екрана. Якщо бачите hardcode-значення замість токенів або "Mixed" у колонці стилів — це місця, які треба виправити.

Як автоматизувати частину QA

Плагіни які допомагають:

  • Design Lint — знаходить хардкодні значення і нестилізовані елементи
  • Able — перевіряє контраст тексту відповідно до WCAG
  • Figma Tokens — показує всі незв'язані токени
  • Cleanor — знаходить "сміттєві" шари

Як зробити QA частиною процесу

Найкраще — зробити цей чеклист частиною Definition of Done для дизайнерської задачі. Якщо задача не пройшла QA — вона не може перейти в статус "Готово до розробки".

В командах з 2+ дизайнерами ефективна практика: дизайнер проводить QA чужої задачі, не своєї. Свіжий погляд ловить те, що автор пропускає.

Налаштовуємо design-to-dev процеси як частину спринту — від QA-чеклистів до Figma Code Connect і Storybook.