[Все доки](https://hackmd.io/@simadsgn/ry_u5tC6O)

# Как сверять макеты с вёрсткой
Это статья-помощник для тестировщиков и всех неравнодушных, кто занимается сверкой макетов и свёрстанных результатов.

## Смотрим на наличие в макетах:

### Варианты контента
Есть макет с “Мало контента”, “Много контента”, “Нет контента”.

**Например:** у секции "набор карточек в карусели" показано, как выглядит с одной карточкой / вообще без карточек / когда все карточки не влезли в экран.

### Валидация
Есть макеты на все нужные валидации и их тексты. Указано при какой ситуации происходит валидация (в названии фрейма или подписью)

### Состояния
Есть все возможные состояния экрана / блока / элемента, для которого отрисован дизайн.
- Обычное
- При наведении
- В фокусе
- При нажатии
- Заблокированное
- Загрузка

### Связи между экранами (показаны стрелками)
Убеждаемся, что нам понятен сценарий и последовательность экранов.

### Тёмная тема
Если интерфейс возможен в тёмной теме, для неё есть макет

## Сравниваем с макетами вёрстку:

### Шрифты
Толщина, размер, межбуквенное расстояние, интерлиньяж — совпадают.

### Отступы
Отступы полностью соответствуют макетам.

### Стили
Цвета, обводки, тени — из [библиотеки токенов](https://www.figma.com/file/eJ2Q6XbVFsJZHPUojBitZB/Tokens) и соответствуют макетам

### Формулировки
Если текст относится к конкретному случаю/функции в интерфейсе, например:
- сообщения при валидациях и ошибках
- тексты в модалках, тостах, панелях
- тексты в заглушках
- тексты у контролов (кнопки, чекбоксы, тогглы и тд.)

**То проверяем, что формулировки соответствуют макетам**

### Сценарий и последовательность экранов
Соответствует заложенному в макетах/прототипе.

### Смотрим гайды на компоненты
Гайды — Библия, всё остальное вторично.
Если по гайдам компонент работает одним образом, а в макетах по-другому, трясём дизайнера, чтобы стало одинаково.