Figma как обрезать изображение

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

Самый быстрый способ: Crop

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

1. Выберите изображение на холсте.
2. Нажмите дважды по картинке или откройте режим обрезки через панель инструментов.
3. Потяните углы рамки, чтобы задать новый видимый участок.
4. Подтвердите действие кликом вне изображения или нажатием Enter.

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

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

Обрезка через маску

Иногда figma как обрезать изображение означает не прямоугольный кадр, а скрытие части картинки внутри круга, звезды, скруглённого блока или любой другой формы. Тогда нужна маска.

Алгоритм такой:

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

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

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

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

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

Рабочая последовательность:

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

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

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

Когда какой способ выбрать

Чтобы не путаться, ориентируйтесь на задачу:

• Нужно убрать лишний край без сложной формы — используйте кадрирование;
• Нужна обрезка по кругу, скруглению или фигуре — применяйте маску;
• Нужно вписать изображение в готовый блок — настраивайте содержимое фрейма.

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

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