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

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

Элемент можно выравнивать относительно ширины или высоты родительского блока.
Возможны разные комбинации. По умолчанию задано значение Left, Top — это значит, что при изменении размера родительского блока, ваш объект будет находиться в левом верхнем углу, а также иметь фиксированную ширину и высоту.
Чтобы задать «резиновую» ширину/высоту, надо выбрать либо значение Scale, либо Left&Right(Top&Bottom).
Scale — означает, что размер элемента будет меняться пропорционально изменению размера родительского блока.
Left&Right — в свою очередь, фиксирует левый и правый край, а ширина(высота) элемента изменяется. Отлично подходит для создания тянущихся полей ввода
Например, вы растягивает фон у кнопки, т.е. дочерний элемент и родительский будут одного размера. В этом случае нет разницы между scale и left&right
💁♂️ Tip. При зажатой клавише Shift, в крестике constraints можно выбрать двойные значения, например Top Bottom и Left Right (не открывая выпадающий селект)


Галочка «Fix position when scrolling» фиксирует позицию элемента при скроллинге родительского блока. Элемент, отмеченный этой галочкой, выносится на самый верх в списке слоев, и попадает в блок FIXED. Появляется блок SCROLLS, куда попадают все скроллируемые элементы макета.
💁♂️ Tip. Fix position when scrolling — можно использовать для демонстрации работы элементов с фиксированной позиций: «залипающих меню», онлайн чатов, предупреждений об использовании кукис, кнопок автоскрола в начало страницы и т.д.
Посмотреть, как это работает можно в режиме презентации, нажав кнопку «Play» в правом верхнем углу окна Figma (рядом с кнопкой Share)
Применение Constraints

Кнопки.
С кнопками все довольно просто. У нас есть два (иногда три) элемента. Первый — это фон, который растягивается на всю ширину и высоту кнопки, и текст, который имеет одинаковые отступы справа и слева, а само текстовое поле занимает всю ширину, за вычетом этих отступов
Фон — Left & Right, Top & Bottom
Текстовое поле — Left & Right, Center
+ Иконка — Left, Center
💁♂️ Tip. Почему ширина текстового поля Left&Right? Да потому-то, так проще подгонять ширину кнопки под другой текст.

Формы

С полями форм похожая ситуация, как и с кнопками, но элементов у нас на один больше (зависит от дизайна).
Фон — Left & Right, Top & Bottom
Подчеркивание в поле — Left & Right, Bottom
Текстовое поле — Left & Right, Center
Иконка (маркер выпадающего списка)— Right, Center

Шапка сайта

Вот тут уже посложнее. Для примера я взял шапку, которая состоит из 4 блоков: фон, логотип по центру, левая часть с меню, правая часть с корзиной и иконкой авторизации.
С фоном все просто, поступим также как и с полем формы:
Фон — Left & Right, Top & Bottom
Линия снизу — Left & Right, Bottom
Элементы, которые должны позиционироваться по левому краю, мы «заворачиваем» в отдельный фрейм внутри нашей шапки и выставляем значения constraints — Left, Center (на случай если захотим менять высоту шапки, если нет, то можно выбрать — Top)
Тоже самое проделываем с элементами, которые должны позиционироваться по правому краю, и выставляем значения — Right, Center
… и логотип — Center, Center
Если вы задумали «залипающую» при скроллинге шапку, не забудьте установить галочку Fix position when scrolling.

Карточка товара

С карточкой товара все индивидуально. В моей карточки есть фотография, название товара и его цена, название производителя, две иконки: купить, sale. Иконку «процент» я сделал с подписью, чтобы немного усложнить пример.
Давайте разбираться. Карточку у нас может поменять ширину и высоту, при этом размеры могут измениться пропорционально или нет.
Иконка купить будет всегда справа и внизу, соответсвенно выбираем в constraints — Right, Bottom
Название производителя — справа и вверху — Right, Top
Цена — Left, Bottom
Название товара может быть короче или длиннее текущего. Поэтому мы растягиваем текстовое поле на всю ширину плашки, за вычетом боковых отступов. Так мы покажем ребятам, которые будут верстать, какой размер должен быть у строки с названием товара. Соответственно выставляем значения — Left & Right, Bottom
Чтобы наша фотография товара растягивалась пропорционально изменению размера карточки выставляем ей значения — Left & Right, Top & Bottom
И, напоследок, осталась иконка процента с подписью. Чтобы она всегда находилась на пересечении белой области и фотографии, ставим ей позиционирование — Right, Bottom, и такие же значения для подписи sale.

Проверено!
Если не лениться и устанавливать значения Constraints для элементов дизайна, то в последствии, это сэкономит ваше время при создании адаптива сайта.
💁♂️ One more Tip. При изменении размера родительского объекта зажмите Cmd (Ctrl — для Windows), и значения constraints будут игнорироваться. Часто использую для изменения размера высоты страницы.
Исходник с примерами можно посмотреть 👉 тут
👉 Follow Us https://vk.com/figmatips
