Как использовать привязки при создании адаптива в Figma

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

После знакомства с Constraints на простых фигурах переносим принцип на реальный макет формы.

Для примера используем мобильный Frame шириной 510 px с контейнером около 480 px и небольшими боковыми отступами. В исходной версии многие элементы уже собраны через Auto Layout, поэтому сначала важно решить, какие настройки действительно стоит сохранять, а какие проще заменить Constraints.

Главная задача здесь не в том, чтобы автоматизировать абсолютно всё, а в том, чтобы ускорить дальнейшую работу с адаптивом.

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

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

Constraints, Auto Layout и компоненты — это инструменты, которые можно свободно сочетать между собой.

Первым делом настраиваем внешний контейнер формы.

Чтобы фон сохранял одинаковые отступы слева и справа при изменении ширины экрана, задаём ему Left and Right. Теперь при растягивании родительского Frame меняется ширина самой подложки, а боковые расстояния остаются постоянными.

Это один из самых понятных сценариев использования Constraints в адаптивном макете.

Если внутри элемента слишком много Auto Layout и дополнительных вложенных Frame, нужные Constraints могут быть недоступны или работать не так, как ожидается.

В таком случае часть структуры можно временно упростить: разгруппировать лишние Auto Layout и оставить обычные Frame.

После уменьшения вложенности становится проще управлять отдельными уровнями интерфейса и задавать каждому собственную привязку.

Но делать это стоит только там, где упрощение действительно помогает. Полностью отказываться от Auto Layout во всём проекте не требуется.

Разберём отдельное поле выбора.

Внутри него есть название параметра слева и стрелка справа. При изменении ширины поля оба элемента должны оставаться около своих границ.

Поэтому текст привязываем через Left, а стрелку — через Right. Теперь контейнер можно растягивать, а внутренние элементы сохраняют заданные отступы.

По вертикали текст и стрелку можно закрепить относительно верхней части или центра в зависимости от конструкции поля.

Constraints родительского Frame не управляют автоматически поведением всего его содержимого.

Например, поле может корректно растягиваться, а текст внутри него — неожиданно смещаться или менять положение. Поэтому для текста также проверяем собственные настройки.

Если строка должна изменять количество переносов вместе с шириной контейнера, необходимо правильно настроить сам текстовый блок. Контейнер может растягиваться через Constraints, а текст — перестраиваться уже внутри доступной ширины.

Таким образом, при сложных элементах мы отдельно контролируем внешний Frame и его внутреннее содержимое.

Для кнопки удобно использовать Left and Right.

В этом случае её контейнер растягивается вместе с шириной формы, сохраняя боковые отступы. Текст внутри также должен быть настроен так, чтобы сохранять правильное положение и при необходимости корректно перестраиваться.

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

Оба подхода допустимы — важно понимать, какой из них быстрее и понятнее в конкретной ситуации.

После настройки Constraints обязательно меняем ширину родительского Frame и смотрим, как ведёт себя вся форма.

При небольшом изменении ширины большинство элементов может перестроиться автоматически. На более узком экране часть текста начнёт переноситься, а отдельные элементы всё равно потребуют ручной корректировки.

Это нормально. Задача Constraints не в том, чтобы одним набором настроек автоматически создать идеальный дизайн для любого размера экрана, а в том, чтобы сократить количество ручной работы.

Даже правильно настроенные Constraints не заменяют работу дизайнера с конкретными разрешениями.

На определённой ширине может понадобиться изменить размер текста, расстояние между элементами, структуру блока или расположение отдельных компонентов.

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

Нет необходимости выбирать только один инструмент для всего проекта.

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

Компоненты помогают переиспользовать одинаковые элементы, а ручная корректировка остаётся нормальным способом финальной настройки.

Лучший вариант — сочетать эти инструменты там, где каждый из них действительно экономит время.

Работа с адаптивом не должна превращаться в отдельный проект по настройке автоматизации.

Если Constraints позволяют быстро растянуть несколько контейнеров и закрепить элементы — используем их. Если конкретный блок быстрее перестроить через Auto Layout — оставляем Auto Layout. Если небольшую часть проще поправить вручную — нет необходимости усложнять структуру ради полной автоматизации.

Главный критерий — скорость, понятность макета и предсказуемое поведение элементов. Чем больше практики с разными инструментами Figma, тем проще становится выбирать подходящий способ для конкретной задачи.

Перейти к следующему уроку