Лекция 3. Адаптивный дизайн и прототипирование

Введение

В предыдущих разделах курса мы освоили базовые инструменты Figma, дизайн-токены и принципы построения компонентов. Однако современный продукт живёт не на одном экране: пользователь открывает один и тот же интерфейс на смартфоне с шириной 375 px, на планшете 768 px и на десктопе 1440 px. Задача дизайнера — спроектировать макет так, чтобы он одинаково удобно работал везде.

Эта лекция посвящена двум большим темам:

Адаптивный дизайн (Responsive Design) — как один макет подстраивается под разные размеры экранов.
Прототипирование и интерактивность — как «оживить» статичный макет с помощью анимаций, состояний и переходов.

Обе темы тесно связаны: адаптивный макет описывает внешний вид на разных устройствах, а прототип описывает поведение интерфейса во времени.

Часть I. Адаптивный дизайн

1. Что такое адаптивный дизайн

Адаптивный дизайн (Responsive Design) — это подход к проектированию интерфейсов, при котором макет автоматически подстраивается под различные размеры экранов и типы устройств, обеспечивая оптимальный пользовательский опыт везде.

Вместо того чтобы рисовать десятки отдельных макетов, дизайнер закладывает в макет правила поведения: что растягивается, что переносится на новую строку, что скрывается. В Figma эти правила реализуются через Auto Layout и Constraints (о них — далее).

1.1. Шесть принципов адаптивности

Принцип	Суть
Mobile First	Проектируем сначала для мобильного, затем расширяем
Progressive Enhancement	Базовая функциональность работает везде, улучшения — для мощных устройств
Content Priority	Важный контент виден всегда, второстепенный может скрываться
Fluid Layouts	Относительные единицы (проценты, Fill), а не жёсткие пиксели
Breakpoints	Точки перелома, где макет перестраивается
Touch-Friendly	Достаточные размеры элементов для касания пальцем

1.2. Зачем это нужно

Единый дизайн для всех устройств вместо множества разрозненных версий.
Лучший UX — пользователю удобно независимо от устройства.
Упрощение поддержки — изменения вносятся в одном месте.
Соответствие стандартам — мобильный трафик давно превысил десктопный.

2. Mobile First

Mobile First — это стратегия, при которой проектирование начинается с самой маленькой версии (телефон), а затем макет постепенно расширяется до планшета и десктопа.

Ключевая идея: добавлять контент проще, чем убирать. Если начать с десктопа, при сжатии до мобильного приходится мучительно решать, что выбросить. Если начать с мобильного, расширение — это просто добавление пространства и второстепенных элементов.

2.1. Почему именно так

Фокус на главном. Ограниченное пространство экрана 375 px заставляет дизайнера отобрать действительно важный контент и основные действия.
Производительность. Меньше элементов — быстрее загрузка, что критично для мобильных сетей.
Лучший UX. Упрощённая навигация и понятная иерархия.
Масштабируемость. Расширять интерфейс легче, чем урезать.
Поведение пользователей. Большинство заходит с мобильных — логично проектировать под них в первую очередь.

2.2. Процесс Mobile First на практике

1. Mobile   (320–375px)  →  главный контент, одна колонка, hamburger-меню
2. Tablet   (768px)      →  две колонки, расширенная навигация
3. Desktop  (1200px+)    →  полная навигация, сайдбары, многоколоночная сетка

Progressive Enhancement — близкий по духу принцип: базовый интерфейс работает на любом устройстве, а на более мощных добавляются улучшения (hover-эффекты, дополнительные блоки). Обратная сторона — graceful degradation (изящная деградация): если возможности устройства ограничены, интерфейс упрощается без потери функциональности.

3. Breakpoints (точки перелома)

Breakpoint — это конкретная ширина экрана, при которой макет перестраивается для оптимального отображения. До этой ширины используется одна раскладка, после — другая.

3.1. Стандартные breakpoints

Категория	Ширина	Устройства
Mobile Small	320px	старые iPhone, маленькие Android
Mobile Medium	375px	iPhone 13 — самый распространённый размер
Mobile Large	414px	iPhone Plus, крупные Android
Tablet Portrait	768px	iPad в портретной ориентации
Tablet Landscape	1024px	iPad Pro в альбомной ориентации
Desktop Small	1200px	небольшие ноутбуки
Desktop Large	1440px+	большие мониторы

3.2. Сколько breakpoints нужно

На практике достаточно трёх ключевых точек, которые мы и будем использовать в макетах:

Mobile — 375 px (iPhone 13);
Tablet — 768 px (iPad);
Desktop — 1200 px или 1440 px.

Принципы выбора:

ориентироваться на популярные реальные устройства;
не плодить лишние точки — 3–5 более чем достаточно;
переходы между размерами должны быть логичными.

4. Сетка (Grid) и её изменение

Колоночная сетка — каркас, по которому выравнивается контент. При переходе от мобильного к десктопу меняется не только число колонок, но и отступы.

Параметр	Mobile (375px)	Tablet (768px)	Desktop (1200px+)
Колонки	4	8	12
Margin (по краям)	16px	24px	32px
Gutter (между колонками)	8px	12px	16px
Ширина колонки	~83px	~84px	~90px
Контент занимает	1–2 колонки	2–4 колонки	3–4+ колонки

4.1. Логика изменений

Больше колонок на крупных экранах = больше гибкости для сложных макетов.
Больше margin = воздух по краям, лучше читаемость, визуальный баланс.
Больше gutter = чёткое разделение элементов.
Адаптация контента: на мобильном — одна колонка во всю ширину, на планшете — две, на десктопе — три-четыре.

В Figma сетка задаётся через Layout Grid в панели свойств фрейма: выбираем тип Columns, указываем количество, margin и gutter.

5. Header: мобильная и десктопная версии

Шапка (Header) — один из самых наглядных примеров адаптации. На разных экранах она перестраивается радикально.

5.1. Сравнение

Параметр	Mobile (375px)	Desktop (1200px+)
Высота	56px	64px
Padding	16px	24px
Логотип	слева, ~32px	слева, ~40px
Навигация	скрыта в hamburger-меню	видимое горизонтальное меню (5–7 пунктов)
Поиск	иконка / отдельный экран	встроенное поле с автодополнением
User Menu	в выпадающем меню	аватар + dropdown справа
Организация	вертикальная (через меню)	горизонтальная

Компактный: логотип + иконка меню (☰) + иконка поиска.
Навигация спрятана и открывается тапом по hamburger.
Поиск — это иконка, открывающая отдельный экран или модальное окно.
Принцип: минимум элементов, фокус на основных действиях.

Вся функциональность на виду: логотип, горизонтальное меню, поле поиска, корзина с индикатором, меню пользователя.
Подменю раскрываются при наведении (hover), активный пункт выделен.
Принцип: пространства много — показываем всё.

6. Touch Targets

Touch Target — это область экрана, которую пользователь может нажать пальцем для взаимодействия с элементом. В отличие от десктопа с точным курсором мыши, палец «толстый» (в среднем 10–14 мм), поэтому область касания должна быть достаточно большой.

6.1. Минимальные размеры

Платформа / уровень	Размер
iOS (рекомендация Apple)	44×44px
Android (Material Design)	48×48px
Оптимальный комфортный размер	48×48px
Минимальное расстояние между целями	8px

6.2. Важный нюанс: визуальный размер ≠ touch target

Сам значок может быть визуально маленьким (например, иконка 24×24px), но кликабельная область вокруг неё должна составлять минимум 44×44px. Это достигается невидимым «полем» вокруг элемента (padding или прозрачный контейнер).

Рекомендации по элементам:

основные кнопки — 48×48px и больше;
вторичные действия — минимум 44×44px;
пункты меню — высота от 48px;
чекбоксы и радио — touch target 44×44px, даже если галочка мелкая;
между соседними целями — отступ 8–16px, чтобы не промахиваться.

7. Приоритет контента (Content Priority)

Content Priority — организация элементов по важности: самое важное всегда видно и доступно, менее важное скрывается или уходит вниз.

7.1. Три уровня приоритета

Приоритет	Что это	Где размещать
Priority 1 (критический)	главная информация, CTA-кнопки, ключевой функционал	вверху, видно без прокрутки (above the fold)
Priority 2 (важный)	дополнительная информация, вторичные действия	видно при небольшой прокрутке
Priority 3 (дополнительный)	детали, ссылки, навигация в подвале	ниже, доступно при прокрутке

7.2. Инструменты приоритизации

Визуальная иерархия: больше размер = важнее; выше контраст = важнее; выше позиция = важнее.
На мобильном: above the fold для главного, progressive disclosure (раскрытие по мере необходимости), скрытие второстепенного в аккордеоны и меню.
На десктопе: больше видно сразу, боковые панели, многоколоночность.

Пример — экран товара:

Изображение товара (P1)
Название и цена (P1)
Кнопка «Купить» (P1)
Описание (P2)
Характеристики (P2)
Отзывы (P3)

8. Адаптивная сетка товаров

Классическая задача e-commerce — показать каталог так, чтобы карточки красиво ложились на любой экран.

Экран	Колонок	Ширина карточки	Gap	Padding контейнера
Mobile (375px)	1	100% (~343px)	16px	16px
Tablet (768px)	2	~350px	20px	24px
Desktop (1200px+)	3–4	~300px	24px	32px

8.1. Как реализовать в Figma

Контейнер сетки — фрейм с Auto Layout:
- Direction: Horizontal с включённым Wrap (перенос на новую строку);
- Padding и Gap — адаптивные под размер экрана;
- Alignment: Left или Space Between.
Карточка товара:
- Resizing по ширине: Fill Container (тянется под контейнер);
- задать Min width (~300px) — чтобы на десктопе не растягивалась бесконечно;
- Max width 100% — чтобы на мобильном занимала всю ширину.
Отдельные фреймы под 375 / 768 / 1200 px для проверки.

Связка «Auto Layout с Wrap + Fill Container + Min width» автоматически даёт нужное число колонок без ручного пересчёта: на узком экране карточки переносятся в одну колонку, на широком — выстраиваются по 3–4.

9. Что скрывается или меняется на мобильной версии

При переходе на мобильный ряд элементов прячется или трансформируется. Важно: элементы скрываются, а не удаляются — функциональность остаётся доступной через альтернативный путь.

Элемент	Desktop	Mobile	Почему
Навигация	горизонтальное меню	hamburger-меню ☰	экономия места
Поиск	встроенное поле	иконка → отдельный экран	мало места под поле
Sidebar (фильтры)	видимая панель	кнопка / нижний лист	панель занимает много места
Доп. информация	видна сразу	аккордеоны, «Читать далее»	приоритизация
Вторичные действия	все кнопки видны	в меню «···»	фокус на главном
Таблицы	полная таблица	карточки / горизонтальный скролл	таблицы неудобны на узком экране
Колонки текста	2–3 колонки	1 колонка	читаемость
Футер	многоколоночный	компактный	экономия места
Хлебные крошки	полный путь	только текущая страница / скрыты	не критичны на мобильном

10. Создание адаптивного компонента

Цель — собрать один компонент, который корректно работает на любом размере экрана.

10.1. Процесс

Определить требования: на каких экранах используется, какие свойства адаптируются.
Базовая структура: компонент на Auto Layout, выбрать Direction (Vertical / Horizontal).
Настроить Auto Layout:
- Padding — фиксированный или адаптивный;
- Gap — обычно фиксированный для консистентности;
- Resizing: Hug Contents для подстраивающихся элементов, Fill Container для растягивающихся.
Настроить Constraints (см. раздел 11) для правильного поведения при изменении родителя.
При необходимости — Variants под разные размеры (компактный mobile / расширенный desktop).
Протестировать на разных размерах фрейма: ничего не перекрывается, текст читается, кнопки доступны.

10.2. Пример: адаптивная карточка товара

Card (Vertical Auto Layout, padding 16, gap 12)
├── Image    → Fill Container (ширина), aspect ratio 1:1
├── Title    → Hug по высоте, Fill по ширине
├── Price    → Hug Contents
└── Button   → Fill Container (на всю ширину карточки)

Constraints всех вложенных элементов: Left & Right (растягиваются вместе с карточкой). Результат:

на Mobile (375px) — карточка во всю ширину;
на Tablet (768px) — подстраивается под колонку сетки;
на Desktop (1200px) — встаёт в колонку шириной ~300px.

11. Constraints (вопрос 51, бонус)

Constraints (ограничения) — правила, которые определяют, как элемент ведёт себя при изменении размера родительского контейнера. Это «классический» способ адаптации в Figma, дополняющий Auto Layout.

11.1. Типы Constraints

Ось	Значения
Horizontal	Left · Right · Left & Right · Center · Scale
Vertical	Top · Bottom · Top & Bottom · Center · Scale

11.2. Как помогают в адаптивности

Left & Right — элемент растягивается между сторонами (кнопки, поля ввода во всю ширину).
Top & Bottom — растягивается по высоте (колонки, секции).
Left + Top — фиксированная позиция (логотип в левом верхнем углу).
Right + Bottom — привязка к правому нижнему углу (плавающая кнопка действия).
Center — элемент остаётся по центру при любом размере.
Scale — пропорциональное масштабирование (иконки, фоновые изображения).

11.3. Constraints + Auto Layout

Они работают вместе, а не вместо:

Auto Layout управляет внутренней структурой (как элементы выстроены друг относительно друга);
Constraints управляют позиционированием элемента относительно его родителя.

12. Padding vs Gap (вопрос 52, бонус)

В Auto Layout два разных типа отступов часто путают.

Параметр	Padding (внутренние отступы)	Gap (промежуток)
Где	между границей контейнера и содержимым	между дочерними элементами
Применяется к	всему контейнеру	пространству между элементами
Влияние на размер	увеличивает размер контейнера	не меняет размер контейнера
Назначение	поля внутри элемента	равномерные промежутки

Схематично:

┌─────────────────────────┐ ← Padding (от края контейнера до контента)
│  [Элемент 1]            │
│        ↕ Gap            │ ← Gap (между элементами)
│  [Элемент 2]            │
│        ↕ Gap            │
│  [Элемент 3]            │
└─────────────────────────┘

Примеры:

Кнопка с иконкой и текстом: Padding 12×16px (поля кнопки) + Gap 8px (между иконкой и текстом).
Список: Padding 16px (от краёв) + Gap 12px (между пунктами).
Сетка карточек: Padding 24px + Gap 16px.

Часть II. Прототипирование и интерактивность

13. Микроанимации

Микроанимации — небольшие, тонкие анимации, которые дают пользователю визуальную обратную связь и делают взаимодействие живым и понятным.

13.1. Типы микроанимаций

Обратная связь (Feedback) — кнопка реагирует на нажатие, элемент подсвечивается.
Переходы (Transitions) — плавное появление, смена экранов, изменение размеров.
Индикация состояния — загрузка (spinner), успех/ошибка, прогресс.
Направление внимания — подсказка о следующем шаге, выделение важного.

13.2. Роль в UX

Понимание: связь между действием и результатом становится очевидной.
Привлекательность: современный, профессиональный вид.
Навигация: понятные переходы помогают ориентироваться.
Эмоция: приятные ощущения формируют доверие к продукту.

Принципы хороших микроанимаций: быстро (150–300ms), естественно (easing-функции), целесообразно (не перегружать), консистентно (одинаковые действия анимируются одинаково).

14. Интерактивные состояния кнопки

Кнопка должна визуально реагировать на действия. В Figma состояния создаются через Variants (свойство State).

Состояние	Background	Shadow	Scale	Интерактивна
Default	Primary/500	Elevation/1	1.0	да
Hover	Primary/700 (темнее)	Elevation/2	1.02	да
Pressed	Primary/900 (ещё темнее)	Elevation/1	0.98	да
Disabled	Neutral/100	нет	1.0	нет

14.1. Логика

Hover (только desktop): лёгкое увеличение и потемнение — «элемент готов к нажатию». Переход 150ms, Ease Out.
Pressed: сжатие до 0.98 и затемнение — тактильное ощущение нажатия. Переход 100ms, Ease In.
Disabled: серый, opacity ~0.6, интерактивность отключена — «кнопка недоступна».

14.2. Как связать

Создать Variants со свойством State.
В режиме Prototype провести связь между вариантами.
Триггер → действие Change to → целевой вариант.
Анимация Smart Animate, 100–150ms.

15. Триггеры (Triggers)

Триггер — событие, которое запускает действие в прототипе.

Триггер	Когда срабатывает	Где применяется
On Click / Tap	клик или тап по элементу	кнопки, ссылки, карточки, иконки
On Drag	перетаскивание элемента	слайдеры, swipe-жесты, drag-and-drop
While Hovering	наведение курсора (только desktop)	hover-эффекты, тултипы, подменю
While Pressing	удержание нажатия	контекстные меню, long press
After Delay	автоматически через заданное время	автопереходы, таймеры, уведомления
Mouse Enter / Leave / Down / Up	точные мышиные события	тонкая настройка hover/press
Key / Gamepad	нажатие клавиши	прототипы с клавиатурой

Рекомендации: On Click — для основных действий; While Hovering — для улучшения UX на десктопе; On Drag — для специальных жестов; After Delay — для автоматических сценариев (онбординг, сплэш-экран).

16. Smart Animate / Slide / Instant

Тип анимации перехода определяет, как один экран сменяет другой.

Параметр	Smart Animate	Slide	Instant
Скорость	плавно	плавно	мгновенно
Контекст	сохраняет	заменяет	заменяет
Сложность	средняя	простая	минимальная
Применение	состояния, детали, трансформации	навигация, меню	быстрые переключения
Требование	одинаковые имена слоёв	направление	нет

16.1. Smart Animate

Автоматически анимирует элементы с одинаковыми именами между двумя кадрами: интерполирует позицию, размер, цвет, opacity, поворот. Идеально для «карточка → детали товара» (карточка плавно разворачивается) и для смены состояний компонента.

16.2. Slide

Новый экран «въезжает» с заданной стороны (Left / Right / Up / Down). Понятное направление движения — отлично подходит для навигации и выезжающего меню.

16.3. Instant

Мгновенная смена без анимации. Используется, когда анимация не нужна и важна максимальная отзывчивость (быстрое переключение вкладок). Минус — может выглядеть резко.

Другие доступные переходы: Dissolve (растворение, fade), Move In / Move Out, Push. Но три базовых — Smart Animate, Slide, Instant — покрывают большинство задач.

17. Плавные переходы между состояниями

Чтобы переходы между состояниями компонента были приятными:

Создать состояния через Variants (Default, Hover, Pressed, Active).
Убедиться, что они отличаются визуально, но не слишком резко.
Связать в режиме Prototype: триггер → Change to → состояние.
Анимация — Smart Animate (главное условие — одинаковые имена слоёв, Match by: Layer name).
Подобрать Duration и Easing.

Пример настройки кнопки:

Переход	Анимация	Duration	Easing
Default → Hover	Smart Animate	150ms	Ease Out
Hover → Pressed	Smart Animate	100ms	Ease In
Pressed → Default	Smart Animate	150ms	Ease Out

Триггеры: While Hovering → Hover, While Pressing → Pressed, отпускание → Default.

Рекомендации для плавности: не менять размер более чем на ~10%; избегать резких скачков цвета; постепенно менять тени; Ease Out как выбор по умолчанию.

18. Интерактивные компоненты

Интерактивный компонент — компонент со встроенными прототипными связями между его вариантами. Логика взаимодействия зашита внутрь самого компонента, и каждый его экземпляр на любом экране работает автоматически.

18.1. Преимущества перед статическими

Реалистичность — поведение близко к настоящему продукту.
Тестирование UX — можно проверить удобство ещё до разработки.
Коммуникация — понятнее разработчикам и заказчику.
Поиск проблем — выявляются неудобные переходы и логические дыры.
Экономия времени — меньше вопросов от команды, меньше итераций.

18.2. Примеры

Кнопка: hover → press → disabled, всё внутри одного компонента.
Input: focus (синяя рамка) → error (красная) → success (галочка).
Карточка: hover (приподнимается) → selected (выделение).
Toggle / Switch: off ↔ on с плавным переключением.

Создание: Variants → связи между ними → триггеры → Smart Animate → тест в режиме Present.

19. Мобильное меню с анимацией появления

Разберём типовой сценарий — выезжающее боковое меню (drawer).

19.1. Структура

Overlay — полупрозрачный фон (Black, opacity 0.5), затемняющий контент.
Панель меню — белый фрейм, ширина ~280px, высота 100%.
Кнопка закрытия — иконка ✕ в углу.
Пункты меню — вертикальный список на Auto Layout, padding 16px.

19.2. Настройка через навигацию (Navigate to)

Открытие: на кнопке ☰ → On Click → Navigate to (экран с открытым меню), анимация Slide In, Direction Left, 250ms, Ease Out.
Закрытие: на кнопке ✕ или на overlay → On Click → Navigate to (исходный экран), Slide Out, Left, 250ms, Ease In.

19.3. Альтернатива через Smart Animate

Два состояния (скрыто / открыто).
Меню «выезжает» из-за левого края, overlay плавно проявляется (fade in).
Опционально — появление пунктов с задержкой (stagger) для эффектности.

Рекомендации: длительность 200–300ms, естественное направление (слева), кликабельный overlay для закрытия, заметная кнопка ✕.

20. Параметры анимации: Duration и Easing

Два параметра определяют, как воспринимается любая анимация.

20.1. Duration (длительность)

Диапазон	Ощущение	Где использовать
50–150ms	мгновенная реакция	микроинтеракции: hover, click, тултип
200–300ms	баланс скорости и плавности	большинство переходов, открытие меню
400–600ms	заметная, медленная	крупные переходы, модальные окна (редко)

Слишком быстро — пользователь не успевает заметить изменение; слишком медленно — раздражает. Золотая середина для большинства случаев — 200–300ms.

20.2. Easing (кривая плавности)

Easing	Поведение	Применение
Linear	постоянная скорость	избегать — выглядит механично
Ease In	медленно → быстро	исчезновение, выезд за экран
Ease Out	быстро → медленно	появление, открытие меню (по умолчанию)
Ease In Out	медленно → быстро → медленно	переходы между экранами

Ease Out — самый естественный для глаза, его берут по умолчанию. Ease In — для исчезновений. Linear — практически не используют.

20.3. Готовые комбинации

Сценарий	Duration	Easing
Hover кнопки	100–150ms	Ease Out
Переход между экранами	250–300ms	Ease In Out
Появление меню / модалки	200–250ms	Ease Out
Закрытие меню	150–200ms	Ease In

21. Тестирование прототипа на реальных устройствах

Анимации и touch targets, идеальные на мониторе, могут оказаться неудобными на телефоне. Поэтому прототип нужно проверять «в руках».

21.1. Способы тестирования

Figma Mobile App (iOS/Android) — войти в тот же аккаунт, открыть файл, нажать Present. Самый удобный способ: нативное приложение, хорошая производительность.
Мобильный браузер — открыть ссылку на прототип. Не требует установки, но может работать медленнее.
Ссылка на прототип — Share → Copy link, доступ «Anyone with the link», включить доступ к прототипу.

21.2. Что проверять

Навигация — все переходы работают, нет «тупиков».
Анимации — плавность и адекватная скорость.
Touch targets — пальцем удобно попадать (≥44×44px).
Читаемость — текст не мелкий, контраст достаточный.
Производительность — нет лагов и подтормаживаний.

21.3. Итерации

Собрать обратную связь (комментарии в Figma, скриншоты багов) → исправить → протестировать снова. Идеально — тест с реальными пользователями.

22. Организация Figma-файла для командной работы

Большой проект ведёт команда, поэтому файл должен быть понятным и аккуратным.

22.1. Структура страниц

Страница	Содержимое
Design System	компоненты, цвета, типографика, токены
Screens / Mobile	мобильные экраны
Screens / Desktop	десктопные экраны
Prototypes	интерактивные прототипы
Archive	старые версии, эксперименты
Documentation	гайдлайны, описания

22.2. Правила именования

Понятные имена: Button/Primary, а не Rectangle 123.
Иерархия через /: Color/Primary/500.
Удалять неиспользуемые слои — чистота файла.

22.3. Функции коллаборации

Функция	Назначение
Comments	обсуждение, обратная связь прямо на макете
Real-time Collaboration	одновременная работа, видимые курсоры коллег
Version History	сохранение версий и откат изменений
Dev Mode	спецификации, CSS, размеры, экспорт для разработчиков
Sharing	ссылки с правами View / Edit
Shared Libraries	единая библиотека компонентов, авто-обновление экземпляров

Рекомендации для команды: единые стандарты именования, регулярное сохранение версий с описаниями, документирование компонентов, активное использование комментариев.

Краткие итоги

Адаптивный дизайн — это макет, автоматически подстраивающийся под размер экрана; реализуется в Figma через Auto Layout и Constraints.
Mobile First означает «сначала телефон, потом расширение»; добавлять контент проще, чем урезать.
Достаточно трёх breakpoints: Mobile 375px, Tablet 768px, Desktop 1200/1440px; сетка растёт 4 → 8 → 12 колонок.
Touch target — минимум 44×44px (iOS) / 48×48px (Android); визуальный размер может быть меньше кликабельной области.
Content Priority: важное — above the fold, второстепенное скрывается в меню и аккордеоны (но не удаляется).
Constraints позиционируют элемент относительно родителя; Padding — поля внутри контейнера, Gap — промежуток между элементами.
Микроанимации дают обратную связь; оптимум — 200–300ms с Ease Out; типы переходов — Smart Animate (контекст), Slide (навигация), Instant (мгновенно).
Интерактивные компоненты и обязательное тестирование на реальных устройствах превращают статичный макет в продукт, понятный команде и пользователю.

Контрольные вопросы

Подготовьтесь к ответам на следующие экзаменационные вопросы (см. exam_questions.md, вопросы 31–52):

Адаптивный дизайн (31–40): 31. Что такое адаптивный дизайн и какие принципы лежат в его основе? 32. Концепция Mobile First и её преимущества. 33. Какие breakpoints используются для телефонов и планшетов? 34. Как меняется сетка (Grid) при переходе mobile → desktop? 35. Различия Header для мобильной и десктопной версий. 36. Что такое Touch Targets и их минимальные размеры? 37. Как организовать контент по принципу Content Priority? 38. Как создать адаптивную сетку товаров для разных экранов? 39. Какие элементы скрываются/меняются на мобильной версии? 40. Процесс создания адаптивного компонента.

Прототипирование и интерактивность (41–50): 41. Что такое микроанимации и их роль в UX? 42. Настройка интерактивных состояний кнопки (Hover, Pressed, Disabled). 43. Типы триггеров (Triggers) в Figma. 44. Разница между Smart Animate, Slide и Instant. 45. Как настроить плавные переходы между состояниями компонента? 46. Что такое интерактивные компоненты и их преимущество перед статическими? 47. Создание мобильного меню с анимацией появления. 48. Как тестировать прототип на реальных устройствах? 49. Параметры анимации (Duration, Easing) и их влияние на восприятие. 50. Организация Figma-файла для командной работы и функции коллаборации.

Бонусные вопросы (51–52): 51. Что такое Constraints в Figma и как они помогают адаптивности? 52. Разница между Padding и Gap в Auto Layout.