Привет друзья! Сегодня я хотел бы рассказать о свойстве 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 Внутри блока создадим 2 фрейма с произвольными размерами
Шаг 4. Меняем свойства блока (Min-height), в свойстве Auto layout, меняем Packed на Space between, а высоту меняем на ⬍ (Fill container) и все, теперь при изменении ширины родителя (Parent), блок (Min-height) будет меняться по высоте при этом его минимальная высота будет будет фиксироваться на значении которое мы задали на шаге 3.1, когда устанавливали Packed (40px).
