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