Фреймы и структура слоёв

Курс «Макет учебного портала в Figma»

В предыдущем уроке мы описали путь посетителя портала «Маршрут» и подготовили структуру файла. Теперь создадим первый экран и разложим его на контейнеры. От того, куда вложены слои, зависит не только удобство поиска: именно эта иерархия позволит позднее менять размеры, применять Auto Layout и связывать экраны прототипа.

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

Границы экрана и его содержимого

На странице 03 Screens включите инструмент Frame и создайте фрейм шириной 1440 и высотой 1100. Назовите его Desktop/Catalog. Высота здесь служит начальным размером рабочего поля, а не обещанием, что вся страница обязана помещаться в один экран браузера. После добавления контента её можно увеличить, сохраняя выбранную ширину.

Фрейм — контейнер со своими границами. Внутри него могут находиться текст, изображения и другие фреймы. Контейнер, лежащий прямо на холсте, называется верхним; вложенный фрейм становится дочерним по отношению к своему родителю. Figma использует такую связь для компоновки и прототипирования. Возможности фреймов перечислены в официальном руководстве.

Создайте внутри Desktop/Catalog три фрейма: Header, Main и Footer. Для первого задайте начальную высоту 80, для основного — 850, для нижнего — 170. Эти значения пока приблизительные. Важнее, чтобы в панели Layers все три строки действительно находились внутри Desktop/Catalog, а не лежали рядом с ним на холсте.

Чтобы убедиться во вложенности, сверните родительский фрейм. Его дочерние строки должны исчезнуть из списка, а весь экран остаться видимым на холсте. Если Footer остаётся отдельной строкой того же уровня, он не принадлежит экрану. Переместите его в нужную ветку панели Layers. Визуальная близость двух прямоугольников сама по себе не создаёт отношение родителя и ребёнка.

Вложенность полезно проверить перемещением целого экрана на холсте. Ожидаем, что шапка, основной текст и футер перемещаются вместе, сохраняя отношения. Слой, оставшийся на старом месте, находится вне родителя. Верните экран и исправьте структуру до продолжения. Этот случай особенно легко пропустить, когда фреймы имеют одинаковый фон: визуально внешний объект кажется частью страницы, но позднее не участвует ни в прокрутке, ни в экспорте выбранного экрана. Названия и панель Layers дают более надёжное свидетельство, чем общая картинка.

Группа, секция и фрейм

Группа полезна, когда нужно совместно перемещать несколько слоёв, например части небольшого декоративного значка. Она не становится полноценной моделью карточки только потому, что содержит нужные объекты. Для карточки нам понадобятся собственные отступы, заливка, скругление и автоматическая высота. Поэтому будущую CourseCard будем строить на фрейме.

Секция организует область холста и помогает показать несколько связанных экранов или стадий работы. На странице экранов создайте секцию Каталог — desktop и поместите в неё Desktop/Catalog. Позднее рядом появятся варианты, но секция не станет видимой частью сайта. Это редакционная организация файла, которую посетитель прототипа не должен воспринимать как панель интерфейса.

Объект	Роль в проекте	Что ожидаем от него
Фрейм	Экран, карточка, содержательная область	Границы, свойства и поведение дочерних слоёв
Группа	Части небольшого рисунка	Совместное выделение и перемещение
Секция	Набор связанных экранов на холсте	Понятная организация работы

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

Выделение и имена

Добавьте в Header текстовые слои Brand с надписью «Маршрут» и CatalogLink с надписью «Все курсы». В Main поместите PageTitle и PageDescription. Названия отражают роль слоя. Они не обязаны повторять всю видимую строку, иначе после редакции текста имя станет вводить в заблуждение.

При щелчке по сложному экрану легко выбрать контейнер вместо текста. Используйте панель Layers, чтобы перейти непосредственно к нужной строке. Можно входить в иерархию через клавишу Enter и возвращаться к родителю сочетанием, указанным в подсказках редактора. Привычка сначала смотреть на выбранный объект поможет избежать изменения заливки всего экрана вместо цвета заголовка.

Задайте понятный порядок: Header, Main, Footer, а внутри основного содержимого — заголовок, описание, будущие фильтры и список курсов. Порядок слоёв и зрительный порядок связаны, но не всегда совпадают. Верхний слой может перекрывать нижний, даже если его строка находится далеко от соседней по смыслу. Декоративный объект не должен случайно закрывать интерактивную область.

Для фоновой декоративной фигуры используйте отдельное имя Decoration/Accent и, когда работа с ней завершена, заблокируйте слой. Блокировка помогает не схватить фон при перемещении текста. Она не является защитой данных и не заменяет управление доступом к файлу. Разблокировать слой должен уметь любой редактор, которому поручено менять оформление.

При переносе готовой области посмотрите, какой слой выбран в Layers. Если выбран только фон карточки, её текст останется на прежнем месте; если выбран родительский фрейм, связанные элементы перемещаются вместе. Такое различие особенно заметно, когда название пересекает границу фонового прямоугольника. Поэтому порядок в Layers нужен для ежедневного редактирования, а не только для красивого списка имён. Исправляйте принадлежность элементов до появления десятков экземпляров: позднее ошибочный родитель усложнит настройку общей ширины и передачу компонента.

Обрезка содержимого

Создайте внутри Main небольшой пробный фрейм Preview размером 240 на 160 и поместите в него круг, часть которого выходит за границы. Измените Clip content. В одном состоянии выступающая часть будет скрыта, в другом — видна. Это наглядный способ понять, что границы контейнера и область видимости дочернего слоя могут различаться.

В нашем каталоге Clip content пригодится для обложки карточки, если изображение должно оставаться внутри скруглённой области. Для основной области страницы включать обрезку без причины опасно: она может скрыть нижние карточки и создать впечатление, будто контент закончился. Обрезка не заменяет перенос и правильную высоту контейнера.

Удалите пробный Preview, когда механизм понятен. Рабочий экран должен содержать только элементы будущего портала. Ожидаемое состояние после урока — один фрейм Desktop/Catalog, внутри которого легко найти шапку, основной контент и футер. Размеры пока не адаптивны, но принадлежность каждого слоя определена. Следующий урок задаст общую сетку и превратит произвольные координаты в согласованную композицию.