Сборка карточек и навигационных элементов

Мы переходим от создания отдельных элементов к проектированию функциональных блоков. Вы уже настроили переменные и создали атомарные компоненты (кнопки, иконки). Теперь пора объединить их в сложный компонент.

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

Анатомия карточки: от атомов к структуре

Карточка — классический пример сложного компонента. В проектах на Next.js (списки товаров, посты, профили) карточки должны строго следовать логике Auto Layout, чтобы корректно отображать динамические данные из API.

Структура типичной карточки:

1. Media (Контейнер под изображение): визуальный акцент.
2. Content (Текстовый блок): заголовок и описание с вашими типографическими переменными.
3. Actions (Панель управления): кнопки из темы Создание базовой кнопки с автолейаутом и вариантами.

Используйте вложенные Auto Layout фреймы. Это позволит гибко управлять отступами: внешними полями карточки и внутренними расстояниями между текстом и кнопками.

В Сравнении 1 показана разница между жестким проектированием и системным подходом.

Практикум: сборка карточки товара

Соберем карточку, которая автоматически подстраивается под длину текста. Это критично для фронтенда, где контент приходит из базы данных.

Пример

Алгоритм сборки:

1. Текст: Выделите слои заголовка и описания, нажмите Shift + A. Установите отступ через переменную gap-sm. Для обоих слоев выберите Fill Container, чтобы текст переносился.
2. Кнопка: Перетащите экземпляр кнопки в созданный фрейм.
3. Контейнер: Оберните всё в финальный Auto Layout (вертикальный стек).
4. Токены: Примените переменную radius-md для углов и color-surface для фона.

Антипример

Ошибки компоновки:

• Фиксированная высота (Fixed Height): если текст окажется длиннее, он вылезет за границы или перекроет кнопку 🧱
• Разбирание (Detach) кнопок: если вы измените радиус скругления в системе, «разобранные» элементы придется править вручную.

Навигация и Navbar

Navbar в Next.js обычно является частью глобального Layout. В Figma мы проектируем его, опираясь на принципы CSS Flexbox. Используйте иконки из урока Создание компонента для иконок и управление их свойствами и объединяйте их с текстовыми ссылками.

Схема 1 визуализирует иерархию вложенности элементов.

Почему это важно для Next.js

Чистая структура слоев в Figma — это готовая спецификация для React-компонента:

• Auto Layout — это Flexbox.
• Fill Container — это width: 100% или flex-grow: 1.
• Hug Contents — это отсутствие фиксированных размеров (размер по контенту).

Если ваша компоновка в Figma логична, разработчик в Dev Mode получит семантически верные параметры для верстки.

Упражнение

Задание:

1. Объедините иконку и заголовок в один Auto Layout (Header карточки).
2. Добавьте под него описание и кнопку.
3. Установите для внутренних элементов Fill Container, а для внешнего контейнера — Hug Contents по вертикали.
4. Проверьте: при изменении длины текста карточка должна расти в высоту автоматически.

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