Как равномерно уменьшить картинку в фигме

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

Почему важно сохранять пропорции при масштабировании

Когда вы изменяете размер изображения без учёта его исходного соотношения сторон (aspect ratio), оно начинает выглядеть искажённым. Круг превращается в овал, лицо человека вытягивается или сжимается. Это не просто эстетическая проблема — в профессиональном дизайне такие ошибки недопустимы. Они снижают доверие к продукту и могут вызвать вопросы у клиентов или команды разработки.
Figma по умолчанию поддерживает сохранение пропорций, но только если пользователь активирует соответствующий режим. В интерфейсе это обозначается специальным значком в виде цепочки между полями ширины и высоты на правой панели свойств (Inspector). Если цепочка замкнута — изменения одного параметра автоматически затрагивают второй. Если разомкнута — вы можете менять ширину и высоту независимо, что и приводит к искажениям.
Сохранение пропорций особенно критично при работе с:

• Аватарками и портретами;
• Логотипами и брендированными элементами;
• Фотографиями товаров в e-commerce;
• Иконками и символами, где геометрия играет ключевую роль.

Методы равномерного уменьшения изображения в Figma

Есть несколько проверенных способов уменьшить изображение пропорционально. Все они работают в реальном времени и совместимы с любыми типами растровых и векторных картинок.

Способ 1: Использование мыши с клавишей Shift

Это самый быстрый и интуитивный метод.

1. Выберите изображение с помощью инструмента «Стрелка» (V).
2. Наведите курсор на один из угловых маркеров изменения размера (не боковых! — боковые меняют только одну сторону).
3. Удерживайте клавишу Shift и потяните за угол внутрь, чтобы уменьшить.
4. Отпустите кнопку мыши и клавишу Shift.

Figma автоматически сохранит соотношение сторон. Этот метод работает независимо от состояния цепочки в Inspector.

Способ 2: Редактирование размеров в правой панели

Более точный подход, особенно полезный при необходимости указать конкретные значения.

• Выделите изображение.
• На правой панели найдите поля «W» (ширина) и «H» (высота).
• Убедитесь, что значок цепочки между ними замкнут.
• Введите нужное значение в одно из полей — второе изменится автоматически.

Например, если изображение имеет размер 800×600 пикселей, и вы хотите уменьшить ширину до 400, высота станет 300 — пропорция 4:3 сохранится.

Способ 3: Комбинированное масштабирование с Alt/Option

Для более тонкого контроля используйте комбинацию клавиш.

• Удерживайте Shift + Alt (Windows) или Shift + Option (macOS).
• Тяните за угол.

Этот способ масштабирует изображение пропорционально относительно центра, а не угла. Полезно, когда нужно, чтобы картинка «сжалась внутрь», не смещаясь по холсту.

Способ 4: Через контекстное меню (для групп и фреймов)

Если изображение находится внутри фрейма или группы, можно использовать опцию «Scale contents».

• Щёлкните правой кнопкой по фрейму с изображением.
• Выберите «Scale contents».
• Задайте процент масштабирования (например, 50%).

Figma применит этот коэффициент ко всем элементам внутри, сохраняя пропорции каждого.

Распространённые ошибки и как их избежать

Даже опытные пользователи Figma иногда допускают ошибки при масштабировании. Вот самые частые из них и пути решения.

Ошибка 1: Тянем за боковой маркер, а не за угловой

При клике на боковые маркеры (слева, справа, сверху, снизу) вы изменяете только одну сторону. Это ломает пропорции, даже если удерживаете Shift. Всегда тяните за углы.

Ошибка 2: Цепочка пропорций разомкнута

В правой панели Inspector значок цепочки может быть разомкнут. Проверяйте его состояние перед вводом значений. Если он разорван, щёлкните по нему, чтобы восстановить связь.

Ошибка 3: Масштабирование через двойной клик по границе

Двойной клик по границе объекта в Figma активирует режим редактирования содержимого (если это текст или фигура). Для изображений это бесполезно. Не путайте действия.

Ошибка 4: Применение Transform без Shift

Инструмент «Transform» (в меню сверху) позволяет свободно растягивать объекты. Без удержания Shift он не блокирует пропорции. Используйте его осознанно.

Продвинутые советы: компоненты, авто-рамки и масштабирование через API

Когда проект становится сложнее, простого масштабирования недостаточно. Вот как применять эти знания в продвинутых сценариях.

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

Если изображение — часть компонента (например, иконка в кнопке), его размер должен быть согласован с другими экземплярами. Лучше всего задать фиксированные размеры в мастер-компоненте. При изменении размеров экземпляра используйте опцию «Constrain» в разделе Constraints, чтобы изображение масштабировалось равномерно.

Авто-рамки (Auto Layout)

В рамках с Auto Layout поведение изображений зависит от настроек:

• Если изображение имеет фиксированный размер — оно не будет масштабироваться.
• Если включено «Fill container» — оно растягивается, но теряет пропорции.
• Чтобы сохранить пропорции, установите режим «Fit» — тогда изображение уменьшится равномерно, оставляя пустые области (letterbox).

Массовое масштабирование через плагины

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

• Batch Image Resizer — позволяет выбрать несколько картинок и задать единый размер.
• Image Tools — предлагает опции сжатия, изменения DPI и пропорционального масштабирования.

Эти инструменты экономят часы работы.

API и скрипты

Figma API позволяет программно изменять размеры изображений. Например, скрипт может найти все изображения в файле и уменьшить их на 50%, сохраняя пропорции:

// Пример на JavaScript
figma.currentPage.selection.forEach(node => {
 if (node.type === "RECTANGLE" && node.fills[0]?.type === "IMAGE") {
 node.resize(node.width * 0.5, node.height * 0.5);
 }
});

Такой подход полезен при автоматизации рутинных задач.

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

Профессиональные дизайнеры и эксперты по Figma подчёркивают, что равномерное масштабирование — это не просто технический навык, а часть визуальной дисциплины.
«Когда вы нарушаете пропорции, вы нарушаете доверие пользователя. Даже если он не осознаёт этого, искажённое изображение вызывает дискомфорт. Поэтому я всегда проверяю, включена ли цепочка пропорций, особенно перед презентацией макета», — говорит Елена Миронова, арт-директор студии BrandFlow.
Другой важный принцип — масштабирование должно быть обратимым. Не сжимайте изображение до 10×10 пикселей, если потом придётся увеличивать. Figma работает с векторными ограничителями, но сама картинка остаётся растровой. При увеличении потерянная детализация не восстанавливается.
Также эксперты рекомендуют:

• Хранить оригиналы изображений вне макета (в отдельном фрейме или странице);
• Использовать компоненты для часто используемых размеров (например, аватар 32×32, 48×48);
• Настроить библиотеку стилей, где указаны стандартные размеры изображений.

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

Заключение

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

• Для равномерного уменьшения всегда используйте угловые маркеры и клавишу Shift.
• Проверяйте состояние цепочки пропорций в панели свойств.
• При работе с группами применяйте функцию «Scale contents».
• Используйте Auto Layout с режимом «Fit» для адаптивных изображений.
• Оптимизируйте изображения заранее — Figma не сжимает файлы при масштабировании.