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

В Figma уменьшение изображения — это базовая, но важная операция, необходимая при работе с макетами. Сделать это можно несколькими способами: через масштабирование с помощью инструмента «Frame» или напрямую изменяя размеры слоя с изображением. Главное — сохранить пропорции и качество.

Основные способы уменьшения изображения

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

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

Для более точного контроля используйте правую панель свойств. Там отображаются текущие ширина (W) и высота (H) изображения. Вы можете вручную ввести меньшие значения. Например, если исходный размер 400×300 пикселей, установите 200×150 для уменьшения вдвое. Figma автоматически масштабирует содержимое без потери качества, поскольку работает с векторными и растровыми данными на уровне слоёв.

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

Шаги: как уменьшить изображение вручную

1. Откройте проект в Figma и найдите нужное изображение на холсте.
2. Щёлкните по нему левой кнопкой мыши, чтобы выделить.
3. Подведите курсор к одному из угловых маркеров (они станут синими).
4. Зажмите клавишу Shift и потяните внутрь, чтобы уменьшить с сохранением пропорций.
5. Отпустите мышь и клавишу, когда достигнете нужного размера.

Как сохранить пропорции при изменении размера

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

По умолчанию, при перетаскивании за углы с зажатым Shift, Figma сохраняет соотношение сторон (aspect ratio). Это поведение можно проверить в настройках: откройте меню «Preferences» → «Canvas» → «Resize objects». Убедитесь, что опция «Constrain proportions by default» активирована. Это гарантирует, что все изменения размера будут пропорциональными, даже если вы забудете нажать Shift.

Если вы работаете с растровыми изображениями (JPG, PNG), особенно с низким разрешением, чрезмерное увеличение после уменьшения может вызвать пикселизацию. Однако при уменьшении риск потерь минимален — Figma использует алгоритмы сглаживания, аналогичные bicubic resampling.

Пример: работа с аватаркой пользователя

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

Работа с изображениями в фреймах и группах

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

Если изображение находится в Auto Layout Frame, изменение его размера может повлиять на соседние элементы. Figma автоматически пересчитывает расстояния. Чтобы избежать смещений, временно отключите Auto Layout (через правую панель) или работайте с изображением отдельно.

При группировке (Group) все объекты масштабируются вместе. Если вы хотите уменьшить только изображение, а не текст или иконку рядом — разгруппируйте (Ctrl+Shift+G), произведите изменения, затем снова сгруппируйте.

Случай: адаптация баннера под мобильный экран

Вы разрабатываете баннер 1200×400 пикселей для десктопа и хотите создать мобильную версию 375×200. Решение — использовать компоненты. Создайте основной компонент, затем скопируйте его как экземпляр. Уменьшите фрейм и изображение внутри, сохранив текст и кнопки пропорционально. Figma позволяет масштабировать каждый элемент независимо, если они не привязаны жёстко.

Советы по качеству и оптимизации

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

Figma поддерживает PNG, JPG, SVG и GIF (без анимации). Для иконок и логотипов используйте SVG — они масштабируются без потерь. Для фотографий — JPEG с балансом качества и размера файла. Не загружайте изображения больше 4096×4096 пикселей — это может замедлить работу.

После уменьшения изображения проверьте его на разных масштабах холста (например, 50%, 100%, 200%). Иногда артефакты становятся видны только при увеличении. Также следите за тем, чтобы не было лишних отступов или обрезанных элементов.

Оптимизация перед загрузкой

• Сожмите изображения с помощью инструментов вроде TinyPNG или Squoosh.app.
• Используйте правильное разрешение: 72 ppi достаточно для экранов.
• Называйте файлы понятно: avatar-user.jpg, banner-home-mobile.png.
• Не используйте скриншоты напрямую — обрезайте и оптимизируйте их заранее.

Типичные ошибки и как их избежать

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

Первая ошибка — изменение размера без учёта сетки и гайдлайнов. В результате элементы теряют выравнивание. Решение — включите сетку (View → Show Grid) и используйте привязку (Snap to Grid). Также можно задавать фиксированные отступы через Auto Layout.

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

Третья — игнорирование режима «Fill» при работе с фреймами. Если изображение установлено как фон (Fill), его нельзя уменьшить стандартным способом. Нужно либо конвертировать в объект (Convert to Object), либо использовать режим «Fit» или «Cover» в настройках заливки.

Проверочный чек-лист перед уменьшением

• Выделено ли изображение? Проверьте, не кликнули ли вы по тексту или форме.
• Активирован ли Shift при перетаскивании?
• Сохранены ли пропорции? Сравните ширину и высоту.
• Находится ли изображение в группе или Auto Layout? При необходимости разгруппируйте.
• Проверили ли вы результат на 100% масштабе?

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

Анна отмечает, что в её команде принята практика создания «референсных фреймов» — отдельных страниц с типовыми размерами изображений: аватарки, баннеры, иконки. Это позволяет быстро копировать и масштабировать элементы без ошибок.

Она также рекомендует использовать переменные (начиная с 2025 года Figma активно развивает эту функцию) для хранения стандартных размеров. Например, переменная $avatar-small = 48px. Такой подход делает дизайн-систему более гибкой и предсказуемой.

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

Заключение

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

Главное — действовать осознанно. Используйте сочетание ручного масштабирования и точного ввода значений. Не забывайте про пропорции, привязку и подготовку исходников. Современные возможности Figma, включая Auto Layout, компоненты и переменные, позволяют автоматизировать многие процессы.

• Всегда используйте Shift при перетаскивании, чтобы сохранить пропорции.
• Для точности задавайте размеры вручную в правой панели свойств.
• Работайте с изображениями вне групп и Auto Layout, если нужно независимое масштабирование.
• Оптимизируйте изображения до загрузки в Figma.
• Используйте компоненты и переменные для единообразия в проектах.