Требования к адаптивному дизайну в 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. Якорные брейкпоинты

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