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

# Требования к адаптивному дизайну в Figma (Сжатая версия)

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

## 1. Структура файла Figma
Рекомендуемая структура:

- **Cover / Overview** — описание проекта, цели, контакты, ссылки  
- **Design / UI** — финальные экраны  
- **Components** — повторяющиеся элементы и Variants  
- **Styles / Tokens** — цвета, типографика, эффекты  
- **Responsive / Breakpoints** — логика адаптивного поведения  
- **Prototype** — интерактивные сценарии и флоу  
- **Archive / Old** — устаревшие версии  

> Примечание: Страницы `Responsive / Breakpoints` и `Prototype` не дублируют дизайн-экраны, служат для объяснения поведения интерфейса и интерактивности.

---

## 2. Брейкпоинты и адаптивность

### 2.1. Якорные брейкпоинты
| Версия        | Базовая ширина | Диапазон (CSS px) |
|---------------|----------------|-------------------|
| Mobile        | 375 px         | 360 – 479 px      |
| Mobile Wide   | 560 px         | 480 – 767 px      |
| Tablet        | 992 px         | 768 – 1023 px     |
| Laptop        | 1280 px        | 1024 – 1439 px    |
| Desktop       | 1640 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`)
- Только бесплатные шрифты (предпочтительно **Google Fonts**)
- Значения типографики (минимум размер и line-height) — через **Variables**
- Адаптация между брейкпоинтами — через **Modes** в Variables (Mobile/Mobile Wide/Tablet/Laptop/Desktop)
- Для ключевых текстов определены правила: wrap/truncate и max lines

---

## 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. Понятен разработчику без дополнительных объяснений