Создание сложных адаптивных сеток и макетов

В прошлом разделе мы освоили новые возможности Auto Layout: Wrap и Min/Max Width/Height. Теперь применим их, чтобы создавать по-настоящему сложные и адаптивные сетки. Вы научитесь строить структуры, которые гибко подстраиваются под разные размеры экранов, сохраняя при этом целостность дизайна.

Адаптивные сетки с Auto Layout: Основы

Адаптивная сетка — это не просто набор колонок, а система, которая позволяет вашему дизайну масштабироваться и перестраиваться. В Figma, благодаря Auto Layout, вы создадите такие сетки, используя комбинацию вложенных фреймов и свойств Fill container, Hug contents, Min/Max Width/Height.

Создаём базовую адаптивную сетку

Представьте: вам нужна сетка из карточек, которая будет отображать 2, 3 или 4 карточки в ряд в зависимости от ширины экрана.

1. Создайте карточку. Начните с одной карточки. Убедитесь, что это компонент и внутри него Auto Layout для содержимого (заголовок, текст, изображение).
2. Оберните карточки в Auto Layout. Выделите несколько экземпляров карточки и объедините их во фрейм с Auto Layout.
   • Установите Direction на Horizontal.
   • Задайте Spacing between items (например, 24px).
   • Включите Wrap на On. Это ключевое свойство, которое позволит карточкам переноситься на новую строку, когда не хватает места.
3. Настройте адаптивность карточек.
   • Для каждой карточки внутри родительского Auto Layout фрейма установите Horizontal resizing на Fill container. Это позволит карточкам растягиваться, заполняя доступное пространство.
   • Теперь, чтобы карточки не становились слишком большими или слишком маленькими, используйте Min Width и Max Width для каждой карточки. Например, Min Width: 280px (минимальная ширина) и Max Width: 400px (максимальная ширина).
4. Настройте родительский контейнер.
   • Родительский фрейм, содержащий вашу сетку, также должен быть Auto Layout.
   • Установите Horizontal resizing на Fill container, если он должен заполнять всю ширину родителя (например, страницы).
   • Добавьте Padding по бокам, чтобы сетка не прилипала к краям экрана.

Совет: Используйте Min/Max Width/Height не только для самих карточек, но и для родительских контейнеров. Это поможет контролировать общую ширину макета на разных брейкпоинтах.

Пример: Адаптивная галерея изображений

Создадим галерею, где изображения будут автоматически перестраиваться в зависимости от ширины экрана.

1. Подготовьте изображения. Каждое изображение должно быть в отдельном фрейме с Auto Layout, чтобы вы могли контролировать его размеры. Установите для них Min Width и Max Width (например, Min Width: 200px, Max Width: 350px).
2. Создайте контейнер галереи. Объедините несколько фреймов с изображениями в один фрейм с Auto Layout.
   • Direction: Horizontal
   • Wrap: On
   • Spacing between items: Установите желаемый отступ.
   • Horizontal resizing: Fill container (для самого контейнера галереи, чтобы он занимал всю доступную ширину).
3. Проверьте адаптивность. Изменяйте ширину родительского фрейма (например, фрейма экрана смартфона, планшета, десктопа). Вы увидите, как изображения автоматически переносятся на новые строки, сохраняя заданные минимальные и максимальные размеры.

Сложные макеты с вложенными Auto Layout

Для более сложных макетов, таких как страницы с сайдбарами, шапками и футерами, используем вложенные Auto Layout.

Представим структуру страницы: Header, Main Content (с сайдбаром и основной областью), Footer.

1. Основной контейнер страницы.
   • Создайте фрейм страницы (например, Desktop).
   • Преобразуйте его в Auto Layout.
   • Direction: Vertical.
   • Spacing between items: 0 (или желаемый отступ между секциями).
   • Padding: Задайте отступы по бокам и сверху/снизу.
2. Header и Footer.
   • Создайте Header и Footer как отдельные фреймы с Auto Layout внутри.
   • Для Header и Footer установите Horizontal resizing: Fill container, чтобы они растягивались на всю ширину страницы.
3. Main Content (основная часть).
   • Создайте фрейм Main Content и преобразуйте его в Auto Layout.
   • Direction: Horizontal (если сайдбар слева/справа) или Vertical (если контент располагается сверху вниз).
   • Spacing between items: Отступ между сайдбаром и основной областью.
   • Horizontal resizing: Fill container.
   • Vertical resizing: Hug contents (или Fill container, если контент должен растягиваться по высоте).
4. Sidebar и Content Area.
   • Внутри Main Content создайте два фрейма с Auto Layout: Sidebar и Content Area.
   • Для Sidebar:
     • Horizontal resizing: Hug contents (если ширина сайдбара фиксирована) или Fixed width с Min/Max Width для адаптивности.
     • Vertical resizing: Fill container (чтобы сайдбар растягивался по высоте основной области).
   • Для Content Area:
     • Horizontal resizing: Fill container (чтобы основная область заполняла оставшееся пространство).
     • Vertical resizing: Hug contents (или Fill container).

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

Практическое задание: Адаптивная карточка товара

Закрепим знания, создав адаптивную карточку товара, которая будет менять свою структуру в зависимости от ширины.

Цель: Создать карточку товара, которая на широких экранах отображает изображение и текст рядом, а на узких — изображение сверху, а текст под ним.

1. Создайте базовые элементы:
   • Изображение: Фрейм с изображением, Horizontal resizing: Hug contents, Vertical resizing: Hug contents.
   • Блок текста: Фрейм с Auto Layout, содержащий заголовок, описание, цену, кнопку. Direction: Vertical.
2. Объедините в основной контейнер:
   • Создайте новый фрейм и поместите в него Изображение и Блок текста.
   • Преобразуйте этот фрейм в Auto Layout.
   • Установите Spacing between items (например, 16px).
   • Ключевой момент: Установите Wrap на On.
3. Настройте адаптивность элементов:
   • Для Изображения:
     • Horizontal resizing: Fill container.
     • Min Width: 120px (минимальная ширина изображения).
     • Max Width: 200px (максимальная ширина изображения).
   • Для Блока текста:
     • Horizontal resizing: Fill container.
     • Min Width: 180px (минимальная ширина блока текста).
     • Max Width: 300px (максимальная ширина блока текста).
4. Проверьте результат: Изменяйте ширину родительского фрейма карточки. Вы увидите, как при достижении определенной ширины Блок текста переносится под Изображение, создавая вертикальный макет.

Это задание поможет вам лучше понять, как Wrap в сочетании с Min/Max Width и Fill container позволяет создавать по-настоящему гибкие и адаптивные компоненты.

Теперь, когда вы освоили создание сложных адаптивных сеток и макетов, следующим шагом будет углубление в возможности вложенных Auto Layout для создания ещё более гибких компонентов. Это позволит вам строить сложные UI-элементы, которые будут идеально подстраиваться под любые изменения контента и размеров.