sync

adaptive-layout-requirements.checklist.md

@@ -1,5 +1,7 @@
 # Чеклист приёмки макета (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`)
@@ -33,7 +35,7 @@
 - [ ] Все контейнеры, списки, карточки, кнопки, хедеры, футеры, сайдбары используют Auto Layout
 - [ ] Padding задан со всех сторон через Auto Layout (без «ручных» отступов)
 - [ ] Spacing между элементами задан через Auto Layout
-- [ ] Режимы ресайза настроены осознанно (`Hug / Fill / Fixed`) для ключевых контейнеров и элементов
+- [ ] Режимы ресайза выбраны обоснованно (`Hug / Fill / Fixed`) для ключевых контейнеров и элементов
 - [ ] При необходимости заданы min/max (для предотвращения поломок на крайних ширинах)
 - [ ] Constraints заданы корректно (Left / Right / Top / Bottom / Center / Scale) там, где Auto Layout не покрывает сценарий
 - [ ] Нет ручного позиционирования или абсолютных размеров без причины
@@ -43,7 +45,7 @@
 ## 4. Сетка / Layout Grid
 - [ ] Layout Grid настроен на фреймах каждого брейкпоинта (колонки соответствуют принятому стандарту)
 - [ ] Margin и gutter заданы и согласованы с версткой
-- [ ] Поведение сетки выбрано осознанно (Stretch/Center — по модели проекта)
+- [ ] Поведение сетки выбрано обоснованно (Stretch/Center — по модели проекта)
 - [ ] Основные блоки выровнены по сетке и используют согласованный шаг отступов
 
 ---
@@ -59,10 +61,13 @@
 
 ## 6. Типографика
 - [ ] Используются Text Styles (`H1 / H2 / Body / Caption / Button` или принятый набор)
-- [ ] Размер шрифта адаптируется между брейкпоинтами (если это предусмотрено)
+- [ ] Используются только бесплатные шрифты (предпочтительно Google Fonts)
-- [ ] Line-height задан осознанно (в % или по принятому стандарту)
+- [ ] Есть коллекция Variables для типографики и Modes под брейкпоинты (например: Mobile/Tablet/Laptop/Desktop — как принято в проекте)
+- [ ] Text Styles используют переменные типографики (минимум размер и line-height; при необходимости letter-spacing)
+- [ ] На фреймах установлен корректный Mode для соответствующего брейкпоинта
 - [ ] Ограничение количества строк соблюдено там, где это критично
 - [ ] Правила для текста определены: перенос или обрезка (truncate), поведение при переполнении проверено
+- [ ] Проверены «экстремальные» тексты, включая одну очень длинную строку без пробелов
 
 ---
 

adaptive-layout-requirements.full.md

@@ -18,6 +18,7 @@
 - **Auto Layout** — основной механизм адаптивности в Figma для контейнеров и компонентов.
 - **Hug / Fill / Fixed** — режимы ресайза (по контенту / заполнять контейнер / фиксированно).
 - **Constraints** — привязки объектов внутри Frame (Left/Right/Top/Bottom/Center/Scale).
+- **«Обоснованно» (в контексте этого стандарта)** — по каждому «выбору» (например: `Hug/Fill/Fixed`, wrap/truncate для текста, `Fill/Fit`, `Stretch/Center`) должно быть понятно: **что именно выбрано**, **зачем** и **как это ведёт себя** на min/max диапазона и при длинном контенте. Если выбор может трактоваться по-разному — добавьте аннотацию/комментарий на странице `Responsive / Breakpoints`.
 
 ---
 
@@ -119,7 +120,7 @@
 Минимальные требования к Auto Layout:
 - паддинги задаются через Auto Layout (а не «ручными» прямоугольниками);
 - расстояния между элементами задаются через `Spacing`;
-- направление (Horizontal/Vertical) и `Wrap` выбираются осознанно;
+- направление (Horizontal/Vertical) и `Wrap` выбираются обоснованно;
 - в ключевых местах задаются **min/max** (если без этого появляются «переломы» компоновки).
 
 #### 2.5.2. Resizing: Hug / Fill / Fixed
@@ -186,9 +187,9 @@ Constraints применяются там, где Auto Layout не покрыв
 - проверьте состояния и длину текста.
 
 ### 3.4. Типовые требования по компонентам (примерно, без привязки к бренду)
-- **Button**: фиксированная высота (например, 40/44/48 по дизайн-системе), ширина `Hug` или `Fill` по контексту, текст не должен вылезать (правила: перенос/обрезка задаются осознанно).
+- **Button**: фиксированная высота (например, 40/44/48 по дизайн-системе), ширина `Hug` или `Fill` по контексту, текст не должен вылезать (правила: перенос/обрезка задаются обоснованно).
 - **Input**: высота фиксирована, поле `Fill`, лейбл и хелпер-текст — `Hug` с переносом.
-- **Card**: контейнер `Fill`, текстовые блоки — `Hug` по высоте, изображение — осознанный `Fill/Fit` с safe-area.
+- **Card**: контейнер `Fill`, текстовые блоки — `Hug` по высоте, изображение — обоснованный `Fill/Fit` с safe-area.
 
 ---
 
@@ -229,8 +230,10 @@ Constraints применяются там, где Auto Layout не покрыв
 
 ## 5. Типографика
 
-### 5.1. Только через Text Styles
+### 5.1. Text Styles + Variables (обязательное правило)
-Все тексты обязаны использовать **Text Styles**.
+Все текстовые слои в макете обязаны использовать **Text Styles**.
+
+Text Styles должны быть **семантическими** (а не «по экрану») и опираться на **типографические токены в Variables**.
 
 Минимальный набор (пример семантики):
 - `H1`, `H2`, `H3`
@@ -240,29 +243,39 @@ Constraints применяются там, где Auto Layout не покрыв
 
 Требования:
 - одинаковая семантика должна выглядеть согласованно во всех экранах;
-- локальные «ручные» размеры шрифта недопустимы, если это не исключение, закреплённое в системе.
+- локальные «ручные» правки размеров/интервалов поверх стиля недопустимы (кроме редких исключений, зафиксированных правилом);
+- разрешены только бесплатные шрифты; предпочтительно использовать **Google Fonts**;
+- значения типографики (минимум `font-size` и `line-height`, при необходимости `letter-spacing`) — источник правды в **Variables**;
+- адаптация типографики между брейкпоинтами делается через **Modes** в Variables, а не через дублирование текстовых стилей «под каждый брейкпоинт».
 
-### 5.2. Адаптация типографики между брейкпоинтами
+### 5.2. Адаптация типографики между брейкпоинтами через Modes
-Допускается изменение:
+Если типографика меняется между брейкпоинтами, это изменение фиксируется **через Modes** в коллекции Variables.
-- размера шрифта;
-- межстрочного интервала;
-- межбуквенного интервала (редко и осознанно);
-- ограничения количества строк.
 
-Правило:
+Обязательная структура:
-- изменения типографики между брейкпоинтами должны быть предсказуемыми и фиксироваться как правило (например: `H1` на Mobile меньше на 2–4px).
+- есть коллекция Variables для типографики (например: `Typography`);
+- в коллекции заведены Modes под брейкпоинты (например: `Mobile`, `Tablet`, `Laptop`, `Desktop` — в точности как принято в проекте);
+- для каждого семантического стиля (`H1/H2/Body/...`) определены переменные минимум для:
+  - `font-size`;
+  - `line-height`;
+  - опционально: `letter-spacing` (редко и только обоснованно).
+
+Обязательное правило применения:
+- Text Styles используют эти переменные как значения типографики;
+- у каждого фрейма экрана выставлен корректный Mode (Mobile/Tablet/Laptop/Desktop), чтобы типографика внутри фрейма соответствовала брейкпоинту;
+- любые отличия от токенов (если они вообще допускаются) должны быть подписаны: **что изменено**, **зачем** и **как это ведёт себя** на min/max диапазона и при длинном контенте.
 
 ### 5.3. Многострочный текст: переносы и ограничения
 Для ключевых текстовых блоков обязаны быть определены правила:
 - переносится ли текст (wrap) или обрезается (truncate);
-- сколько максимум строк допустимо в карточке/ячейке;
+- сколько максимум строк допустимо в конкретном контексте (карточка/ячейка/таблица/заголовок/кнопка);
-- что происходит при переполнении (например, `…` + tooltip в продуктовых требованиях — если применимо).
+- что происходит при переполнении (например, `…`, перенос на следующую строку, увеличение высоты блока — что именно ожидается в UI).
 
 Минимальная проверка контента:
 - короткий текст;
 - нормальный (ожидаемый);
 - длинный;
-- «экстремальный» (очень длинный) — для выявления поломок.
+- «экстремальный» (очень длинный) — для выявления поломок;
+- одна очень длинная строка без пробелов (проверка на разъезд/переполнение в узких контейнерах).
 
 ---
 
@@ -323,7 +336,7 @@ Constraints применяются там, где Auto Layout не покрыв
 
 ## 8. Изображения и медиа
 
-### 8.1. Осознанный выбор Fill / Fit
+### 8.1. Обоснованный выбор Fill / Fit
 - `Fill` (cover) используется, когда допустима обрезка.
 - `Fit` (contain) используется, когда обрезка недопустима.
 

adaptive-layout-requirements.short.md

@@ -1,5 +1,7 @@
 # Требования к адаптивному дизайну в Figma (Сжатая версия)
 
+> Примечание: в этом документе «обоснованно» означает: по каждому «выбору» (например: `Hug/Fill/Fixed`, wrap/truncate для текста, `Fill/Fit`) понятно **что выбрано**, **зачем** и **как это ведёт себя** на min/max диапазона и при длинном контенте.
+
 ## 1. Структура файла Figma
 Рекомендуемая структура:
 
@@ -44,7 +46,7 @@
 > Макет некорректен, если работает только на базовой ширине.
 
 ### 2.4. Реализация в Figma
-- **Обязательно:** Auto Layout на всех контейнерах, осознанные `Hug / Fill / Fixed`, Constraints, min/max width для ключевых блоков.  
+- **Обязательно:** Auto Layout на всех контейнерах, обоснованный выбор `Hug / Fill / Fixed`, Constraints, min/max width для ключевых блоков.
 - **Запрещено:** ручное позиционирование без Auto Layout, абсолютные размеры без необходимости, дубли фреймов для адаптивности.
 
 ---
@@ -71,9 +73,11 @@
 ---
 
 ## 5. Типографика
-- Только через **Text Styles** (`H1 / H2 / Body / Caption / Button`)  
+- Только через **Text Styles** (семантика: `H1 / H2 / Body / Caption / Button`)
-- Размеры шрифтов могут меняться между брейкпоинтами  
+- Только бесплатные шрифты (предпочтительно **Google Fonts**)
-- Line-height в %, ограничения по количеству строк  
+- Значения типографики (минимум размер и line-height) — через **Variables**
+- Адаптация между брейкпоинтами — через **Modes** в Variables (Mobile/Tablet/Laptop/Desktop)
+- Для ключевых текстов определены правила: wrap/truncate и max lines
 
 ---
 
@@ -90,7 +94,7 @@
 ---
 
 ## 8. Изображения и медиа
-- Использовать `Fill / Fit` осознанно  
+- Использовать `Fill / Fit` обоснованно
 - Safe area для обрезки  
 - Поддержка разных соотношений сторон  
 - Форматы и размеры соответствуют проекту