Новые возможности Auto Layout: Wrap, Min/Max Width/Height

Мы уже освоили создание сложных компонентов с Variants и Component Properties, научились применять переменные для динамического управления цветами, отступами и размерами. Теперь пора углубиться в Auto Layout, чтобы создавать по-настоящему адаптивные и гибкие макеты. Они будут автоматически подстраиваться под любое содержимое и размер экрана.

Auto Layout: Новые горизонты адаптивности

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

Свойство Wrap (Перенос)

Раньше элементы в Auto Layout выходили за границы фрейма или сжимались, когда достигали их. Теперь, благодаря свойству Wrap, вы можете настроить автоматический перенос элементов на новую строку или столбец, как это происходит в веб-вёрстке с flex-wrap.

Как это работает:

1. Выберите фрейм с Auto Layout.
2. В панели свойств Auto Layout найдите раздел Wrap и активируйте его.
3. Теперь, если содержимое превысит доступное пространство, элементы автоматически перенесутся.

Пример использования:

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

• Создайте фрейм с Auto Layout.
• Добавьте в него несколько прямоугольников (имитирующих изображения или теги).
• Установите Direction на Horizontal и активируйте Wrap.
• Начните уменьшать ширину фрейма — увидите, как элементы автоматически переносятся на следующую строку.

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

Минимальная и Максимальная ширина/высота (Min/Max Width/Height)

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

Как это работает:

1. Выберите фрейм или элемент.
2. В разделе Resizing (Изменение размера) в правой панели свойств вы увидите поля Min width, Max width, Min height, Max height.
3. Введите желаемые значения в пикселях.

Пример использования:

• Карточки товаров: Установите минимальную ширину для карточки, чтобы текст внутри неё не сжимался до нечитаемого состояния при уменьшении размера экрана. Максимальная ширина может быть ограничена, чтобы карточка не растягивалась на весь экран на очень больших мониторах.
• Боковые панели: Задайте минимальную ширину для боковой панели навигации, чтобы она всегда оставалась читаемой, и максимальную, чтобы не занимать слишком много места.

Важно: Min/Max Width/Height работают в связке с режимами изменения размера (Fill container, Hug contents, Fixed width/height). Например, если у вас установлен Fill container, но при этом задана Min width, элемент не сожмётся меньше указанного минимума.

Практическое применение: Создание адаптивного блока с карточками

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

1. Создайте компонент "Карточка":
   • Нарисуйте прямоугольник, добавьте заголовок, текст и кнопку.
   • Объедините их во фрейм и примените Auto Layout.
   • Настройте внутренние отступы и расстояние между элементами.
   • Превратите этот фрейм в компонент.
2. Создайте фрейм "Блок с карточками":
   • Создайте новый фрейм.
   • Поместите в него несколько экземпляров вашего компонента "Карточка".
   • Примените Auto Layout к этому фрейму.
   • Установите Direction на Horizontal.
   • Активируйте свойство Wrap.
   • Установите Spacing mode на Space between или задайте фиксированный отступ между карточками.
3. Настройте Min/Max Width для карточек:
   • Выберите мастер-компонент "Карточка".
   • В разделе Resizing установите Min width (например, 280px) и Max width (например, 400px).
   • Убедитесь, что ширина самой карточки установлена на Fill container, чтобы она могла растягиваться в пределах этих ограничений.
4. Протестируйте:
   • Начните изменять ширину фрейма "Блок с карточками".
   • Вы увидите, как карточки автоматически переносятся на новую строку (благодаря Wrap) и при этом не становятся меньше минимальной ширины или больше максимальной.

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

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