sync
This commit is contained in:
@@ -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` или принятый набор)
|
||||
- [ ] Размер шрифта адаптируется между брейкпоинтами (если это предусмотрено)
|
||||
- [ ] Line-height задан осознанно (в % или по принятому стандарту)
|
||||
- [ ] Используются только бесплатные шрифты (предпочтительно Google Fonts)
|
||||
- [ ] Есть коллекция Variables для типографики и Modes под брейкпоинты (например: Mobile/Tablet/Laptop/Desktop — как принято в проекте)
|
||||
- [ ] Text Styles используют переменные типографики (минимум размер и line-height; при необходимости letter-spacing)
|
||||
- [ ] На фреймах установлен корректный Mode для соответствующего брейкпоинта
|
||||
- [ ] Ограничение количества строк соблюдено там, где это критично
|
||||
- [ ] Правила для текста определены: перенос или обрезка (truncate), поведение при переполнении проверено
|
||||
- [ ] Проверены «экстремальные» тексты, включая одну очень длинную строку без пробелов
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -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
|
||||
Все тексты обязаны использовать **Text Styles**.
|
||||
### 5.1. Text Styles + Variables (обязательное правило)
|
||||
Все текстовые слои в макете обязаны использовать **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) используется, когда обрезка недопустима.
|
||||
|
||||
|
||||
@@ -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`)
|
||||
- Размеры шрифтов могут меняться между брейкпоинтами
|
||||
- Line-height в %, ограничения по количеству строк
|
||||
- Только через **Text Styles** (семантика: `H1 / H2 / Body / Caption / Button`)
|
||||
- Только бесплатные шрифты (предпочтительно **Google Fonts**)
|
||||
- Значения типографики (минимум размер и line-height) — через **Variables**
|
||||
- Адаптация между брейкпоинтами — через **Modes** в Variables (Mobile/Tablet/Laptop/Desktop)
|
||||
- Для ключевых текстов определены правила: wrap/truncate и max lines
|
||||
|
||||
---
|
||||
|
||||
@@ -90,7 +94,7 @@
|
||||
---
|
||||
|
||||
## 8. Изображения и медиа
|
||||
- Использовать `Fill / Fit` осознанно
|
||||
- Использовать `Fill / Fit` обоснованно
|
||||
- Safe area для обрезки
|
||||
- Поддержка разных соотношений сторон
|
||||
- Форматы и размеры соответствуют проекту
|
||||
|
||||
Reference in New Issue
Block a user