Как обрезать часть картинки в фигме

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

Зачем обрезать изображение в Figma

Figma — это веб-инструмент для UI/UX-дизайна, где работа с визуальными элементами происходит динамично и часто без привлечения внешних графических редакторов. Обрезка изображений прямо в интерфейсе Figma экономит время, особенно когда нужно быстро адаптировать фото под шаблон или компонент. В отличие от Photoshop, где используется инструмент «Кадрирование», в Figma применяется концепция масок — более гибкий подход, совместимый с векторными и растровыми данными.
Изображения в Figma можно импортировать через drag-and-drop, вставку по URL или загрузку из библиотек. После добавления они ведут себя как обычные объекты, но не теряют своего исходного разрешения. Это означает, что даже если вы «обрезали» картинку, оригинал остаётся доступным при изменении маски. Такой нелинейный рабочий процесс особенно полезен при A/B-тестировании макетов или работе над адаптивными дизайнами.

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

Метод 1: Обрезка через маску (рекомендуемый)

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

1. Выберите инструмент Rectangle, Ellipse или Polygon и нарисуйте фигуру той формы, которую хотите получить после обрезки.
2. Перетащите изображение поверх этой фигуры в панели слоёв (Layers), чтобы оно стало дочерним элементом.
3. Выделите одновременно и фигуру, и изображение (удерживая Shift).
4. Нажмите правой кнопкой мыши и выберите пункт Create Mask или используйте сочетание клавиш Ctrl+Alt+M (Cmd+Option+M на Mac).

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

Как работать с масками эффективно

Figma позволяет вкладывать маски друг в друга, создавая сложные композиции. Например, вы можете использовать круглую маску для аватара, а затем наложить сверху ещё одну маску в виде рамки, чтобы создать эффект бордера. Также можно комбинировать векторные маски с эффектами, такими как тень или размытие.

Пример: создание круглого аватара

• Нарисуйте эллипс диаметром 80×80 px.
• Добавьте изображение лица пользователя.
• Поместите изображение внутрь эллипса в иерархии слоёв.
• Создайте маску — получится идеальный круглый аватар.
• При необходимости скорректируйте положение изображения внутри маски с помощью стрелок на клавиатуре.

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

Метод 2: Использование рамок как контейнеров

Рамки (Frames) в Figma — это не просто контейнеры для группировки элементов. Они также могут служить масками по умолчанию. Если вы поместите изображение внутрь рамки и активируете опцию Clip content, рамка автоматически скроет всё, что выходит за её границы.
Чтобы это сделать:

• Создайте новую рамку нужного размера (например, 160×90 px для миниатюры видео).
• Активируйте Clip content в правой панели свойств (иконка ножниц).
• Перетащите изображение внутрь рамки.
• Отрегулируйте положение и масштаб картинки, чтобы нужная часть была видна.

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

Преимущества и ограничения

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

Метод 3: Кадрирование с помощью инструмента Frame

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

1. Создайте рамку и поместите в неё изображение.
2. Дважды щёлкните по изображению — вы перейдёте в режим редактирования содержимого.
3. В этом режиме вы можете перемещать и масштабировать изображение, оставляя видимой только нужную часть.
4. Выйдите из режима — изменения сохранятся.

Этот метод похож на кадрирование в Instagram: вы двигаете картинку, пока нужный фрагмент не окажется в центре. Главное — включённый параметр Clip content.

Когда использовать этот метод

Такой подход идеален, когда:

• Вы работаете с готовыми сетками (например, 4:3 или 16:9).
• Необходимо быстро показать разные варианты компоновки (например, крупный план vs общий вид).
• Вы создаёте прототипы и хотите имитировать поведение реального приложения.

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

Ошибки и как их избежать

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

Ошибка 1: Изображение не маскируется

Если при выборе «Create Mask» ничего не происходит, проверьте:

• Правильно ли выделены два слоя: фигура и изображение.
• Находится ли изображение выше фигуры в панели слоёв (при создании маски порядок важен).
• Не является ли сама фигура уже маской (в Figma нельзя вкладывать маски напрямую).

Ошибка 2: Потеря качества при масштабировании

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

Ошибка 3: Сложности при экспорте

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

• Размер экспорта соответствует видимой области.
• Не экспортируются невидимые слои.
• При необходимости используется опция «Export as PNG with transparency».

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

Обрезка изображений в Figma — это не просто техническая операция, а часть визуальной стратегии. Профессионалы рекомендуют всегда думать о масштабируемости и переиспользовании. Лучше создать один компонент с маской, чем десять отдельных обрезанных изображений.
Используйте именованные стили для фигур-масок: например, «Mask / Circle / 40px» или «Mask / Card / 16:9». Это ускорит работу команды. Также полезно применять плагины вроде «Image Crop» или «Auto Crop», которые автоматизируют рутинные действия.
Главный принцип: сохраняйте гибкость. Не удаляйте оригиналы, не «замораживайте» маски. Дизайн меняется — и ваша система работы должна быть готова к этому.

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

Заключение

Обрезка изображений в Figma — это не просто функция, а ключевой элемент эффективного дизайнерского workflow. Благодаря системе масок и рамок, вы можете быстро адаптировать визуальный контент под любые требования, не покидая редактора. Главное — понимать разницу между временными и постоянными изменениями, а также использовать нелинейный подход, чтобы сохранить гибкость проекта.

• Предпочтительный способ обрезки — маскирование через фигуры.
• Рамки с Clip content — быстрое решение для прямоугольных областей.
• Всегда сохраняйте оригинальное изображение внутри маски.
• Используйте векторные фигуры для нестандартных форм обрезки.
• Тестируйте экспорт, особенно при работе с анимацией и SVG.