Сетка и пространство страницы

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

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

Сетка задаёт общие линии выравнивания, а система отступов помогает объяснить расстояния между элементами. Эти инструменты решают разные задачи. Колонки подсказывают ширину крупных областей; внутренние отступы карточки определяют связь её содержимого. Мы зададим оба уровня и увидим, почему одинаковое число не должно автоматически применяться ко всем промежуткам.

Рабочая ширина и расчёт колонок

У фрейма Desktop/Catalog ширина 1440. Выберем максимальную ширину содержимого 1120 и расположим её по центру. Боковой отступ вычисляется как (1440 − 1120) / 2, то есть 160. Назовите внутренний контейнер Content и перенесите в него заголовок и описание из Main. Позднее туда же попадут фильтры и карточки.

Число 1120 — решение нашего проекта, а не стандарт Figma и не универсальная ширина всех сайтов. Оно оставляет место для трёх карточек, сохраняя удобную длину строк пояснения. На более широком мониторе содержимое не должно бесконечно растягиваться: основной текст иначе превратится в длинные строки, за которыми трудно следить при чтении.

Добавьте к экрану колоночные направляющие. В текущих версиях соответствующая область может называться Layout guides; в более ранних материалах встречается Layout grid. Выберите двенадцать колонок, боковой отступ 160 и промежуток 24. При такой конфигурации суммарная ширина промежутков составляет 11 × 24 = 264, а одной колонки — (1120 − 264) / 12, примерно 71,33.

Дробный результат не означает ошибку. Направляющие нужны для согласования композиции, а не для того, чтобы каждое значение обязательно было целым. Карточка, занимающая четыре колонки с тремя внутренними промежутками, получит ширину примерно 357,33. Три такие карточки и два межкарточных промежутка по 24 снова дадут 1120. Сетка и итоговая сумма должны рассказывать одну историю.

Попробуйте временно уменьшить ширину содержимого до 960, сохранив три карточки и промежутки 24. Каждая карточка получит ширину 304. Длинный русский заголовок станет переноситься чаще, а описание вырастет по высоте. Это показывает, почему выбор сетки нельзя завершить до знакомства с текстом. Если получившаяся плотность мешает сравнению курсов, можно изменить число колонок или ограничение ширины. Увеличение межкарточного промежутка здесь только уменьшит доступное место; оно не устраняет причину тесного текста.

Для ряда из трёх карточек ширина каждой равна (1120 − 2 × 24) / 3, то есть примерно 357,33. Не округляйте все три значения независимо с последующей ручной компенсацией последней карточки. Дробная величина здесь возникает из общей геометрии и допустима в макете. Когда появится горизонтальный Auto Layout, распределение свободного места выразим настройками дочерних контейнеров. На данном этапе расчёт помогает понять, почему выбранная ширина текста и число колонок должны обсуждаться вместе: произвольные 360 для каждой карточки уже выходят за согласованный ряд.

Ритм внутри компонентов

Для небольших расстояний примем шкалу 4, 8, 12, 16, 24, 32, 48 и 64. Расстояние между названием курса и его метаданными будет 8, внутренний отступ карточки — 24, между заголовком страницы и следующим блоком — 32. Это не запрет на любые другие значения, а ограниченный словарь, позволяющий поддерживать визуальный ритм.

Связанные элементы располагаются ближе друг к другу, чем разные смысловые блоки. Метка уровня должна ощущаться частью карточки, а не следующего курса. Поэтому внутри карточки мы используем меньшие промежутки, чем между карточками. Если всем расстояниям назначить 24, иерархия ослабнет: подпись, заголовок и соседний блок окажутся одинаково связанными.

На странице 01 Foundations создайте ряд маленьких образцов расстояний и подпишите числа. Такой ряд помогает обсуждать изменения: «увеличим отступ до 32» точнее, чем «давайте чуть просторнее». Дальше мы превратим часто используемые значения в переменные, но уже сейчас названия и примеры должны быть понятны без дополнительной панели.

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

Сетка узкого экрана

Создайте второй фрейм шириной 390 и назовите его Mobile/Catalog. Для него выберем боковой отступ 20, рабочую ширину 350 и четыре колонки с промежутком 16. Ширина колонки получится (350 − 3 × 16) / 4 = 75,5. На этом размере карточка будет занимать всю рабочую ширину; четыре колонки помогут выравнивать более мелкие элементы внутри страницы.

Размер	Ширина содержимого	Колонки	Боковые отступы	Промежуток
Desktop 1440	1120	12	160	24
Mobile 390	350	4	20	16

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

Пока достаточно подготовить пустую рабочую область мобильного фрейма. Не пытайтесь завершить адаптивность до появления компонентов. Иначе вы начнёте вручную передвигать объекты, которые затем всё равно придётся перестроить с Auto Layout. Второй фрейм служит контрольным размером, к которому вернёмся после сборки карточки и списка.

Что сетка показывает и чего не делает

Направляющие не перемещают слой автоматически и не доказывают, что макет корректно сверстается. Они помогают видеть линии. Если изменение ширины фрейма оставляет текст на старых координатах, причина находится в настройках контейнера и его дочерних элементов. Для динамической компоновки потребуется Auto Layout, а для отдельных фиксированных областей — подходящие ограничения.

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

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