Как поменять размер в фигме

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

Основные методы изменения размера

Изменение размера в Figma начинается с выбора объекта — фигуры, текста, группы или фрейма. После выделения появляются маркеры по краям и углам, которые позволяют тянуть и масштабировать элемент. Это самый быстрый способ, но не всегда самый точный. Для точных значений лучше использовать панель свойств справа, где можно вручную задать ширину (W) и высоту (H).
Если вы хотите изменить размер с сохранением пропорций, удерживайте клавишу Shift при перетаскивании углового маркера. Это особенно важно при работе с логотипами, иконками и изображениями. Без Shift элемент может вытянуться или сжаться, что исказит визуальное восприятие.
Для масштабирования от центра используйте комбинацию Alt + перетаскивание (или Option на Mac). Это удобно, когда нужно равномерно увеличить или уменьшить объект относительно его центра, не сдвигая его положение. Также полезно при создании эффектов наведения или анимаций.

Точные значения и горячие клавиши

Figma позволяет быстро изменять размер с помощью клавиш со стрелками. Нажатие стрелки перемещает объект на 1 пиксель, а с зажатым Shift — на 10 пикселей. Но если вы держите Alt + стрелку, меняется размер объекта: ширина или высота увеличивается/уменьшается на 1 пиксель.

• Ctrl/Cmd + Shift + = — увеличить холст (не сам объект)
• Alt + перетаскивание — масштабирование от центра
• Shift + перетаскивание — сохранение пропорций
• Enter — вход в режим редактирования размеров в панели свойств

Изменение размера групп и фреймов

Группы и фреймы ведут себя по-разному. Фрейм — это контейнер с предопределёнными свойствами, включая размеры. При изменении размера фрейма вложенные элементы могут вести себя по правилам авто-макета или оставаться на месте, если авто-макет отключён.
Группы же просто объединяют объекты. Изменение размера группы визуально масштабирует всё содержимое, но не влияет на внутренние пропорции каждого элемента. Это может привести к искажению текста или иконок. Поэтому для сложных блоков лучше использовать фреймы.

Работа с авто-макетами и пропорциями

Авто-макет (Auto Layout) — один из самых мощных инструментов Figma для управления размерами. Он позволяет создавать адаптивные блоки, которые автоматически изменяют свою высоту или ширину в зависимости от содержимого. Например, кнопка с текстом будет расширяться при добавлении новых символов.
Чтобы включить авто-макет, выделите фрейм или группу и нажмите на иконку «Auto layout» в верхней панели. После этого вы сможете задавать направление (горизонтальное или вертикальное), отступы (padding) и расстояния между элементами (gap).

Как авто-макет влияет на размер

Когда авто-макет активирован, размер фрейма больше не фиксирован. Он становится «обтекаемым» — подстраивается под контент. Вы можете зафиксировать ширину, а высоту оставить автоматической, или наоборот. Это особенно полезно при создании списков, карточек и форм.

• Если вы установите Fixed Width, фрейм не будет меняться по горизонтали, но будет расти по вертикали при добавлении строк.
• При Hug Contents фрейм будет облегать контент, минимизируя пустое пространство.
• Отступы (padding) позволяют контролировать внутренние поля, не затрагивая сами элементы.

Сохранение пропорций при помощи Constraints

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

• Left & Right — элемент растягивается при изменении ширины
• Top & Bottom — аналогично по вертикали
• Center — остаётся по центру
• Left / Right / Top / Bottom — привязывается к одной стороне

Компоненты и экземпляры: как менять размер без потерь

Компоненты — основа систематизированного дизайна в Figma. Когда вы создаёте компонент, вы можете генерировать из него множество экземпляров. Но что происходит, если вы изменяете размер одного из них?
По умолчанию экземпляр наследует размеры оригинала. Однако Figma позволяет делать экземпляры ресайзабельными — то есть изменяемыми по ширине и высоте без нарушения структуры. Для этого в главном компоненте нужно включить опцию Allow instance resize.

Как включить изменение размера экземпляров

1. Выберите мастер-компонент в библиотеке или на странице.
2. В правой панели свойств найдите раздел «Instance properties».
3. Активируйте чекбокс «Allow instance resize».
4. Теперь любой экземпляр можно свободно ресайзить, сохраняя внутреннюю логику (например, авто-макет).

Когда НЕ стоит разрешать ресайз

Не все компоненты должны быть ресайзабельными. Например, иконки, логотипы или сложные карточки с жёсткой структурой могут потерять читаемость при произвольном масштабировании. В таких случаях лучше ограничить размеры и использовать вариации (variants).

• Используйте вариации, чтобы предлагать разные размеры кнопок: small, medium, large.
• Ограничьте ресайз для компонентов, где важна точность: формы, таблицы, навигация.
• Для типографики — применяйте стили текста, а не ручной ресайз шрифтов.

Советы по точности и эффективности

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

Используйте сетку и гайды

Сетка (Layout Grid) и направляющие (Guides) — ваши союзники в борьбе за порядок. Настройте 8px-сетку (или 4px для детализированных проектов), чтобы все элементы выравнивались по единому шагу. Это упрощает изменение размеров и делает интерфейс гармоничным.

Плагины для точного контроля

Не всё можно сделать встроенными инструментами. Плагины расширяют возможности Figma:

• Resize to Content — автоматически подгоняет размер фрейма под содержимое.
• Size Matters — показывает текущие размеры при перетаскивании, даже если панель свойств скрыта.
• Constraints Helper — визуализирует правила привязки, что особенно полезно для новичков.

Работа с несколькими экранами

Если вы проектируете адаптивный интерфейс, используйте Responsive Resize. Этот режим позволяет одновременно изменить размер нескольких элементов с учётом их привязок. Особенно эффективно при переходе с мобильного на десктопный макет.

Экспертное мнение

Профессиональные дизайнеры сходятся во мнении: умение управлять размерами — это базовый, но критически важный навык. Ошибки в этом аспекте ведут к несогласованности, увеличивают время на правки и усложняют работу разработчиков.
Главный принцип — предсказуемость. Элемент должен вести себя одинаково в любом контексте. Для этого используются авто-макеты, constraints и компоненты. Также важно понимать разницу между масштабированием и изменением размера: первое искажает, второе контролирует.

• Используйте числовые значения для ключевых элементов (кнопки, карточки, модальные окна).
• Автоматизируйте повторяющиеся действия через компоненты и плагины.
• Тестируйте поведение элементов при разных размерах — особенно при адаптации под разные устройства.

Вопросы и ответы

Заключение

Управление размерами в Figma — это не просто техническая операция, а часть дизайнерской дисциплины. От того, насколько точно и осознанно вы меняете размеры, зависит качество всего продукта. Используйте сочетание визуальных инструментов и числового контроля, применяйте авто-макеты и constraints, и не забывайте про компоненты.

• Используйте Shift для сохранения пропорций и Alt для масштабирования от центра.
• Авто-макеты и constraints — основа адаптивного дизайна.
• Разрешайте ресайз экземпляров только там, где это безопасно.
• Точность достигается через сетку, гайды и плагины.
• Тестируйте поведение элементов при разных размерах и на разных устройствах.