Constraints в Figma задают, как слой сохраняет положение и размер при изменении родительского фрейма. Для фиксированной кнопки у правого края выберите Right по горизонтали. Для полосы, которая должна растягиваться с сохранением двух боковых отступов, используйте Left and right. Эти настройки относятся к изменению фрейма, а не к автоматической раскладке соседних элементов.
В упражнении Mentoring.digital соберём простой учебный экран. Начнём с обычного фрейма без Auto Layout, чтобы увидеть поведение каждого ограничения отдельно. Размеры заданы для практики и не являются обязательным стандартом дизайна.
Подготовьте фрейм и три элемента
- Создайте фрейм шириной 400 и высотой 300 px.
- Поместите внутри прямоугольник шириной 80 px у правого края с отступом 20 px. Он будет условной кнопкой.
- Добавьте горизонтальную полосу шириной 360 px с отступами по 20 px слева и справа.
- Добавьте круг шириной 40 px по горизонтальному центру, то есть с координатой X = 180.
Убедитесь в панели слоёв, что элементы действительно вложены в нужный фрейм. Визуально лежащий поверх фрейма объект может оказаться его соседом, а не ребёнком. Тогда ожидаемая привязка к этому фрейму не сработает.
Настройте ограничения по двум осям
Выделите условную кнопку. В разделе Position правой панели откройте Constraints и задайте Right по горизонтали, Top по вертикали. Для полосы выберите Left and right и Top. Для круга выберите Center по горизонтали и Top по вертикали.
Горизонтальное и вертикальное правила независимы. Right не означает Bottom. Если элемент должен держаться нижнего края при увеличении высоты, настройте Bottom отдельно. Для растяжения между верхним и нижним отступами используется Top and bottom.
Center сохраняет положение относительно центра. Он не исправляет произвольное начальное смещение: сначала расположите круг по центру, если именно такое поведение требуется.
Проверьте числовой результат изменения ширины
Измените ширину родительского фрейма с 400 до 600 px обычным изменением размера. Кнопка должна сохранить ширину 80 и правый отступ 20, поэтому её X станет 500. Полоса сохранит два отступа по 20 и получит ширину 560. Круг останется шириной 40, а его X станет 280.
Теперь уменьшите фрейм до 320 px. Ожидаемые X кнопки и круга равны 220 и 140, ширина полосы равна 280. Сверьте координаты и размеры в панели, а не только впечатление от картинки.
Не используйте инструмент масштабирования всего макета для этой проверки. У него другое назначение. Также не удерживайте модификатор игнорирования ограничений: Figma позволяет временно обходить Constraints при изменении размера с Ctrl в Windows или Command в macOS.
Когда использовать Scale и Auto Layout
Scale сохраняет относительные размеры и положение по выбранной оси. Если слой занимает 50% ширины родителя, при увеличении родителя он продолжит занимать эту долю. Это отличается от двух фиксированных отступов. Для кнопки, которую нельзя растягивать, Scale обычно не выражает нужное правило.
Constraints удобны для привязки отдельных элементов. Они не организуют поток карточек, не переносят соседние блоки и не рассчитывают высоту по содержимому. Для такой задачи изучают Auto Layout. У элементов в потоке Auto Layout действуют его правила размеров и размещения; наш эксперимент намеренно использует обычный фрейм.
Что проверить, если слой съезжает
- Какой фрейм является непосредственным родителем слоя?
- Меняется размер этого фрейма или масштабируется весь набор?
- Заданы ли обе оси и правильное начальное положение?
- Не добавлены ли layout guides, которые меняют привязку?
- Не пытаетесь ли вы применить логику обычного фрейма к группе или потоку Auto Layout?
После настройки проверьте минимальную и максимальную рабочую ширину, а затем длинный текст. Успешное растяжение прямоугольника не доказывает, что весь экран адаптивен: переносы текста и столкновения элементов требуют отдельной проверки.
На курсе Figma с наставником можно разобрать правила изменения размера на своём макете. Наставнику по Figma покажите исходную ширину, проблемный размер и ожидаемое поведение каждого слоя.
