Требования к адаптивному дизайну в Figma (Сжатая версия)

1. Структура файла Figma

Рекомендуемая структура:

• Cover / Overview — описание проекта, цели, контакты, ссылки
• Design / UI — финальные экраны
• Components — повторяющиеся элементы и Variants
• Styles / Tokens — цвета, типографика, эффекты
• Responsive / Breakpoints — логика адаптивного поведения
• Prototype — интерактивные сценарии и флоу
• Archive / Old — устаревшие версии

Примечание: Страницы Responsive / Breakpoints и Prototype не дублируют дизайн-экраны, служат для объяснения поведения интерфейса и интерактивности.

---

2. Брейкпоинты и адаптивность

2.1. Якорные брейкпоинты

Версия	Базовая ширина	Диапазон
Mobile	375 px	320 – 768 px
Tablet	768 px	768 – 1024 px
Laptop	1024 px	1024 – 1440 px
Desktop	1440 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)
• Размеры шрифтов могут меняться между брейкпоинтами
• Line-height в %, ограничения по количеству строк

---

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. Понятен разработчику без дополнительных объяснений