Карточка курса и список

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

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

Соберём CourseCard из наших данных, затем добавим три экземпляра в общий список. Здесь проявится разница между поведением самого компонента и поведением коллекции. Внутренний контейнер управляет текстом и кнопкой; внешний определяет количество колонок, ширину и промежутки между карточками.

Содержание одной карточки

На странице 02 Components создайте вертикальный Auto Layout фрейм CourseCard. Начальная ширина — примерно 357,33, согласно desktop-сетке. Высота — Hug contents. Внутренние поля — 24, вертикальный промежуток между основными блоками — 16. Задайте поверхность surface/card, границу border/default и скругление 16.

Добавьте Title с текстом «Сетка каталога», Summary с объяснением «Разместите карточки в колонках и управляйте промежутками без случайных отступов», Meta с текстом «Базовый · 8 уроков» и экземпляр Button с надписью «Открыть курс». Название использует Heading, описание — Body, метаданные — Label. Это содержательная иерархия, поэтому метаданные не должны выглядеть как второй заголовок.

Для всех текстовых областей задайте Fill container по ширине и размер по содержимому по высоте. Кнопка пока остаётся Hug contents. Обратите внимание на направление зависимости: ширину текста определяет карточка, высоту текста — переносы, а общую высоту карточки — дети и отступы. Ни одна из этих ролей не должна случайно дублироваться фиксированной высотой.

Сделайте контейнер компонентом CourseCard и добавьте текстовые свойства Title, Summary и Meta. Название курса не становится вариантом компонента: карточка «Git в команде» отличается данными, сохраняя ту же структуру. Это применение принципа, который мы использовали для надписи кнопки.

Слои карточки в официальном письменном руководстве Figma. Учебный «Маршрут» использует другие данные и вертикальную композицию.

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

Обложка как дополнительный слой

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

Авторский письменный урок Figma показывает карточку с изображением, названием, описанием и кнопкой, затем вложенные контейнеры для разных направлений компоновки. Мы переносим этот механизм в собственный вертикальный каталог, изменяя предметные данные и размеры. Подробности находятся в уроке о карточке и системе контейнеров.

Если изображение обрезается, проверьте режим его размещения и Clip content у нужного контейнера. Не включайте обрезку у всей карточки только для исправления случайно слишком высокой картинки. После появления двух строк заголовка такая настройка может скрыть часть полезного текста. Каждое ограничение должно иметь конкретную задачу.

Внешний список

На рабочем экране создайте фрейм CourseList, поместите в него три экземпляра CourseCard и назначьте горизонтальную компоновку с промежутком 24. Его ширина — Fill container внутри Content, высота — Hug contents. В первом desktop-варианте карточки можно оставить фиксированной расчётной ширины, чтобы увидеть соответствие сетке.

Заполните второй экземпляр данными «Запросы к API», «Отправляйте запросы, разбирайте ответы и показывайте пользователю состояние загрузки», «Продолжающий · 10 уроков». Третий содержит «Git в команде», «Сохраняйте изменения и обсуждайте их до объединения в общую ветку», «Базовый · 6 уроков». Мы не используем одинаковые заглушки: различия должны проявить возможности компонента.

У трёх карточек может получиться разная высота. Для вертикального списка это обычно естественно. Для ряда с выровненными кнопками потребуется отдельное решение: общая минимальная высота и растягиваемая область содержания либо согласованное выравнивание элементов. Не добавляйте невидимые прямоугольники между текстом и кнопкой. Они работают только при текущей длине строки и скрывают причину отступа.

В учебном desktop-каталоге выберем одинаковую высоту карточек 340 как начальное ограничение и проверим самый длинный текст. Внутреннюю область ContentBody с заголовком, описанием и метаданными сделайте вертикальной и растягиваемой внутри карточки, а кнопку оставьте нижним ребёнком. Высота 340 не является универсальной: если данные не помещаются, увеличьте согласованный минимум или вернитесь к естественным высотам.

Как обнаружить жёсткую связь

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

Уменьшите ширину внешнего списка. В горизонтальном ряду с фиксированными карточками они выйдут за границы. Это ожидаемое ограничение текущего этапа, а не основание сразу уменьшить весь макет. В уроке адаптивности мы изменим число колонок и назначим карточкам ширину родителя. До того момента сохраняем desktop-образец как один конкретный размер.

На мобильной странице одна карточка будет занимать 350 по ширине, кнопка — Fill container, высота — по содержимому. Эти настройки относятся к применению, поэтому не следует изменять основную кнопку так, чтобы все действия портала стали широкими. Вложенный экземпляр может выбирать ширину в зависимости от своего родителя, сохраняя общий стиль.

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