Constraints в Figma. Что такое Constraints? Зачем они нужны? | Design Quiz

Constraints в Figma. Что такое Constraints? Зачем они нужны?

Блок настроек Constraints в Figma отвечает за поведение и расположение элементов дизайна, при изменении размеров родительского блока.
Родительский блок — это блок, внутри которого находится ваш элемент. Это может быть фрейм, компонент или группа (также может быть булевая-группа)

Чтобы увидеть блок Constraints, надо выделить любой элемент вашего дизайна и посмотреть в правый бар программы . Блок представляет из себя «крестик», в котором вы задаёте значения для позиционирования вашего элемента.

Элемент можно выравнивать относительно ширины или высоты родительского блока.

Возможны разные комбинации. По умолчанию задано значение Left, Top — это значит, что при изменении размера родительского блока, ваш объект будет находиться в левом верхнем углу, а также иметь фиксированную ширину и высоту.

Чтобы задать «резиновую» ширину/высоту, надо выбрать либо значение Scale, либо Left&Right(Top&Bottom).
Scale — означает, что размер элемента будет меняться пропорционально изменению размера родительского блока.

Left&Right — в свою очередь, фиксирует левый и правый край, а ширина(высота) элемента изменяется. Отлично подходит для создания тянущихся полей ввода

Полный гайд тут.