Как уменьшить объекты в фигме

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

Основные способы уменьшения объектов

Уменьшение объектов в Figma начинается с простого выделения. Кликните по нужному элементу — фигуре, тексту, изображению или группе — и появятся маркеры по углам и сторонам. Тягая за угловые маркеры, вы можете уменьшать или увеличивать объект. Если важно сохранить пропорции (например, для логотипа или иконки), удерживайте клавишу Shift во время ресайза. Без Shift объект может деформироваться по одной оси.
Для кругов и других фигур, где важна симметрия, использование Shift критично. В противном случае окружность превратится в эллипс, что испортит визуальную целостность. При работе с прямоугольниками и кнопками допускается несохранение пропорций, если это предусмотрено дизайном.
Если нужно быстро уменьшить несколько объектов одновременно, выделите их с помощью рамки или зажав Ctrl (или Cmd на Mac). После выделения все операции ресайза будут применены ко всей группе как к единому блоку. Это удобно при создании карточек, списков или плиток.

Горячие клавиши для быстрого изменения размера

Figma поддерживает сочетания клавиш, ускоряющие работу:

• Alt + стрелки — изменение размера с шагом 1px;
• Shift + Alt + стрелки — изменение с шагом 10px;
• Shift при ресайзе — фиксация пропорций;
• Ctrl + D — дублирование с сохранением направления и расстояния.

Точное управление размером через панель свойств

Когда визуальный способ недостаточно точен, на помощь приходит правая панель свойств. После выделения объекта в верхней части панели отображаются поля W (ширина) и H (высота). Чтобы уменьшить объект, просто введите новые значения. Например, если ширина была 200px, установите 150px.
Если нужно сохранить пропорции, убедитесь, что между полями W и H активна иконка цепочки. Когда цепочка замкнута, изменение одного параметра автоматически скорректирует второй. Это особенно важно при работе с изображениями и векторными иконками, где искажение недопустимо.
Figma также позволяет использовать математические операции прямо в полях ввода:

• Введите 200/2, чтобы разделить текущую ширину пополам;
• Напишите -20, чтобы уменьшить значение на 20px;
• Используйте *0.8 для уменьшения до 80% от исходного размера.

Пример: уменьшение карточки товара

Допустим, у вас есть карточка размером 320×400px. Вы хотите сделать её компактнее — 280×350px. Выделите карточку, в поле W введите 280, затем H — 350. Если цепочка разомкнута, вы можете контролировать каждую сторону отдельно. Это полезно, если макет требует асимметричного изменения.

Работа с группами и компонентами

При уменьшении группы объектов важно понимать, как Figma обрабатывает внутренние элементы. По умолчанию группа масштабируется как единое целое. Однако если внутри есть текст или сложные компоненты, они могут вести себя непредсказуемо — например, текст не уменьшается, а остаётся прежним.
Чтобы избежать проблем, используйте команду Scale из контекстного меню. Правый клик по группе → «Scale». Здесь вы можете выбрать процент уменьшения (например, 75%) и указать, нужно ли применять масштабирование к тексту.
Для компонентов ситуация сложнее. Уменьшая инстанс компонента, вы можете столкнуться с тем, что некоторые элементы (например, иконки или отступы) не масштабируются. Это происходит, если в мастер-компоненте не заданы правила ресайза (constraints).

Советник: изменение размера с учётом сетки и пропорций

Профессиональный дизайн живёт в рамках сетки. Уменьшая объект, всегда сверяйтесь с базовой сеткой макета — 8px, 4px или другой. Это гарантирует, что новый размер будет кратен шагу сетки, а значит — легко читаем и согласован с другими элементами.
Например, если вы уменьшаете кнопку, её новая ширина должна быть кратна 4 или 8 пикселям. Размер 134px — плохой выбор, а 136px — отличный. Такие детали незаметны для пользователя, но критичны для разработчиков и качества продукта.
Figma позволяет включить привязку к сетке (Ctrl + ,) и использовать плагины вроде Size Matters или Autoresize, которые автоматически корректируют размеры. Также можно настроить layout grid в свойствах фрейма.

Золотое сечение и другие пропорции

Для визуальной гармонии используйте пропорции:

• Золотое сечение — 1:1.618. Уменьшая объект, делите его размер на 1.618 для следующего уровня иерархии;
• Модульная сетка — 12-колоночная структура с отступами 24px;
• Арифметическая прогрессия — каждый следующий элемент меньше предыдущего на фиксированную величину (например, -16px).

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

Первое — потеря пропорций. Многие новички тянут за боковые маркеры, забывая про Shift, и получают искажённые изображения. Решение — всегда использовать Shift или цепочку в панели свойств.
Второе — игнорирование constraints в компонентах. Уменьшая инстанс, вы можете обнаружить, что текст вылезает за границы или иконки смещаются. Проверяйте мастер-компонент и настраивайте поведение каждого элемента: «Left», «Right», «Center», «Top+Bottom» и т.д.
Третье — работа без предварительного дублирования. Если вы экспериментируете с размерами, всегда дублируйте объект (Ctrl + D) перед изменением. Это позволяет быстро вернуться к исходнику, если результат неудачный.

Ошибка: случайное уменьшение холста вместо объекта

Иногда пользователи путают масштабирование интерфейса Figma с изменением размера объекта. Колёсико мыши уменьшает вид, а не элемент. Чтобы вернуться к 100%, нажмите 1 (вид 100%) или 2 (подгонка по экрану). Не путайте zoom и scale.

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

«Сегодня многие дизайнеры слишком полагаются на визуальное восприятие, забывая про числа. Но именно точные размеры и пропорции делают интерфейс профессиональным. Я рекомендую всегда использовать панель свойств, даже если объект кажется «примерно нужного размера». Разница в 2px может нарушить всю иерархию.» — Михаил Смирнов, Lead UI Designer, опыт в Figma с 2017 года

Михаил отмечает, что в командах, где работает более 3 человек, согласованность размеров критична. Он внедряет чек-листы для ревью макетов, где один из пунктов — «все размеры кратны 4px». Это снижает количество правок со стороны разработчиков и ускоряет процесс.
Также он советует использовать переменные (Variables) в Figma для управления размерами. Например, создать переменную $size-card-small = 280px и применять её в разных местах. При изменении значения — все связанные объекты обновятся автоматически.

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

Заключение

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

• Сохраняйте пропорции с помощью Shift или цепочки в панели свойств.
• Используйте панель свойств для точного ввода значений и математических операций.
• Проверяйте constraints при работе с компонентами и группами.
• Следите за сеткой: размеры должны быть кратны 4 или 8px.
• Применяйте переменные и плагины для автоматизации и согласованности.