gromov/figma-adaptive-standards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sync

Browse Source
This commit is contained in:
S. Gromov
2026-01-13 16:46:32 +03:00
parent af78b83cc4
commit c8318bdf1d
3 changed files with 22 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
adaptive-layout-requirements.checklist.md
View File

@@ -12,8 +12,8 @@
## 1. Брейкпоинты ## 1. Брейкпоинты
- [ ] Все якорные брейкпоинты созданы в виде отдельных фреймов - [ ] Все якорные брейкпоинты созданы в виде отдельных фреймов
- Mobile, Tablet, Laptop, Desktop (диапазоны соблюдены) - Mobile, Mobile Wide, Tablet, Laptop, Desktop (диапазоны соблюдены)
- [ ] Границы диапазонов трактуются единообразно (например: `Mobile < 768`, `Tablet ≥ 768`) - [ ] Границы диапазонов трактуются единообразно (например: `Mobile ≤ 479`, `Mobile Wide 480–767`, `Tablet 768–1023`, `Laptop 1024–1439`, `Desktop ≥ 1440`)
- [ ] Фреймы логически и визуально связаны - [ ] Фреймы логически и визуально связаны
- [ ] Дополнительные фреймы есть только при изменении сетки, навигации или структуры контента - [ ] Дополнительные фреймы есть только при изменении сетки, навигации или структуры контента
@@ -62,7 +62,7 @@
## 6. Типографика ## 6. Типографика
- [ ] Используются Text Styles (`H1 / H2 / Body / Caption / Button` или принятый набор) - [ ] Используются Text Styles (`H1 / H2 / Body / Caption / Button` или принятый набор)
- [ ] Используются только бесплатные шрифты (предпочтительно Google Fonts) - [ ] Используются только бесплатные шрифты (предпочтительно Google Fonts)
- [ ] Есть коллекция Variables для типографики и Modes под брейкпоинты (например: Mobile/Tablet/Laptop/Desktop — как принято в проекте) - [ ] Есть коллекция Variables для типографики и Modes под брейкпоинты (например: Mobile/Mobile Wide/Tablet/Laptop/Desktop — как принято в проекте)
- [ ] Text Styles используют переменные типографики (минимум размер и line-height; при необходимости letter-spacing) - [ ] Text Styles используют переменные типографики (минимум размер и line-height; при необходимости letter-spacing)
- [ ] На фреймах установлен корректный Mode для соответствующего брейкпоинта - [ ] На фреймах установлен корректный Mode для соответствующего брейкпоинта
- [ ] Ограничение количества строк соблюдено там, где это критично - [ ] Ограничение количества строк соблюдено там, где это критично

19
adaptive-layout-requirements.full.md
View File

@@ -58,19 +58,20 @@
## 2. Брейкпоинты и адаптивность ## 2. Брейкпоинты и адаптивность
### 2.1. Якорные брейкпоинты (база) ### 2.1. Якорные брейкпоинты (база)
| Версия | Базовая ширина | Диапазон | | Версия | Базовая ширина | Диапазон |
|---------|----------------|---------------| |-------------|----------------|---------------|
| Mobile | 375 px | 320 – 768 px | | Mobile | 375 px | 360 – 479 px |
| Tablet | 768 px | 768 – 1024 px | | Mobile Wide | 560 px | 480 – 767 px |
| Laptop | 1024 px | 1024 – 1440 px| | Tablet | 992 px | 768 – 1023 px |
| Desktop | 1440 px | 1440 – 1920 px| | Laptop | 1280 px | 1024 – 1439 px|
| Desktop | 1640 px | 1440 – 1920 px|
Требования: Требования:
- Каждый брейкпоинт — отдельный **Frame** (Screen Frame). - Каждый брейкпоинт — отдельный **Frame** (Screen Frame).
- Диапазоны рассматриваются как **интервалы ресайза**: макет должен работать от min до max. - Диапазоны рассматриваются как **интервалы ресайза**: макет должен работать от min до max.
- Все брейкпоинты должны быть **логически и визуально связаны**: типографика, сетка, шаги отступов и компоненты должны «эволюционировать», а не пересобираться хаотично. - Все брейкпоинты должны быть **логически и визуально связаны**: типографика, сетка, шаги отступов и компоненты должны «эволюционировать», а не пересобираться хаотично.
> Примечание про границы: пересечение на значении 768/1024/1440 трактуется как «порог» — допустимы оба варианта, но в проекте должно быть принято единое правило (например: `Mobile < 768`, `Tablet ≥ 768`). > Примечание про границы: диапазоны заданы без пересечений. Пороговые значения: 480/768/1024/1440. Пример правила: `Mobile ≤ 479`, `Mobile Wide 480–767`, `Tablet 768–1023`, `Laptop 1024–1439`, `Desktop ≥ 1440`.
### 2.2. Когда допустимо менять список брейкпоинтов ### 2.2. Когда допустимо менять список брейкпоинтов
Базовый набор можно корректировать **только** при объективной необходимости: Базовый набор можно корректировать **только** при объективной необходимости:
@@ -253,7 +254,7 @@ Text Styles должны быть **семантическими** (а не «п
Обязательная структура: Обязательная структура:
- есть коллекция Variables для типографики (например: `Typography`); - есть коллекция Variables для типографики (например: `Typography`);
- в коллекции заведены Modes под брейкпоинты (например: `Mobile`, `Tablet`, `Laptop`, `Desktop` — в точности как принято в проекте); - в коллекции заведены Modes под брейкпоинты (например: `Mobile`, `Mobile Wide`, `Tablet`, `Laptop`, `Desktop` — в точности как принято в проекте);
- для каждого семантического стиля (`H1/H2/Body/...`) определены переменные минимум для: - для каждого семантического стиля (`H1/H2/Body/...`) определены переменные минимум для:
- `font-size`; - `font-size`;
- `line-height`; - `line-height`;
@@ -261,7 +262,7 @@ Text Styles должны быть **семантическими** (а не «п
Обязательное правило применения: Обязательное правило применения:
- Text Styles используют эти переменные как значения типографики; - Text Styles используют эти переменные как значения типографики;
- у каждого фрейма экрана выставлен корректный Mode (Mobile/Tablet/Laptop/Desktop), чтобы типографика внутри фрейма соответствовала брейкпоинту; - у каждого фрейма экрана выставлен корректный Mode (Mobile/Mobile Wide/Tablet/Laptop/Desktop), чтобы типографика внутри фрейма соответствовала брейкпоинту;
- любые отличия от токенов (если они вообще допускаются) должны быть подписаны: **что изменено**, **зачем** и **как это ведёт себя** на min/max диапазона и при длинном контенте. - любые отличия от токенов (если они вообще допускаются) должны быть подписаны: **что изменено**, **зачем** и **как это ведёт себя** на min/max диапазона и при длинном контенте.
### 5.3. Многострочный текст: переносы и ограничения ### 5.3. Многострочный текст: переносы и ограничения

16
adaptive-layout-requirements.short.md
View File

@@ -20,12 +20,14 @@
## 2. Брейкпоинты и адаптивность ## 2. Брейкпоинты и адаптивность
### 2.1. Якорные брейкпоинты ### 2.1. Якорные брейкпоинты
| Версия | Базовая ширина | Диапазон | | Версия | Базовая ширина | Диапазон (CSS px) |
|---------|----------------|---------------| |---------------|----------------|-------------------|
| Mobile | 375 px | 320 – 768 px | | Mobile | 375 px | 360 – 479 px |
| Tablet | 768 px | 768 – 1024 px | | Mobile Wide | 560 px | 480 – 767 px |
| Laptop | 1024 px | 1024 – 1440 px| | Tablet | 992 px | 768 – 1023 px |
| Desktop | 1440 px | 1440 – 1920 px| | Laptop | 1280 px | 1024 – 1439 px |
| Desktop | 1640 px | 1440 – 1920 px |
- Каждый брейкпоинт — отдельный Frame в Figma. - Каждый брейкпоинт — отдельный Frame в Figma.
- Количество брейкпоинтов **может корректироваться** (визуальная иерархия, контент, сетка, навигация). - Количество брейкпоинтов **может корректироваться** (визуальная иерархия, контент, сетка, навигация).
@@ -76,7 +78,7 @@
- Только через **Text Styles** (семантика: `H1 / H2 / Body / Caption / Button`) - Только через **Text Styles** (семантика: `H1 / H2 / Body / Caption / Button`)
- Только бесплатные шрифты (предпочтительно **Google Fonts**) - Только бесплатные шрифты (предпочтительно **Google Fonts**)
- Значения типографики (минимум размер и line-height) — через **Variables** - Значения типографики (минимум размер и line-height) — через **Variables**
- Адаптация между брейкпоинтами — через **Modes** в Variables (Mobile/Tablet/Laptop/Desktop) - Адаптация между брейкпоинтами — через **Modes** в Variables (Mobile/Mobile Wide/Tablet/Laptop/Desktop)
- Для ключевых текстов определены правила: wrap/truncate и max lines - Для ключевых текстов определены правила: wrap/truncate и max lines
--- ---