370 lines
14 KiB
Markdown
370 lines
14 KiB
Markdown
# Требования к адаптивному дизайну в Figma
|
||
|
||
## 1. Структура файла Figma
|
||
|
||
### 1.1. Страницы (Pages)
|
||
|
||
Рекомендуемая структура файла Figma:
|
||
|
||
- **Cover / Overview** — описание проекта, цели, контакты, ссылки
|
||
- **Design / UI** — финальные дизайн-экраны
|
||
- **Components** — все компоненты и их варианты
|
||
- **Styles / Tokens** — цветовые, текстовые и эффектные стили
|
||
- **Responsive / Breakpoints** — документация адаптивного поведения
|
||
- **Prototype** — пользовательские сценарии и интерактивность
|
||
- **Archive / Old** — устаревшие версии
|
||
|
||
---
|
||
|
||
#### Страница `Responsive / Breakpoints`
|
||
|
||
Служебная страница, предназначенная для фиксации и объяснения
|
||
адаптивной логики интерфейса.
|
||
|
||
Содержит:
|
||
- описание системы брейкпоинтов и диапазонов
|
||
*(например: Mobile 375 → 320–768, Tablet 768 → 768–1024)*
|
||
- примеры поведения ключевых блоков при ресайзе
|
||
*(например: перестроение карточек, скрытие sidebar, переход навигации в бургер-меню)*
|
||
- визуальные пояснения изменений layout’а
|
||
*(например: смена количества колонок, изменение порядка блоков)*
|
||
- комментарии для разработки
|
||
*(например: max-width контейнера, min-width карточки)*
|
||
|
||
Страница не дублирует дизайн-экраны и не содержит полные версии интерфейса.
|
||
|
||
---
|
||
|
||
#### Страница `Prototype`
|
||
|
||
Страница, содержащая интерактивные пользовательские сценарии.
|
||
|
||
Содержит:
|
||
- ключевые пользовательские флоу
|
||
*(например: авторизация, оформление заказа, создание сущности)*
|
||
- интерактивные состояния интерфейса
|
||
*(например: открытие мобильного меню, модальное окно, dropdown)*
|
||
- переходы между экранами и состояниями
|
||
*(например: шаги формы, успешное/ошибочное состояние)*
|
||
|
||
Страница не предназначена для хранения всех экранов проекта
|
||
и используется только для демонстрации поведения интерфейса.
|
||
|
||
---
|
||
|
||
## 2. Брейкпоинты и принцип fluid-адаптива
|
||
|
||
### 2.1. Якорные брейкпоинты (структура)
|
||
|
||
В проекте используются **якорные брейкпоинты**, которые являются
|
||
основными контрольными точками дизайна и описывают
|
||
**диапазоны ширин экранов**, а не конкретные устройства.
|
||
|
||
| Версия | Базовая ширина | Диапазон |
|
||
|------|----------------|----------|
|
||
| Mobile | **375 px** | 320 – 768 px |
|
||
| Tablet | **768 px** | 768 – 1024 px |
|
||
| Laptop (MacBook) | **1024 px** | 1024 – 1440 px |
|
||
| Desktop (PC) | **1440 px** | 1440 – 1920 px |
|
||
|
||
Каждый брейкпоинт представлен **отдельным Frame в Figma**.
|
||
|
||
---
|
||
|
||
#### 2.1.1. Гибкость системы брейкпоинтов
|
||
|
||
Количество брейкпоинтов **не является фиксированным** и может быть
|
||
увеличено или сокращено в процессе работы, если:
|
||
- в рамках диапазона невозможно корректно отобразить дизайн,
|
||
- страдает визуальная иерархия или читаемость,
|
||
- меняется структура, сетка или навигация,
|
||
- этого требует продукт, контент или бизнес-логика.
|
||
|
||
Решение об изменении количества брейкпоинтов принимается
|
||
дизайнером, заказчиком или менеджером проекта.
|
||
|
||
---
|
||
|
||
#### 2.1.2. Связность брейкпоинтов
|
||
|
||
При любом изменении системы брейкпоинтов должно соблюдаться правило:
|
||
|
||
> Каждый брейкпоинт обязан логически и визуально
|
||
> связываться с предыдущим и следующим брейкпоинтом.
|
||
|
||
Это означает:
|
||
- согласованную структуру layout’а,
|
||
- предсказуемые изменения между диапазонами,
|
||
- отсутствие «изолированных» версий дизайна.
|
||
|
||
Брейкпоинт не может существовать как самостоятельный,
|
||
не связанный с соседними диапазонами.
|
||
|
||
---
|
||
|
||
### 2.2. Обязательное требование к ресайзу
|
||
|
||
Каждая версия дизайна **обязана корректно ресайзиться во всём своём диапазоне**,
|
||
**без создания дополнительных фреймов**.
|
||
|
||
Это означает:
|
||
- изменение ширины фрейма **не ломает layout**,
|
||
- элементы корректно тянутся или сжимаются,
|
||
- отступы и визуальная иерархия сохраняются,
|
||
- контент не выходит за границы контейнеров.
|
||
|
||
Макет считается некорректным, если он работает
|
||
только на базовой ширине брейкпоинта.
|
||
|
||
---
|
||
|
||
### 2.3. Реализация в Figma (обязательно)
|
||
|
||
Для обеспечения корректного ресайза должны использоваться:
|
||
- **Auto Layout** на всех контейнерах
|
||
- осознанные значения `Hug / Fill / Fixed`
|
||
- корректные **Constraints**
|
||
- min / max width для ключевых блоков (логически, не визуально)
|
||
|
||
Запрещено:
|
||
- проектировать макет только под фиксированную ширину
|
||
- компенсировать адаптивность дублированием фреймов
|
||
- использовать абсолютные размеры без необходимости
|
||
|
||
---
|
||
|
||
### 2.4. Проверка адаптивности (обязательная)
|
||
|
||
Для каждого якорного брейкпоинта дизайнер обязан:
|
||
|
||
1. Ресайзить фрейм до минимального значения диапазона
|
||
2. Ресайзить фрейм до максимального значения диапазона
|
||
3. Проверить:
|
||
- поведение сетки
|
||
- переносы текста
|
||
- масштабирование карточек
|
||
- поведение навигации
|
||
- отсутствие коллизий
|
||
|
||
Макет считается **не готовым**, если он корректно работает только
|
||
на базовой ширине.
|
||
|
||
---
|
||
|
||
### 2.5. Принцип «один фрейм — один диапазон»
|
||
|
||
> Один фрейм в Figma описывает **не одно устройство**,
|
||
> а **диапазон ширин экрана**.
|
||
|
||
Дополнительные фреймы допускаются **только если**:
|
||
- меняется сетка
|
||
- меняется навигация
|
||
- меняется структура контента
|
||
|
||
---
|
||
|
||
### 2.6. Связь с QA-чеклистом
|
||
|
||
Требование к обязательному ресайзу является частью
|
||
**QA-проверки адаптивности** (см. раздел 14).
|
||
|
||
Отсутствие корректного ресайза в диапазоне
|
||
считается критической ошибкой адаптивного дизайна.
|
||
|
||
---
|
||
|
||
## 3. Auto Layout (ключевое требование)
|
||
|
||
### 3.1. Обязательное использование
|
||
- Все контейнеры
|
||
- Все карточки
|
||
- Все списки
|
||
- Все кнопки
|
||
- Хедеры, футеры, сайдбары
|
||
|
||
**Запрещено:**
|
||
- Ручное позиционирование без Auto Layout
|
||
- Абсолютные отступы без необходимости
|
||
|
||
### 3.2. Настройки
|
||
- Padding задан со всех сторон
|
||
- Spacing между элементами через Auto Layout
|
||
- Использование `Hug / Fill / Fixed` осознанно
|
||
|
||
---
|
||
|
||
## 4. Constraints (Ограничения)
|
||
|
||
### 4.1. Обязательные правила
|
||
- Корректные Constraints:
|
||
- Left / Right
|
||
- Top / Bottom
|
||
- Center
|
||
- Scale (только при необходимости)
|
||
|
||
### 4.2. Проверка
|
||
- При изменении ширины фрейма интерфейс:
|
||
- не ломается
|
||
- не наезжает
|
||
- не теряет пропорции
|
||
|
||
---
|
||
|
||
## 5. Grid / Layout Grid
|
||
|
||
### 5.1. Сетки
|
||
- Mobile: 4 колонки
|
||
- Tablet: 8 колонок
|
||
- Desktop: 12 колонок
|
||
|
||
### 5.2. Настройки
|
||
- Заданы:
|
||
- Margin
|
||
- Gutter
|
||
- Column width
|
||
- Сетка соответствует реальной верстке
|
||
|
||
---
|
||
|
||
## 6. Компоненты
|
||
|
||
### 6.1. Компонентный подход
|
||
- Все повторяющиеся элементы — **Components**
|
||
- Использовать **Variants** вместо копий
|
||
|
||
### 6.2. Адаптивность компонентов
|
||
Каждый компонент:
|
||
- Тянется по ширине
|
||
- Меняет высоту по контенту
|
||
- Корректно ведёт себя в разных контейнерах
|
||
|
||
---
|
||
|
||
## 7. Типографика
|
||
|
||
### 7.1. Стили текста
|
||
- Только через **Text Styles**
|
||
- Названия:
|
||
`H1 / H2 / Body / Caption / Button`
|
||
|
||
### 7.2. Адаптивность текста
|
||
- Размеры шрифтов меняются между брейкпоинтами
|
||
- Line-height задан в %
|
||
- Ограничения по количеству строк (max lines)
|
||
|
||
---
|
||
|
||
## 8. Цвета и стили
|
||
|
||
### 8.1. Color Styles
|
||
- Все цвета — через стили
|
||
- Семантические названия:
|
||
- `Primary / Secondary`
|
||
- `Text / Background / Border`
|
||
- `Success / Error / Warning`
|
||
|
||
---
|
||
|
||
## 9. Контент и состояния
|
||
|
||
### 9.1. Длина контента
|
||
- Короткий / нормальный / длинный текст
|
||
- Переполнение
|
||
- Перенос строк
|
||
|
||
### 9.2. Состояния UI
|
||
- Default
|
||
- Hover
|
||
- Active
|
||
- Disabled
|
||
- Focus
|
||
- Loading
|
||
- Empty
|
||
- Error
|
||
|
||
---
|
||
|
||
## 10. Изображения и медиа
|
||
|
||
### 10.1. Адаптивность
|
||
- `Fill / Fit` задан осознанно
|
||
- Safe area для обрезки
|
||
- Поддержка разных соотношений сторон
|
||
|
||
---
|
||
|
||
## 11. Навигация
|
||
|
||
### 11.1. Поведение на разных экранах
|
||
- Desktop → горизонтальное меню
|
||
- Tablet → сокращённое меню
|
||
- Mobile → бургер / bottom bar
|
||
|
||
---
|
||
|
||
## 12. Accessibility (A11y)
|
||
|
||
### 12.1. Минимальные требования
|
||
- Контраст ≥ WCAG AA
|
||
- Минимальный размер клика: 44×44 px
|
||
- Focus states
|
||
- Логичный tab order
|
||
|
||
---
|
||
|
||
## 13. Прототипирование
|
||
|
||
### 13.1. Обязательные сценарии
|
||
- Основные пользовательские флоу
|
||
- Переходы между брейкпоинтами
|
||
- Проверка поведения при resize
|
||
|
||
---
|
||
|
||
## 14. Проверка адаптивности (QA в Figma)
|
||
|
||
### 14.1. Чеклист
|
||
- Ресайз фрейма вручную
|
||
- Переключение брейкпоинтов
|
||
- Проверка компонентов отдельно
|
||
- Проверка экстремальных значений
|
||
|
||
---
|
||
|
||
## 15. Передача в разработку
|
||
|
||
### 15.1. Требования
|
||
- Dev Mode включён
|
||
- Комментарии с логикой адаптивности
|
||
- Описаны:
|
||
- брейкпоинты
|
||
- поведение блоков
|
||
- скрытие/появление элементов
|
||
|
||
---
|
||
|
||
## 16. Документация
|
||
|
||
### 16.1. Обязательно
|
||
- Описание принципов адаптива
|
||
- Таблица брейкпоинтов
|
||
- Примеры поведения блоков
|
||
|
||
---
|
||
|
||
## 17. Типичные ошибки (запрещено)
|
||
- Фиксированные ширины без причины
|
||
- Дубли компонентов под каждый экран
|
||
- Текст как вектор
|
||
- Ручные отступы
|
||
- Отсутствие Auto Layout
|
||
|
||
---
|
||
|
||
## 18. Минимальный стандарт качества
|
||
Макет считается **адаптивным**, если:
|
||
- Корректно ресайзится
|
||
- Использует Auto Layout + Constraints
|
||
- Имеет брейкпоинты
|
||
- Понятен разработчику без дополнительных объяснений
|