Как сделать ресайз в фигме

В дизайне интерфейсов точность и адаптивность — не просто пожелания, а обязательные требования. Когда макет создан в Figma для десктопа, но его нужно адаптировать под мобильное приложение, таблицу или баннер — без ресайза не обойтись. Многие новички сталкиваются с искажениями, сбоями в пропорциях, потерей точности позиционирования. Но ресайз в Figma — это не просто изменение размеров рамки. Это умение сохранить целостность дизайна, автоматизировать перестройку элементов и избежать ручной перенастройки сотен объектов. Умение правильно использовать ресайз делает вас не просто дизайнером, а инженером пользовательского опыта.

Что такое ресайз в Figma и зачем он нужен

Ресайз — это процесс изменения размеров фрейма или компонента с автоматической адаптацией вложенных элементов. В отличие от простого масштабирования, ресайз в Figma учитывает не только пропорции, но и поведение объектов: как они сжимаются, растягиваются, остаются фиксированными или перемещаются. Это критически важно при создании адаптивных интерфейсов — от веб-сайтов до мобильных приложений.

Представьте, что вы спроектировали карточку товара для десктопа: изображение, заголовок, цена, кнопка. Теперь нужно сделать версию для телефона. Если вы просто уменьшите фрейм вручную — текст обрежется, кнопка уедет за границы, изображение растянется. Но если вы настроите Auto Layout и Constraints — Figma сама перестроит всё: сожмёт отступы, перенесёт текст, уменьшит размер шрифта, сохранив читаемость.

Без ресайза вы тратите часы на ручную корректировку. С ним — минуты. В командах, где дизайнеры работают над 5–10 версиями одного экрана, правильный ресайз становится не роскошью, а стандартом эффективности.

Базовый ресайз: как изменить размер рамки

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

Чтобы сделать базовый ресайз правильно:

1. Выберите фрейм, который нужно изменить.
2. В правой панели найдите раздел «Size» — там вы увидите текущие ширину и высоту.
3. Вручную введите новые значения — например, 375×667 для iPhone 13.
4. Или просто потяните границу фрейма мышкой — Figma подскажет стандартные размеры (например, «iPhone 14» или «Desktop»).

Теперь проверьте: если текст или кнопки съехали — значит, они не привязаны к краям. Это нормально для базового ресайза, но не для рабочего процесса. Для полноценной адаптации нужно перейти к Auto Layout.

Ресайз с Auto Layout — основа профессионального дизайна

Auto Layout — это мощнейший инструмент, который превращает Figma из графического редактора в систему управления интерфейсами. Он позволяет элементам внутри фрейма автоматически распределяться по вертикали или горизонтали, менять отступы, переноситься на новую строку и адаптировать свою ширину под контейнер.

Чтобы включить Auto Layout:

• Выделите элементы внутри фрейма (например, текст + иконка + кнопка).
• Нажмите Cmd+Shift+A (Mac) или Ctrl+Shift+A (Windows).
• В правой панели появится раздел «Auto Layout»: выберите направление — вертикальное (Column) или горизонтальное (Row).
• Настройте padding (отступы от краёв), item spacing (расстояние между элементами), и alignment (выравнивание).

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

Constraints: как элементы ведут себя при изменении размеров

Constraints — это правила, определяющие, как объекты прикрепляются к краям фрейма. Они работают независимо от Auto Layout и применяются к любому элементу: иконке, тексту, изображению.

Чтобы настроить Constraints:

• Выберите элемент внутри фрейма.
• В правой панели найдите раздел «Constraints».
• Выберите, к каким краям он должен прикрепляться: слева, справа, сверху, снизу, по центру.
• Используйте опцию «Scale» — если нужно, чтобы элемент увеличивался/уменьшался пропорционально.

Пример: вы делаете шапку с логотипом слева и кнопкой «Войти» справа.
— Логотип: Constraints — Left + Top
— Кнопка: Constraints — Right + Top
— При уменьшении ширины фрейма логотип останется у левого края, кнопка — у правого.
— Если вы добавите «Scale» к логотипу — он будет уменьшаться, чтобы не вылезать за границы.

Ресайз компонентов и вариантов

Если вы работаете с компонентами — ресайз становится ещё мощнее. Компоненты с вариантами позволяют создавать одну «основу» (например, кнопку), а затем задавать разные состояния: размеры (маленькая, средняя, большая), цвета, иконки, текст.

Создайте компонент кнопки. Затем:

• Создайте несколько экземпляров.
• Для каждого измените размер фрейма — Figma автоматически запомнит его как вариант.
• Перейдите в панель «Instance» → «Variants» → добавьте параметры: «Size» с значениями «Small», «Medium», «Large».

Теперь, когда вы меняете размер одного экземпляра — все остальные сохраняют свою логику. Если в одном варианте вы задали Auto Layout с padding 12px, а в другом — 16px, Figma запомнит эти параметры для каждого варианта.

Это особенно полезно для дизайн-систем: один компонент = 10 разных состояний. Никакой дублированной работы. Никаких ошибок в размерах.

Частые ошибки и как их избежать

Даже опытные дизайнеры допускают ошибки, которые разрушают всю адаптивность. Вот самые распространённые:

• Игнорирование Auto Layout — ресайз работает, но элементы съезжают. Решение: всегда включайте Auto Layout для групп, которые должны адаптироваться.
• Неправильные Constraints — например, кнопка прикреплена к левому и правому краю, но не имеет фиксированной ширины. Результат: она исчезает при уменьшении. Решение: задавайте min-width или используйте фиксированные размеры в вариантах.
• Смешивание масштабирования и ресайза — тянете фрейм за угол без Shift, и всё растягивается. Решение: никогда не используйте масштабирование для адаптации — только ресайз фрейма.
• Отсутствие проверки на разных размерах — вы настроили ресайз для iPhone, но не проверили на iPad или маленьком ноутбуке. Решение: создавайте тестовые фреймы с размерами 320px, 768px, 1024px и проверяйте в режиме Preview.

Особенно опасна ошибка: «я сделал ресайз, но не сохранил как компонент». Потом вы меняете текст в одном экземпляре — и он не обновляется в других. Всегда превращайте повторяющиеся элементы в компоненты — это экономит часы.

Экспертное мнение: как ресайз влияет на эффективность команды

«Ресайз — это не про технические навыки, это про мышление. Дизайнер, который не понимает, как работают Constraints и Auto Layout, — это как программист, который пишет код без функций. Он повторяет одно и то же вручную. А это не масштабируемо», — говорит Марина Павлова, Principal Designer в Яндексе.

Она провела внутреннее исследование в 2024 году: команды, где все дизайнеры использовали ресайз с Auto Layout и компонентами, сокращали время на согласование макетов на 58%, а количество багов в прототипах — на 71%.

«Мы начали требовать от новых дизайнеров не только умения рисовать, но и умения настраивать ресайз. И это стало ключевым критерием при найме. Потому что если ты не можешь сделать ресайз — ты не можешь работать в современной команде.»

Её совет: начните с одного экрана. Сделайте карточку продукта с Auto Layout. Сделайте 3 варианта размера. Затем — меню. Затем — форму. Постепенно вы построите систему, которая будет работать сама.

Часто задаваемые вопросы

Заключение

Ресайз в Figma — это не технический приём, а фундаментальный навык современного дизайнера. Он превращает статичные макеты в живые, адаптивные системы, которые легко масштабируются, тестируются и передаются разработчикам. Тот, кто освоит Auto Layout, Constraints и компоненты — не просто делает дизайн. Он создаёт дизайн-систему, которая работает сама.

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

• Всегда используйте Auto Layout для групп элементов, которые должны адаптироваться.
• Настройте Constraints для каждого элемента — это определяет его поведение при изменении размера.
• Превращайте повторяющиеся элементы в компоненты с вариантами — это ускоряет ресайз в десятки раз.
• Никогда не используйте масштабирование для адаптации — только ресайз фрейма.
• Проверяйте ресайз в режиме Preview на разных размерах — это избавит от сюрпризов на этапе разработки.