feat: добавить документацию по Figma Adaptive Standards

- добавлены исходные материалы канона по адаптивным макетам - добавлена конфигурация VitePress для новой документации - подключена сборка документации в npm-скриптах, CI и Docker - обновлена карточка документации на главной странице
2026-05-13 11:20:14 +03:00
parent 8f49e8c48b
commit 7554ce58db
12 changed files with 859 additions and 2 deletions
--- a/canons/figma/adaptive-layout-requirements.short.md
+++ b/canons/figma/adaptive-layout-requirements.short.md
@@ -0,0 +1,156 @@
+# Требования к адаптивному дизайну в 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. Якорные брейкпоинты
+| Версия        | Размер макета (Frame) | Диапазон (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. Понятен разработчику без дополнительных объяснений