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

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

Основные инструменты для растягивания фото

Figma предлагает несколько способов изменения размера изображений, каждый из которых подходит под определённую задачу. Основной инструмент — это рамка (frame), содержащая изображение, и её маркеры изменения размера. При выделении любого объекта по углам и сторонам появляются 8 маленьких квадратов — это маркеры. Перетаскивая их, можно увеличивать или уменьшать ширину и высоту.
Для точного контроля над размерами используйте панель свойств справа. Там отображаются текущие значения ширины (W) и высоты (H). Вы можете ввести нужные цифры вручную, что особенно полезно при работе с макетами, требующими строгих параметров. Это исключает погрешности, связанные с глазомером.
Кроме того, Figma поддерживает горячие клавиши для быстрого масштабирования. Например, зажатие клавиши Shift при перетаскивании маркеров фиксирует пропорции изображения. А комбинация Alt + перетаскивание позволяет масштабировать объект относительно его центра, а не угла.

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

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

Как растянуть изображение без искажения

Одна из самых частых проблем — искажение изображения при изменении размера. Это происходит, когда ширина и высота меняются независимо, нарушая оригинальные пропорции. Чтобы избежать этого, необходимо использовать режим пропорционального масштабирования.
В Figma активируйте его, удерживая клавишу Shift во время перетаскивания угловых маркеров. Система автоматически блокирует соотношение сторон (aspect ratio), и изображение растягивается равномерно. Также можно вручную рассчитать коэффициент и применить его к обоим параметрам.
Если вы хотите заполнить фрейм изображением без белых полей, но без искажений, воспользуйтесь функцией Fill Mode. В панели свойств найдите раздел «Image fill» и выберите один из режимов: Cover, Contain, Fill, Tile, Fit Height, Fit Width.

Настройка Fill Mode шаг за шагом

1. Выделите фрейм с изображением.
2. В правой панели найдите раздел «Image fill».
3. Нажмите на значок изображения рядом с заливкой.
4. Выберите нужный режим: Cover, Contain и т.д.
5. При необходимости отрегулируйте положение с помощью маркеров внутри фрейма.

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

Констрейнты (constraints) — это механизм, который определяет, как элемент ведёт себя при изменении размера родительского фрейма. Они особенно важны при создании адаптивных макетов и прототипов для разных устройств.
Представьте, что вы создали карточку товара с изображением. При изменении ширины карточки вы хотите, чтобы фото всегда оставалось по центру и растягивалось пропорционально. Для этого нужно установить констрейнты на изображение.
В правой панели свойств найдите раздел Constraints. По умолчанию стоит значение «Left & Top». Измените его на «Center» по горизонтали и вертикали, если нужно центрирование, или «Scale» — если изображение должно масштабироваться вместе с фреймом.

Типы констрейнтов и их применение

• Left / Right — элемент прижимается к левой или правой стороне.
• Top / Bottom — привязка к верху или низу.
• Center — центрирование по оси.
• Scale — масштабирование вместе с родителем.
• Left & Right / Top & Bottom — растяжение по одной оси.

Автолейаут (Auto Layout) усиливает эффект. Если изображение находится внутри фрейма с Auto Layout, его размеры можно привязать к содержимому или задать фиксированные/гибкие значения. Например, установите «Hug contents» для автоматической подстройки или «Fill container» для растягивания на весь доступный объём.

Сохранение качества при масштабировании

Одна из ключевых особенностей Figma — векторная основа. Однако изображения, вставленные в проект (PNG, JPG, SVG), являются растровыми или статичными векторами. При масштабировании вверх качество может ухудшиться, особенно если исходник низкого разрешения.
Figma не добавляет новые пиксели при увеличении — она просто растягивает существующие. Поэтому важно использовать изображения с запасом по разрешению. Например, если финальный размер — 400×300 пикселей, загружайте оригинал минимум 800×600.
SVG-файлы в этом плане выигрывают: они масштабируются без потерь. Но даже в SVG могут быть встроенные растровые слои — проверяйте перед импортом.

Рекомендации по качеству

• Используйте изображения с разрешением выше, чем требуется в макете.
• Для иконок и логотипов отдавайте предпочтение SVG.
• Избегайте многократного увеличения одного и того же изображения.
• Проверяйте результат в режиме 100% масштаба просмотра.

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

Новички часто сталкиваются с проблемами, которые легко решаются знанием базовых принципов. Одна из распространённых ошибок — растягивание изображения через Fill → Fill, что приводит к искажению. Вместо этого нужно использовать Cover или Contain.
Другая ошибка — отсутствие констрейнтов в адаптивных макетах. Без них при изменении размера экрана изображение остаётся на месте, нарушая композицию. Убедитесь, что каждый элемент имеет чётко определённое поведение.
Также часто забывают про порядок слоёв. Если изображение находится под другими элементами, его нельзя выделить мышью. Используйте панель слоёв слева для быстрого доступа.

Чек-лист перед финализацией макета

• Проверены ли пропорции изображений?
• Установлен ли правильный режим заливки (Cover/Contain)?
• Настроены ли констрейнты для адаптивности?
• Соответствует ли качество изображений требованиям экспорта?
• Протестирован ли макет на разных размерах экрана?

Экспорт и совместимость после растягивания

После растягивания изображения важно корректно выполнить экспорт. Figma позволяет экспортировать как отдельные слои, так и целые фреймы. При экспорте изображение будет иметь тот размер, который оно имеет в макете, а не исходный.
Выберите формат: PNG для прозрачности, JPG для фотографий, SVG для векторов. Укажите масштаб — 1x, 2x, 3x — в зависимости от целевого устройства. Например, для Retina-экранов используйте 2x.

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

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

Заключение

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

• Используйте Shift для пропорционального масштабирования.
• Выбирайте режим Fill (Cover/Contain) вместо простого растягивания.
• Настройте констрейнты для адаптивных макетов.
• Экспорт делайте с учётом целевого устройства и разрешения.
• Проверяйте качество изображений на всех этапах работы.