sync

adaptive-layout-requirements.short.md

@@ -0,0 +1,150 @@
+# Требования к адаптивному дизайну в Figma (Сжатая версия)
+
+## 1. Структура файла Figma
+Рекомендуемая структура:
+
+- **Cover / Overview** — описание проекта, цели, контакты, ссылки  
+- **Design / UI** — финальные экраны  
+- **Components** — повторяющиеся элементы и Variants  
+- **Styles / Tokens** — цвета, типографика, эффекты  
+- **Responsive / Breakpoints** — логика адаптивного поведения  
+- **Prototype** — интерактивные сценарии и флоу  
+- **Archive / Old** — устаревшие версии  
+
+> Примечание: Страницы `Responsive / Breakpoints` и `Prototype` не дублируют дизайн-экраны, служат для объяснения поведения интерфейса и интерактивности.
+
+---
+
+## 2. Брейкпоинты и адаптивность
+
+### 2.1. Якорные брейкпоинты
+| Версия  | Базовая ширина | Диапазон      |
+|---------|----------------|---------------|
+| Mobile  | 375 px         | 320 – 768 px  |
+| Tablet  | 768 px         | 768 – 1024 px |
+| Laptop  | 1024 px        | 1024 – 1440 px|
+| Desktop | 1440 px        | 1440 – 1920 px|
+
+- Каждый брейкпоинт — отдельный Frame в Figma.  
+- Количество брейкпоинтов **может корректироваться** (визуальная иерархия, контент, сетка, навигация).  
+- Все брейкпоинты должны быть **логически и визуально связаны**.
+
+### 2.2. Принцип «один фрейм — один диапазон»
+- Один фрейм описывает **диапазон ширин**, а не отдельное устройство.  
+- Дополнительный фрейм — только при изменении сетки, навигации или структуры контента.  
+
+### 2.3. Обязательное требование к ресайзу
+- Макеты должны **корректно ресайзиться во всём диапазоне**, без дополнительных фреймов.  
+- Проверяется:
+  - изменение ширины фрейма вручную до min/max диапазона  
+  - поведение сетки, карточек, текста, навигации  
+  - отсутствие коллизий и переполнений  
+  - сохранение визуальной иерархии  
+
+> Макет некорректен, если работает только на базовой ширине.
+
+### 2.4. Реализация в Figma
+- **Обязательно:** Auto Layout на всех контейнерах, осознанные `Hug / Fill / Fixed`, Constraints, min/max width для ключевых блоков.  
+- **Запрещено:** ручное позиционирование без Auto Layout, абсолютные размеры без необходимости, дубли фреймов для адаптивности.
+
+---
+
+## 3. Компоненты
+- Все повторяющиеся элементы — **Components**; использовать **Variants** вместо копий.  
+- Адаптивность компонентов:
+  - тянутся по ширине  
+  - меняют высоту по контенту  
+  - корректно ведут себя в разных контейнерах  
+
+---
+
+## 4. Сетка / Layout Grid
+| Device  | Колонки |
+|---------|---------|
+| Mobile  | 4       |
+| Tablet  | 8       |
+| Desktop | 12      |
+
+- Настройки: margin, gutter, column width  
+- Сетка должна соответствовать верстке
+
+---
+
+## 5. Типографика
+- Только через **Text Styles** (`H1 / H2 / Body / Caption / Button`)  
+- Размеры шрифтов могут меняться между брейкпоинтами  
+- Line-height в %, ограничения по количеству строк  
+
+---
+
+## 6. Цвета и стили
+- **Color Styles** с семантическими названиями:  
+  `Primary / Secondary`, `Text / Background / Border`, `Success / Error / Warning`  
+
+---
+
+## 7. Контент и состояния UI
+- Текст: короткий / нормальный / длинный, проверка переполнения  
+- Состояния UI: Default, Hover, Active, Disabled, Focus, Loading, Empty, Error  
+
+---
+
+## 8. Изображения и медиа
+- Использовать `Fill / Fit` осознанно  
+- Safe area для обрезки  
+- Поддержка разных соотношений сторон  
+- Форматы и размеры соответствуют проекту  
+
+---
+
+## 9. Навигация
+- Desktop → горизонтальное меню  
+- Tablet → сокращённое меню  
+- Mobile → бургер / bottom bar  
+
+---
+
+## 10. Accessibility (A11y)
+- Контраст ≥ WCAG AA  
+- Минимальный размер клика: 44×44 px  
+- Focus states, логичный tab order  
+
+---
+
+## 11. Прототипирование
+- Основные пользовательские флоу  
+- Переходы между брейкпоинтами  
+- Проверка поведения при ресайзе  
+
+---
+
+## 12. QA и проверка адаптивности
+- Ресайз фрейма вручную до min/max диапазона  
+- Проверка компонентов отдельно  
+- Проверка экстремальных значений  
+- Макет готов, если ресайз работает корректно во всём диапазоне и нет коллизий  
+
+---
+
+## 13. Передача разработчику
+- Dev Mode включён  
+- Комментарии с логикой адаптивности  
+- Описаны брейкпоинты, поведение блоков, скрытие/появление элементов  
+
+---
+
+## 14. Запрещено
+- Фиксированные ширины без причины  
+- Дубли компонентов под каждый экран  
+- Текст как вектор  
+- Ручные отступы  
+- Отсутствие Auto Layout  
+
+---
+
+## 15. Минимальный стандарт качества
+Макет считается адаптивным, если:
+1. Корректно ресайзится во всём диапазоне  
+2. Использует Auto Layout + Constraints  
+3. Имеет брейкпоинты  
+4. Понятен разработчику без дополнительных объяснений