Resizing: Fixed, Hug, Fill

Resizing решает, как элемент ведёт себя при изменении размера: держит размер, обнимает содержимое или заполняет контейнер.

Hug и Fill — два слова, которые превращают статичный макет в адаптивный. Понять их — значит перестать бороться с размерами.

Внутри авто-лейаута у каждого элемента есть поведение по ширине и высоте. Это три режима resizing, и они работают как в CSS.

Три режима

Fixed (Фиксированный) — жёсткий размер в пикселях. Элемент не меняется.
Hug contents (Обнять содержимое) — фрейм сжимается ровно по своему содержимому. Кнопка обнимает текст плюс padding.
Fill container (Заполнить контейнер) — элемент растягивается на всё доступное место родителя. Аналог flex-grow.

Три режима ширины

  Fixed:  [====200px====]   жёстко 200
  Hug:    [Текст]           по содержимому
  Fill:   [==============]  на всю ширину родителя

Где переключать

Выделите элемент в авто-лейауте. В разделе Design рядом с полями W и H появятся выпадашки режима. Выберите Fixed, Hug или Fill для ширины и отдельно для высоты.

Min и Max width

В современной Figma (2024-2025) можно задать минимальную и максимальную ширину/высоту. Это спасает адаптив: например, кнопка с режимом Fill, но не уже 120 и не шире 320. Раскройте опции у поля размера и впишите min/max.

Абсолютное позиционирование (Ignore auto layout)

Иногда внутри авто-лейаута нужен элемент, который висит свободно — например, бейдж-счётчик в углу иконки. Для этого есть режим Absolute position (в новых версиях — Ignore auto layout): элемент остаётся в фрейме, но выпадает из потока. Выделите его и нажмите иконку абсолютного позиционирования или зажмите Cmd/Ctrl при перетаскивании.

Абсолютный бейдж на иконке

  Frame (auto layout)
  +----------------+
  | [Иконка]   (3) |  <- (3) absolute, висит в углу
  +----------------+
       ^ обычный поток | ^ выпал из потока

Распорки (spacers) и Fill-трюки

Опытные дизайнеры используют пустой фрейм в режиме Fill как «распорку» (spacer), которая расталкивает элементы. Но чаще это не нужно: режим авто-зазора (space between) делает то же чище. Главное правило адаптивных кнопок: текст внутри — Hug, сама кнопка по ширине — либо Hug (кнопка по тексту), либо Fill (кнопка на всю ширину контейнера, например в мобильной форме).

Сочетание режимов родителя и детей даёт нужное поведение. Хотите карточку, которая тянется по ширине экрана, но с текстом, переносящимся внутри? Карточке — Fill width, текстовому слою внутри — тоже Fill width, и текст начнёт переноситься по доступной ширине. Это самый частый источник вопросов у новичков, и ответ почти всегда в правильной комбинации Hug/Fill.

Зачем нужны min и max

Min/max width защищают макет от крайностей. Поле ввода с Fill в широком десктопе могло бы растянуться на полтора метра — max-width 480 не даст ему стать нечитаемо длинным. Кнопка с текстом-переменной (Hug) может стать слишком узкой при коротком слове «ОК» — min-width 96 задаст ей приличный минимум. Эти ограничения — то, что отличает продуманную адаптивную систему от наивной.

Горячие клавиши

Действие	Как
Сменить режим resizing	выпадашка у W / H
Абсолютное позиционирование при перетаскивании	зажать `Cmd/Ctrl`
Задать min/max	раскрыть опции у поля размера

Частые ошибки

Оставляют Fixed там, где нужен Fill. Если элемент не тянется на всю ширину — переключите его на Fill container.
Путают Hug и Fill. Hug сжимается под содержимое, Fill — растягивается под контейнер. Это противоположности.
Тащат бейдж мышкой и ломают поток. Для свободных элементов используйте Absolute position, а не выносите их из фрейма.

Совет профи: Hug снаружи, Fill изнутри — мантра кнопки

Если запомнить один паттерн про resizing, пусть это будет кнопка. Текст внутри кнопки — Hug (обнимает сам себя). Сама кнопка — Hug, если должна быть по ширине текста, или Fill, если растягивается на весь контейнер (типично для мобильных форм, где кнопка во всю ширину экрана). Эта пара режимов решает 80% задач. Дальше добавляйте min/max, когда нужно ограничить крайности. Тренируйте интуицию вопросом: «этот элемент должен сжиматься под содержимое или растягиваться под родителя?» Ответ сразу даёт нужный режим. Освоив Hug и Fill, вы перестанете бороться с размерами и начнёте получать адаптивные макеты с первого раза — а это огромная экономия нервов на каждом проекте.

Чек-лист

Различаю Fixed, Hug и Fill.
Переключаю режим у ширины и высоты отдельно.
Задаю min/max width для адаптива.
Делаю элемент абсолютным (Ignore auto layout).

Итоги. Resizing — это поведение размеров: Fixed держит, Hug обнимает содержимое, Fill заполняет родителя. Плюс min/max для границ и абсолютное позиционирование для свободных элементов. Это делает макеты по-настоящему адаптивными. Дальше — wrap и вложенные авто-лейауты.