Свойство min-height/width, в макетах Figma

Привет друзья! Сегодня я хотел бы рассказать о свойстве min-width, min-height и его применении в макетах Figma.

Свойства min-width, min-height предназначены для предотвращения уменьшения ширины и высоты элемента ниже заданного значения.

Сегодня в Figma становится все больше функций из CSS, а так же возможностей для автоматизации наших рутинных процессов. Очень часто в работе мы прорабатываем макеты под разные breakpoints (разрешения), делая это в ручную мы как правило тратим время и рискуем допустить ошибку.

В CSS минимальный размер задается для всего элемента, в Figma можно добиться похожего поведения задав минимально допустимое расстояние между элементами в Auto layout значении.

Давайте рассмотрим создание такого блока по шагам.

Шаг 1. Создадим родительский фрейм (Parent), зададим ему свойства Auto layout (горизонтальное выравнивание), ⬍ (Hug) , ⬌(Fixed) (Размеры и отступы взяты произвольные)

Шаг 2. Возьмем или создадим блок (Block-1) с пропорциональным соотношением сторон и зададим ему свойство ⬌(Fill container) и поместим его в Parent. Блок с пропорциональным соотношением сторон можно взять в библиотеке Ant Design Open Source/Image, как это работает можно прочитать в статье.

Шаг 3.1 Создадим фрейм (Min-height)

Шаг 3.2. Зададим ему свойства, Auto layout (вертикальное выравнивание со свойством Packed (40px)), высота ⬍ (Hug) , ширина ****⬌(Fixed)

Шаг 3.3 Внутри блока (Min-height) создадим 2 фрейма с произвольными размерами

Шаг 4. Меняем свойства блока (Min-height), в свойстве Auto layout, меняем Packed на Space between, а высоту меняем на ⬍ (Fill container) и все, теперь при изменении ширины родителя (Parent), блок (Min-height) будет меняться по высоте при этом его минимальная высота будет будет фиксироваться на значении которое мы задали на шаге 3.1, когда устанавливали Packed (40px).