Обрезка изображений в Figma¶

Обрезка изображений в Figma — это набор инструментов графического редактора Figma, позволяющих изменять видимую область растровых и векторных изображений без деструктивного удаления исходных данных. Figma — облачный инструмент для интерфейс-дизайна и прототипирования, работающий в браузере и через десктопное приложение; обрезка (кроп) в нём реализована преимущественно через маски и инструмент «Crop», что отличает её от классических растровых редакторов вроде Adobe Photoshop.

¶Основные способы обрезки

¶Инструмент Crop

Самый прямой способ обрезать фото в Figma — выделить изображение на холсте и выбрать инструмент «Crop» (в русской локализации — «Обрезка») на верхней панели инструментов или через контекстное меню. После активации вокруг изображения появляются ручки, позволяющие задать прямоугольную область видимости. Подтверждение выполняется клавишей Enter или щелчком вне изображения. Исходное изображение при этом не удаляется — скрытая часть сохраняется, и область обрезки можно вернуть или изменить повторно.

¶Маски (Use as mask)

Второй способ — использование маски. Изображение помещается в группу вместе с прямоугольником (или другой фигурой), после чего прямоугольник назначается маской через команду «Use as mask» (Ctrl+Alt+M). Всё, что выходит за пределы фигуры-маски, становится невидимым. Этот метод удобен, когда обрезка должна повторять нестандартную форму или когда изображение нужно вписать в определённый контейнер интерфейса.

¶Заполнение фрейма (Fill)

Третий подход — поместить изображение во фрейм или фигуру и задать для него режим заливки «Fill». Изображение автоматически масштабируется так, чтобы заполнить границы фигуры, а лишние части обрезаются по краям. Позицию видимой области можно уточнить перетаскиванием изображения внутри фигуры.

¶Кадрирование по правилу третей

При использовании режима «Fill» Figma подсказывает композиционное размещение: при перетаскивании изображения внутри фигуры появляются направляющие, делящие область на девять зон по правилу третей. Это упрощает кадрирование портретов и фотографий с выделенным объектом.

¶Масштабирование после обрезки

После обрезки изображение можно масштабировать — при пропорциональном изменении размера фигуры содержимое подстраивается автоматически, сохраняя заданный режим заливки (Fill, Fit, Crop или Tile). Режим «Crop» в свойствах заливки изображения позволяет независимо управлять областью видимости и масштабом содержимого.

¶Особенности работы с компонентами

При работе с дизайн-системами и компонентами Figma обрезка изображений имеет ряд нюансов:

• Изображение, вложенное в компонент, может быть заменено на уровне экземпляра через свойство «Instance swap» или через панель правой кнопки мыши «Change image».
• Маска, заданная в основном компоненте, сохраняется во всех экземплярах, что позволяет унифицировать форму аватаров, карточек и других элементов.
• При замене изображения с сохранением маски Figma автоматически подгоняет новое фото под существующую область видимости.

¶Экспорт обрезанного изображения

После обрезки изображение экспортируется в привычных форматах — PNG, JPG, SVG, PDF — через панель «Export» на правой боковой панели. Экспортируется видимая (обрезанная) область, а не исходный файл. Для пакетного экспорта нескольких обрезанных изображений используется комбинация Ctrl+Shift+E.

¶Ограничения

Figma — векторно-ориентированный инструмент, поэтому обрезка в нём не заменяет полноценную растровую ретушь. Недоступны инструменты вроде «Content-Aware Fill», клонирования штампом или сложной коррекции перспективы. Для таких задач изображение предварительно обрабатывается в Adobe Photoshop, Affinity Photo или подобных редакторах, а готовый результат импортируется в Figma.

¶Историческая справка

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

¶Исторические источники

• Документация Figma Help Center — раздел «Cropping images»
• Документация Figma Help Center — раздел «Fills: Image»
• Figma Blog — обзоры обновлений продукта