Как в фигме растянуть изображение непропорционально

В Figma изображение можно растянуть непропорционально с помощью инструмента «Frame» или при прямом изменении размеров через панель свойств. Главное — отключить привязку к соотношению сторон (lock aspect ratio), иначе масштаб будет сохраняться автоматически.

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

Почему Figma по умолчанию сохраняет пропорции

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

Как проверить, что замок отключён

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

Если замок закрыт — кликните по нему один раз. После этого вы сможете изменять ширину и высоту независимо.

Пошаговое руководство: как растянуть изображение непропорционально

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

Шаг 1: Импортируйте изображение

1. Перетащите файл изображения (JPG, PNG, SVG и др.) прямо на холст Figma.
2. Или используйте меню File → Place image (Ctrl+Alt+K / Cmd+Option+K).
3. Изображение появится на слое как отдельный объект.

Шаг 2: Отключите привязку пропорций

• Выделите изображение кликом мыши.
• В правой панели найдите раздел «Size».
• Кликните по значку замка между полями W и H, чтобы разблокировать его.

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

Шаг 3: Измените размеры

Вы можете изменять размер двумя способами:

1. Через поля ввода: введите нужные значения в W и H вручную. Например, установите W = 400, H = 200, даже если исходное соотношение было 1:1.
2. Через мышь: зажмите Shift (если нужно избегать привязки к сетке) и потяните за угловые или боковые маркеры. Удержание Shift обычно блокирует пропорции, но если замок уже разблокирован — пропорции не будут сохраняться.

Альтернатива: использование изображения как заливки

Если вам нужно более гибкое управление, поместите изображение внутрь фигуры как fill:

1. Создайте фигуру (прямоугольник, круг и т.д.) с помощью инструментов Shape.
2. В правой панели перейдите в раздел Fill.
3. Выберите тип заливки — Image, затем загрузите или перетащите изображение.
4. Теперь изменяйте размеры фигуры — изображение будет растягиваться вместе с ней, без сохранения пропорций.

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

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

Даже опытные пользователи Figma иногда сталкиваются с проблемами при попытке непропорционального растяжения. Большинство из них связаны с непониманием логики работы системы или невнимательностью к деталям интерфейса.

Ошибка 1: Замок пропорций не отключён

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

Ошибка 2: Работа с группой вместо изображения

Если изображение находится внутри группы, изменение размеров всей группы не повлияет на соотношение сторон самого изображения. Вам нужно выделить именно объект изображения, а не родительский элемент.
Решение:

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

Ошибка 3: Ожидание изменения качества при растяжении

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

• Используйте изображения с высоким разрешением (минимум 2x от целевого размера).
• Для критичных элементов рассмотрите использование SVG-графики.

Ошибка 4: Неправильное использование Constraints в фреймах
Если изображение находится внутри Auto Layout-фрейма или имеет установленные constraints (например, «Scale»), его размер может автоматически корректироваться при изменении родительского контейнера. Это может мешать ручному управлению.
Решение:

• Выделите изображение.
• В правой панели найдите раздел Constraints.
• Установите «Left & Top» или «Center», чтобы отключить масштабирование.

Продвинутые методы и скрытые возможности

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

Использование плагинов для управления изображениями

Figma поддерживает множество плагинов, которые расширяют возможности работы с графикой. Например:

• Unsplash — позволяет быстро вставлять изображения с правильным разрешением.
• Image Resizer — даёт больше контроля над размерами и форматами.
• Content Reel — удобен для хранения и быстрой вставки изображений с нужными параметрами.

Эти инструменты могут автоматически отключать пропорции или предлагать пресеты для растянутых форматов.

Анимация и преобразования через компоненты

Если вы создаёте интерактивный прототип, можно использовать непропорциональное растяжение как часть анимации. Например:

1. Создайте два состояния одного компонента: нормальное и растянутое.
2. Во втором состоянии измените размеры изображения без сохранения пропорций.
3. Свяжите кадры в прототипе с переходом через Smart Animate.

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

Работа с масками и clipping

Иногда вместо растяжения проще использовать маску. Создайте фигуру нужной формы, поместите изображение поверх и примените маску (Mask). Изображение будет «обрезано» под форму, создавая иллюзию растягивания.
Преимущества:

• Не теряется качество оригинала.
• Легко редактировать — просто двигайте изображение под маской.
• Подходит для сложных форм: овалов, многоугольников, кривых.

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

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

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

Заключение

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

• Всегда проверяйте состояние замка пропорций в правой панели.
• Для большей гибкости используйте изображения как fill внутри фигур.
• Избегайте сильного увеличения низкокачественных изображений.
• Рассматривайте маскирование как альтернативу растяжению.
• Применяйте искажения только при наличии дизайнерского обоснования.