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

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

Чтобы уменьшить изображение в Figma, выберите объект и потяните за угол с зажатым Shift для сохранения пропорций, либо задайте точные размеры в правой панели. Для снижения веса при экспорте используйте настройки формата и качества.

Содержание статьи:

Базовое масштабирование изображений
Как масштабировать несколькими способами
Точное изменение размера через панель свойств
Шаги для точного уменьшения изображения
Оптимизация при экспорте: как уменьшить вес файла
Настройки масштаба при экспорте
Сохранение пропорций и работа с aspect ratio
Как использовать маски для контроля пропорций
Распространённые ошибки и как их избежать
Чек-лист перед экспортом изображения
Экспертное мнение
Вопросы и ответы
Заключение

Базовое масштабирование изображений

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

Для равномерного масштабирования важно использовать клавишу Shift. Если её зажать во время растягивания, Figma автоматически сохранит исходные пропорции изображения. Без Shift можно получить искажённую картинку — например, круг станет овалом.

Если вы работаете с векторными изображениями или SVG, масштабирование не влияет на качество. Но с растровыми файлами (JPG, PNG) всё сложнее: уменьшение допустимо, а увеличение приведёт к пикселизации. Поэтому всегда начинайте с изображения высокого разрешения.

Полезно знать: При перетаскивании изображения с зажатой клавишей Alt вы создадите его копию. Это работает и при масштабировании — удобно для сравнения разных размеров.

Как масштабировать несколькими способами

Мышь + Shift: самый быстрый способ, если нужна пропорциональность.
Клавиши стрелок: после выбора изображения нажмите Ctrl/Cmd + стрелки для тонкой настройки размера (по 1 пикселю).
Панель трансформации: в правом верхнем углу интерфейса Figma отображаются X, Y, W, H — здесь можно вручную указать нужные значения.

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

Когда требуется конкретный размер — например, иконка 48×48 px — ручной способ масштабирования не подходит. Здесь на помощь приходит правая боковая панель (Inspector). Выберите изображение, и в разделе «Design» найдите поля Width (W) и Height (H).

Введите нужные цифры. Если значок цепочки между W и H активен, пропорции будут сохранены. Отключите его, если нужно изменить ширину и высоту независимо. Это полезно при работе с баннерами или фиксированными сетками.

Figma также поддерживает относительные единицы. Например, можно ввести «50%» — система сама рассчитает новое значение на основе оригинала. Однако такой функционал доступен только при использовании Auto Layout или компонентов.

«Всегда проверяйте пропорции после ввода чисел. Иногда дизайнеры случайно отключают линковку и портят соотношение сторон.» — Мария Козлова, UX-дизайнер, 7 лет в Figma

Шаги для точного уменьшения изображения

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

Оптимизация при экспорте: как уменьшить вес файла

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

После выбора изображения или фрейма нажмите кнопку «Export» в правой панели. Появится список параметров: формат (PNG, JPG, SVG, WebP), качество, разрешение и масштаб. Именно эти настройки решают, будет ли файл 500 КБ или 50 КБ.

Для фотографий лучше использовать JPG с качеством 60–80%. Это почти не заметно визуально, но значительно снижает вес. PNG подходит для изображений с прозрачностью, но он тяжелее. WebP — современный формат, который сочетает качество и малый размер, но требует поддержки браузером.

Формат	Когда использовать	Пример сжатия (оригинал 1 МБ)
JPG	Фотографии, иллюстрации без прозрачности	200–400 КБ
PNG	Логотипы, иконки, элементы с прозрачностью	600–900 КБ
WebP	Веб-проекты с поддержкой нового формата	150–300 КБ
SVG	Векторная графика, масштабируемые элементы	до 50 КБ

Настройки масштаба при экспорте

Figma позволяет экспортировать изображение в нескольких размерах одновременно. Например, можно задать @1x, @2x и @3x — это стандарт для мобильных устройств с разным DPI. Но если нужен только один вариант, выберите @0.5x для уменьшения вдвое.

Полезно знать: Экспорт в @0.5x уменьшает как размер холста, так и вес файла. Это эффективный способ получить миниатюру без потери структуры.

Сохранение пропорций и работа с aspect ratio

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

Автоматическое сохранение пропорций активируется через иконку цепочки в панели свойств. Также можно использовать комбинацию Shift + перетаскивание. Оба метода работают одинаково, но первый даёт большую точность.

Если вы работаете с сеткой или колонками, лучше заранее вычислить нужное соотношение. Например, 16:9 для видеообложек или 1:1 для аватарок. Затем, задавая размеры, сверяйтесь с этим значением.

«Я всегда создаю прозрачный прямоугольник с нужным aspect ratio и использую его как маску. Это помогает точно позиционировать изображения.» — Алексей Волков, продукт-дизайнер, Figma Ambassador

Как использовать маски для контроля пропорций

Нарисуйте фрейм нужного размера (например, 300×300 px).
Поместите изображение внутрь фрейма.
Щёлкните правой кнопкой по изображению и выберите «Use as Mask».
Теперь изображение будет обрезано по границам фрейма, но при этом останется масштабируемым.

Такой подход часто используется в карточках товаров или профилях пользователей, где важно единообразие.

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

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

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

Ещё одна ошибка — игнорирование настроек экспорта. Многие просто нажимают «Export» без выбора формата, получая PNG там, где достаточно JPG. Это увеличивает размер архива и замедляет загрузку сайта.

Полезно знать: Чтобы не терять оригиналы, создайте страницу «Assets» в своём файле Figma и храните там все исходники. Назовите её «[DO NOT DELETE] Originals».

Чек-лист перед экспортом изображения

Проверено ли соотношение сторон?
Выбран ли оптимальный формат (JPG/PNG/WebP)?
Установлено ли нужное качество (особенно для JPG)?
Не забыт ли масштаб (1x, 0.5x и т.д.)?
Сохранён ли оригинал изображения?

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

«Сегодня многие дизайнеры забывают, что Figma — не просто редактор, а инструмент для подготовки production-ready ресурсов. Уменьшение изображения — это не только визуальная задача, но и техническая. Я рекомендую использовать плагины типа “Image Compressor” или “Resize to Fit”, чтобы автоматизировать процесс.» — Анна Петрова, главный дизайнер в продуктовой команде Delivery Club, 9 лет опыта

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

Один из новых трендов — использование переменных в Figma. С выходом Figma Variables появилась возможность создавать компоненты с динамическими размерами. Например, кнопка может менять ширину в зависимости от текста, а иконка — подстраиваться под неё.

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

Можно ли уменьшить изображение без потери качества?

Да, если вы уменьшаете растровое изображение — качество не теряется. Наоборот, оно может выглядеть чище за счёт сглаживания пикселей. Проблемы возникают только при увеличении.

Почему после уменьшения картинка стала размытой?

Скорее всего, вы увеличили изображение после уменьшения. Figma не может восстановить пиксели. Также размытие возможно при экспорте в низком качестве или при использовании сжатия JPG выше 80%.

Как уменьшить группу изображений одновременно?

Выделите несколько объектов с помощью Shift + клик, затем потяните за угол с зажатым Shift. Все элементы масштабируются пропорционально относительно центра выделения.

Можно ли автоматизировать уменьшение изображений?

Да, с помощью плагинов. Например, «Batch Image Resizer» позволяет применить один размер ко всем выбранным изображениям. Есть и более продвинутые решения с настройкой формата и качества.

Что делать, если изображение уменьшилось, но не экспортируется нужного размера?

Проверьте настройки экспорта: возможно, стоит масштаб 1x, а нужно 0.5x. Также убедитесь, что вы экспортируете именно тот фрейм, который был изменён, а не родительский контейнер.

Заключение

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

Главное — помнить, что Figma даёт контроль на всех уровнях: от пикселя до процесса экспорта. Используйте сочетание ручных и автоматических методов, следите за форматами и не теряйте оригиналы.

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

Всегда используйте Shift или цепочку для сохранения пропорций.
Выбирайте формат экспорта в зависимости от типа изображения.
Храните оригиналы, чтобы избежать потери качества при масштабировании.
Применяйте маски и фреймы для контроля расположения и обрезки.
Автоматизируйте рутину с помощью плагинов, если работаете с большим количеством изображений.

⚠️ Дисклеймер — нажмите, чтобы развернуть

Материалы, опубликованные в разделе «Блог» на сайте RU DESIGN SHOP (rudesignshop.ru), носят исключительно информационный и ознакомительный характер и не являются руководством к действию, финансовой рекомендацией, медицинской услугой, ветеринарным назначением либо рекламой товаров и услуг, включая азартные игры. Публикации не содержат призывов к участию в азартных играх и не направлены на продвижение соответствующих операторов.

Безопасность применения товаров и веществ: при использовании строительных материалов, бытовой химии, пестицидов и агрохимикатов необходимо строго следовать инструкциям производителя и действующему законодательству Российской Федерации, включая Федеральный закон РФ от 19.07.1997 № 109-ФЗ «О безопасном обращении с пестицидами и агрохимикатами».

Упоминание товарных знаков, брендов и организаций носит исключительно информационный характер и не означает наличие партнёрских отношений или одобрения со стороны правообладателей.

Материалы, содержащие сведения о медицинских, ветеринарных или косметических средствах, представлены в справочных целях и не являются медицинской консультацией или назначением. Перед применением рекомендуется обратиться к врачу, ветеринарному специалисту или иному сертифицированному профессионалу.

Возрастные ограничения: материалы, содержащие сведения о продукции категории 18+, включая алкоголь или азартные игры, предназначены исключительно для совершеннолетней аудитории и публикуются в информационных целях.

Правовая ответственность: решения, принятые на основе опубликованной информации, пользователь принимает самостоятельно и на свой риск; редакция и авторы несут ответственность в пределах, установленных законодательством Российской Федерации.

Редакция не допускает публикаций, содержащих пропаганду экстремизма, терроризма, наркотических средств или суицида; подобные материалы подлежат немедленному удалению.

Упоминание организаций с ограниченным статусом: компания Meta Platforms Inc. (социальные сети Facebook и Instagram) признана экстремистской организацией решением суда РФ, её деятельность запрещена на территории Российской Федерации; любые упоминания приводятся исключительно в информационных целях.

Авторские права и источники: информация собирается из открытых источников; её актуальность указывается на дату публикации и может изменяться.

Изображения и иллюстрации используются на условиях, разрешённых правообладателями. При возникновении претензий редакция готова оперативно рассмотреть обращение и внести необходимые изменения.

Персональные данные и cookies: сайт использует cookies и обрабатывает персональные данные пользователей в соответствии с Федеральным законом № 152-ФЗ «О персональных данных» и Политикой конфиденциальности RU DESIGN SHOP.

Мнения авторов могут не совпадать с позицией государственных органов или коммерческих организаций, упомянутых в материалах.