figma-adaptive-standards/adaptive-layout-requirements.checklist.md

# Чеклист приёмки макета (Figma)

> Примечание: в этом чеклисте «обоснованно» означает: по каждому «выбору» (например: `Hug/Fill/Fixed`, wrap/truncate для текста, `Fill/Fit`, `Stretch/Center`) понятно **что выбрано**, **зачем** и **как это ведёт себя** на min/max диапазона и при длинном контенте. Если без пояснения можно понять по-разному — добавлена аннотация/комментарий.

## 0. Структура файла и нейминг
- [ ] В файле есть рабочие страницы: Cover / Overview, Design / UI, Components, Styles / Tokens, Responsive / Breakpoints, Prototype (Archive / Old — при необходимости)
- [ ] Экраны названы по единому правилу (например: `Feature / Screen — Breakpoint`)
- [ ] Компоненты названы семантически и единообразно (без «Button 1 / Button 2»)
- [ ] На странице `Responsive / Breakpoints` описаны правила перестроения для сложных зон (колонки, переносы, скрытие/появление элементов)

---

## 1. Брейкпоинты
- [ ] Все якорные брейкпоинты созданы в виде отдельных фреймов
  - Mobile, Mobile Wide, Tablet, Laptop, Desktop (диапазоны соблюдены)
- [ ] Границы диапазонов трактуются единообразно (например: `Mobile ≤ 479`, `Mobile Wide 480–767`, `Tablet 768–1023`, `Laptop 1024–1439`, `Desktop ≥ 1440`)
- [ ] Фреймы логически и визуально связаны
- [ ] Дополнительные фреймы есть только при изменении сетки, навигации или структуры контента

---

## 2. Адаптивность и ресайз
- [ ] Ресайз фрейма вручную до минимального значения диапазона
- [ ] Ресайз фрейма до максимального значения диапазона
- [ ] Проверены промежуточные значения (минимум 3–5 точек внутри диапазона)
- [ ] Макет корректно меняется во всём диапазоне без создания дублирующих фреймов
- [ ] Нет коллизий при ресайзе (наезды, обрезания, неожиданные перекрытия)
- [ ] Карточки и блоки тянутся или сжимаются корректно
- [ ] Текст переносится/обрезается по правилам и не выходит за пределы контейнеров
- [ ] Навигация корректно адаптируется под ширину

---

## 3. Auto Layout и Constraints
- [ ] Все контейнеры, списки, карточки, кнопки, хедеры, футеры, сайдбары используют Auto Layout
- [ ] Padding задан со всех сторон через Auto Layout (без «ручных» отступов)
- [ ] Spacing между элементами задан через Auto Layout
- [ ] Режимы ресайза выбраны обоснованно (`Hug / Fill / Fixed`) для ключевых контейнеров и элементов
- [ ] При необходимости заданы min/max (для предотвращения поломок на крайних ширинах)
- [ ] Constraints заданы корректно (Left / Right / Top / Bottom / Center / Scale) там, где Auto Layout не покрывает сценарий
- [ ] Нет ручного позиционирования или абсолютных размеров без причины

---

## 4. Сетка / Layout Grid
- [ ] Layout Grid настроен на фреймах каждого брейкпоинта (колонки соответствуют принятому стандарту)
- [ ] Margin и gutter заданы и согласованы с версткой
- [ ] Поведение сетки выбрано обоснованно (Stretch/Center — по модели проекта)
- [ ] Основные блоки выровнены по сетке и используют согласованный шаг отступов

---

## 5. Компоненты
- [ ] Все повторяющиеся элементы оформлены как Components
- [ ] Используются Variants вместо копий
- [ ] Состояния компонентов показаны (минимум: Default, Hover, Active/Pressed, Disabled, Focus — если применимо)
- [ ] Компоненты корректно тянутся и меняют высоту по контенту
- [ ] Адаптивное поведение проверено во всех типовых контейнерах (экран, модалка, сайдбар, список/сетка)

---

## 6. Типографика
- [ ] Используются Text Styles (`H1 / H2 / Body / Caption / Button` или принятый набор)
- [ ] Используются только бесплатные шрифты (предпочтительно Google Fonts)
- [ ] Есть коллекция Variables для типографики и Modes под брейкпоинты (например: Mobile/Mobile Wide/Tablet/Laptop/Desktop — как принято в проекте)
- [ ] Text Styles используют переменные типографики (минимум размер и line-height; при необходимости letter-spacing)
- [ ] На фреймах установлен корректный Mode для соответствующего брейкпоинта
- [ ] Ограничение количества строк соблюдено там, где это критично
- [ ] Правила для текста определены: перенос или обрезка (truncate), поведение при переполнении проверено
- [ ] Проверены «экстремальные» тексты, включая одну очень длинную строку без пробелов

---

## 7. Цвета и стили
- [ ] Все цвета через Color Styles
- [ ] Семантические названия соблюдены (`Primary / Secondary`, `Text / Background / Border`, `Success / Error / Warning`)
- [ ] Дополнительные стили (тени/обводки/радиусы), если используются, применены единообразно

---

## 8. Контент и состояния UI
- [ ] Текст проверен на короткие / нормальные / длинные варианты
- [ ] Проверка переполнения и переноса строк выполнена
- [ ] Состояния UI присутствуют: Default, Hover, Active, Disabled, Focus, Loading, Empty, Error
- [ ] Для форм/инпутов показаны состояния ошибок и валидации (включая сочетания вроде `Focus + Error`, если применимо)

---

## 9. Изображения и медиа
- [ ] Fill / Fit задан корректно
- [ ] Safe area для обрезки изображений соблюдена
- [ ] Поддерживаются разные соотношения сторон (описано поведение при изменении ratio)
- [ ] Форматы и размеры соответствуют требованиям проекта (если есть требования к экспорту)

---

## 10. Навигация
- [ ] Desktop → горизонтальное меню
- [ ] Tablet → сокращённое меню
- [ ] Mobile → бургер / bottom bar
- [ ] Описаны правила overflow/сокращения (что уходит в «ещё», что скрывается/переезжает)

---

## 11. Accessibility (A11y)
- [ ] Контраст ≥ WCAG AA
- [ ] Минимальный размер клика 44×44 px
- [ ] Focus states проверены
- [ ] Логичный tab order соблюден

---

## 12. Прототипирование
- [ ] Основные пользовательские флоу представлены
- [ ] Переходы между брейкпоинтами реализованы (если требуется)
- [ ] Поведение при ресайзе проверено/продемонстрировано

---

## 13. Передача в разработку
- [ ] Dev Mode включён
- [ ] Все комментарии с логикой адаптивности оставлены
- [ ] Брейкпоинты, поведение блоков, скрытие/появление элементов описаны
- [ ] Ассеты к экспорту подготовлены (если требуется): корректные имена, форматы, настройки экспорта

---

## 14. Запрещено
- [ ] Фиксированные ширины без причины
- [ ] Дубли компонентов под каждый экран
- [ ] Текст как вектор
- [ ] Ручные отступы
- [ ] Отсутствие Auto Layout

---

## ✅ Итоговое решение
Макет считается **готовым к разработке**, если выполнены все пункты чеклиста и ресайз работает корректно во всех диапазонах.