Первый материал

Этот маршрут нужен, чтобы быстро пройти полный цикл: собрать простой макет, проверить адаптив и сохранить работу.

Перед началом посмотрите на итог маршрута: простой материал собирается в двух версиях и проверяется на обеих ширинах.

1. Создайте фрейм

Нажмите Frame на нижней панели и протяните область на холсте. Если нужен фрейм стандартного размера в центре экрана, дважды нажмите кнопку создания.

Выделите фрейм и в секции Frame выберите роль Breakpoint. Дайте ему понятное имя, например Desktop.

2. Добавьте виджеты

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

• Текст редактируется прямо на холсте, а типографика — в правой панели.
• Изображение загружается или заменяется в секции Image.
• Положение и размер любого виджета задаются в Layout.

3. Соберите узкую версию

Создайте пустой фрейм Mobile и тоже назначьте ему роль Breakpoint. Выделите его и нажмите Generate рядом с названием. В Source выберите Desktop, настройте ширину колонки и расстояние между блоками, затем нажмите Apply.

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

Подробный сценарий описан на странице Брейкпоинты.

4. Проверьте структуру

Откройте Layers. Все виджеты должны находиться внутри нужного фрейма. Здесь же можно переименовать, скрыть или заблокировать слой.

5. Откройте превью и сохраните

Нажмите Preview или клавишу V. Переключите ширину между 960 и 400 px и убедитесь, что редактор выбирает правильный фрейм. Вернитесь в Edit и нажмите Save.

Дальше пригодятся страницы Брейкпоинты, Превью и Сохранение.