gromov/figma-adaptive-standards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
figma-adaptive-standards/adaptive-layout-requirements.short.md
S. Gromov c8318bdf1d sync
2026-01-13 16:46:32 +03:00

7.6 KiB
Raw Permalink Blame History

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