Брейкпоинты

Брейкпоинты связывают ширину страницы с нужной версией макета. Обычно это два фрейма — Mobile и Desktop, но диапазонов может быть больше.

Подключите фреймы к адаптиву

1. Выделите фрейм.
2. В секции Frame установите Role → Breakpoint.
3. Повторите для остальных адаптивных версий.
4. Снимите выделение, чтобы открыть настройки Canvas.

В секции Breakpoints появится шкала. Каждый сегмент подписан именем фрейма, поэтому полезно заранее назвать версии понятно.

В этом сценарии шкала появляется только после назначения роли обоим верхнеуровневым фреймам.

Соберите Mobile через Generate

Если Desktop уже готов, его можно использовать как основу для узкой версии.

1. Создайте пустой фрейм Mobile и назначьте ему роль Breakpoint.
2. Выделите только Mobile. Рядом с названием фрейма появится кнопка Generate.
3. Нажмите Generate и выберите исходный фрейм в поле Source.
4. Настройте Width — ширину колонки — и Gap — расстояние между верхнеуровневыми блоками. Результат меняется на холсте сразу.
5. Нажмите Apply, когда стартовая раскладка готова.

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

Связи между скопированными виджетами сохраняются. Действия, которые вели к виджетам или группам за пределами исходного фрейма, не переносятся.

Следите одновременно за параметрами Width и Gap и за живым результатом внутри Mobile до нажатия Apply.

Настройте диапазоны

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

Limit width задаёт верхнюю границу самого широкого диапазона. Это ширина области материала, а не всего окна браузера.

Общую границу удобно сначала подобрать перетаскиванием, а затем уточнить числом.

Параметры фрейма

Для Breakpoint доступны дополнительные настройки:

• Scalable разрешает масштабировать содержимое внутри диапазона фрейма.
• Gap below оставляет пространство после фрейма в материале.

Разницу между Fixed и Scalable лучше оценивать на одном и том же макете при плавном изменении ширины.

Gap below должен быть заметен как часть потока материала, поэтому его стоит показать между двумя соседними блоками.

Обычный фрейм с ролью Frame не участвует в переключении. Его можно использовать как вложенную область внутри брейкпоинта.

Проверьте результат

Откройте Preview и переключите ширину между 960 и 400 px. Активный фрейм должен меняться в соответствии со шкалой.

При плавном перетаскивании ручки момент перехода должен совпасть с границей на шкале Breakpoints.