Использование автолейаута и ограничений для адаптивности

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

Автолейаут — основа адаптивности

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

Вспомните, как мы использовали автолейаут для кнопок и полей ввода. Теперь мы расширим это понимание.

Режимы изменения размера (Resizing)

Ключ к адаптивности в автолейауте — правильное использование режимов изменения размера:

• Hug Contents (Обнять содержимое): Фрейм с автолейаутом подстраивается под размер своего содержимого. Идеально для кнопок, где размер зависит от текста.
• Fixed Width/Height (Фиксированная ширина/высота): Фрейм имеет заданные размеры, независимо от содержимого. Используйте, когда нужно жёстко контролировать размер.
• Fill Container (Заполнить контейнер): Фрейм растягивается, чтобы заполнить доступное пространство в родительском автолейауте. Это наш основной инструмент для адаптивности!

Пример: Представьте карточку товара: изображение, заголовок, описание. Если хотите, чтобы описание растягивалось на всю доступную ширину при изменении размера карточки, примените к текстовому слою Fill Container по горизонтали.

Совет: Всегда начинайте с Hug Contents для внутренних элементов. Затем используйте Fill Container для тех, что должны растягиваться.

Ограничения (Constraints) для элементов вне автолейаута

Не все элементы могут быть внутри автолейаута. Например, фоновые изображения, декоративные элементы или элементы с абсолютным позиционированием. Для них используйте ограничения (Constraints).

Ограничения определяют, как элемент ведёт себя при изменении размера родительского фрейма.

• Left & Right (Слева и Справа): Элемент привязан к левому и правому краям родителя. При изменении ширины родителя элемент растягивается.
• Left (Слева): Элемент привязан к левому краю. Расстояние до левого края остаётся фиксированным.
• Right (Справа): Элемент привязан к правому краю. Расстояние до правого края остаётся фиксированным.
• Center (Центр): Элемент остаётся по центру родителя.
• Scale (Масштаб): Элемент масштабируется пропорционально изменению размера родителя.

Аналогичные ограничения есть и для вертикального позиционирования (Top, Bottom, Top & Bottom, Center, Scale).

Пример: Модальное окно должно всегда оставаться по центру экрана и растягиваться по ширине. Примените Left & Right и Top & Bottom для его фона, а затем Center для содержимого внутри.

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

Давайте создадим простую адаптивную карточку.

1. Создайте фрейм Card и задайте ему фиксированную ширину, например, 300px.
2. Добавьте изображение: Вставьте изображение внутрь Card. Установите для него Constraints на Left & Right и Top.
3. Добавьте текстовые блоки: Создайте текстовый слой для заголовка, затем ещё один для описания.
4. Примените автолейаут к тексту:
   • Выделите заголовок и описание, объедините их в автолейаут (например, Text Content).
   • Установите для Text Content Fill Container по горизонтали.
   • Для самого текстового слоя внутри Text Content также установите Fill Container по горизонтали.
5. Объедините всё в автолейаут: Выделите изображение и Text Content, объедините их в общий автолейаут. Это будет наш основной компонент Card.
6. Проверьте адаптивность: Измените ширину фрейма Card. Вы увидите, как изображение и текст подстраиваются.

Важно: Комбинация автолейаута и ограничений позволяет создавать сложные адаптивные структуры. Автолейаут предпочтительнее, когда элементы должны динамически перестраиваться, а ограничения — для позиционирования относительно краёв родителя.

Теперь, когда вы понимаете, как автолейаут и ограничения работают вместе, вы готовы к следующему шагу: созданию вариантов компонентов для разных брейкпоинтов. Это позволит вашей дизайн-системе быть по-настоящему гибкой и предсказуемой на любых устройствах.