Constraints в Figma: почему слой не растягивается вместе с фреймом
Дизайнер меняет ширину фрейма с 1440 на 1024 — и половина макета разъезжается.
Причина в constraints: у каждого слоя внутри фрейма есть собственные правила поведения при ресайзе.
Что такое constraints
Документация объясняет коротко: constraints говорят Figma, как слой должен реагировать, когда меняется размер родительского фрейма.
Правила задаются по двум осям независимо: горизонтальной (x) и вертикальной (y).
Это значит, что один слой может быть привязан к левому краю по горизонтали и растягиваться по вертикали — и это нормальная комбинация.
Значение по умолчанию
По умолчанию у слоя выставлены Top и Left.
Практический смысл: слой сохраняет позицию относительно верхнего левого угла. При увеличении фрейма он остаётся на месте, а справа появляется пустое пространство.
Именно поэтому «ничего не работает» в первый раз: правила не заданы, а дефолт ведёт себя не так, как ожидается.
Горизонтальные значения
Документация перечисляет варианты по горизонтали:
- Left — позиция сохраняется относительно левого края;
- Right — относительно правого;
- Left and right — размер и позиция задаются относительно обоих краёв, слой может расти и сжиматься по ширине;
- Center — относительно горизонтального центра фрейма;
- Scale — размер и позиция задаются в процентах от размеров фрейма.
Вертикальные значения
Логика та же:
- Top — относительно верхнего края;
- Bottom — относительно нижнего;
- Top and bottom — слой тянется по высоте между краями;
- Center — относительно вертикального центра;
- Scale — в процентах от размеров фрейма.
Как работает Scale
Документация приводит пример: ширина фрейма 100 px, ширина слоя 70 px — значит, слой занимает 70 % родителя.
Если фрейм расширить до 200 px, Figma сделает слой шириной 140 px.
Практика: Scale подходит для картинок и иллюстраций, которые должны масштабироваться пропорционально. Для кнопок и текстовых блоков он опасен: шрифт не масштабируется, а рамка растягивается.
Где включается
Порядок из документации:
- Выделите слой (или родителя) внутри фрейма.
- В правой панели найдите раздел Position.
- Нажмите иконку Constraints.
- Выставьте значения по вертикали и горизонтали.
Текущие привязки показываются синей пунктирной линией на холсте — удобно для быстрой проверки.
Задать значение можно и кликом по линиям в интерактивной схеме, а не только выпадающим списком.
Где constraints не работают
Три ограничения из документации.
Первое: constraints применяются только к слоям внутри фрейма. К объектам, лежащим прямо на холсте, — нет.
Второе: внутри фрейма с auto layout constraints не применяются, если объект не выходит из потока.
Третье: если у выделенного объекта нет родительского фрейма, настройки просто не появятся в панели.
Как игнорировать constraints
Иногда нужно изменить размер фрейма, не запуская правила.
Документация: удерживайте Command на macOS или Ctrl на Windows при перетаскивании — constraints временно игнорируются.
Практика: это удобно для проверки гипотезы «а если сделать контейнер шире». Если макет поедет, вы сразу увидите, какие слои не готовы.
Constraints и auto layout
Документация по auto layout отдельно уточняет: у детей auto-layout-фрейма constraints недоступны.
Вместо них работают свойства изменения размера: Hug contents, Fill container, фиксированные и минимальные/максимальные размеры.
Практика: для компонентов с auto layout задавайте Fill container и Hug contents, а constraints оставьте для обычных фреймов. Смешивать подходы в одном макете — источник половины проблем с адаптивностью.
Типичные схемы
Три готовых набора, которые закрывают большинство задач.
Шапка сайта. Логотип — Left + Top. Меню — Right + Top. Разделитель — Left and right + Top, чтобы линия тянулась по ширине.
Карточка товара. Сам фрейм карточки — Top + Left. Картинка — Left and right + Top. Цена — Left and Bottom.
Модальное окно. Контейнер — Center + Center. Кнопки внизу — Left and right + Bottom.
Как проверить адаптивность
Проверка занимает минуту: выделите фрейм и потяните за угол, наблюдая за слоями.
Практика: проверяйте не только увеличение, но и уменьшение — при сжатии ошибки видны лучше: элементы наезжают друг на друга и обрезаются.
Ещё один приём: продублируйте фрейм и сделайте из него узкий вариант. Так в файле остаются оба состояния, и разработчик видит, к чему стремиться.
Частые ошибки
Оставить дефолт. Слой «не тянется», потому что стоит Left.
Scale на тексте. Рамка меняется, кегль нет.
Constraints вместо auto layout. Для повторяющихся списков это лишняя ручная работа.
Забыть про вложенность. Внутренний фрейм со своими правилами перебивает внешние ожидания.
Проверять только увеличение. Сжатие показывает проблемы раньше.
Что происходит при вложенности
Фрейм внутри фрейма ведёт себя по своим правилам: внутренний контейнер может быть растянут по ширине, но его дети останутся привязаны к левому краю.
Практика: проверяйте адаптивность снаружи внутрь. Сначала убедитесь, что сам контейнер правильно реагирует, и только потом переходите к слоям внутри.
Если сразу заняться детьми, вы будете править их по десять раз — контейнер всё равно изменит исходные условия.
Ресайз и текстовые блоки
Текстовый слой с автоматической шириной при растяжении фрейма может перейти на две строки — и высота блока изменится.
Документация по constraints описывает только позицию и размер, но не перетекание текста. Поэтому визуально «поехавшая» карточка часто означает не проблему с привязками, а изменившуюся высоту текста.
Практика: для заголовков фиксируйте число строк или задавайте размер через Fill container и проверяйте на длинных подписях.
Передача разработчику
Constraints видны в Dev Mode вместе с размерами и отступами.
Практика: перед передачей продублируйте фрейм под узкий экран и настройте правила так, чтобы оба варианта открывались без ручных правок. Разработчику проще ориентироваться на два состояния, чем на словесное описание.
FAQ
Что такое constraints в Figma?
Правила, по которым слой реагирует на изменение размера родительского фрейма.
Какие значения по умолчанию?
Top и Left.
Работает ли это в auto layout?
Нет, там используются свойства изменения размера.
Как задать Scale?
В разделе Position правой панели, иконка Constraints.
Как временно отключить?
Удерживать Command или Ctrl при ресайзе.