Как обрезать картинку в Figma — 3 способа

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

Давай разбираться как можно вырезать фото в Фигме. Поехали!?

Мы рассмотрим три способа. Каждый под разные типы картинок и ситуаций.

Первый способ — с помощью инструмента заливка

Если стоит задача сделать что-то вроде такого??, то обрезаем следующим образом.

В данном случае сделать такую красоту можно в два клика, имея заранее заготовленную фигуру. Смотри видеоинструкцию ниже.

Кстати, фигуру я создал с помощью плагина Blobs — рекомендую.

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

Второй способ — с помощью инструмента маска

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

Чтобы обрезать картинку в Figma с помощью маски нам нужно создать фигуру с помощью инструмента Pen. Сделать заливку этой фигуры, а затем создать маску.

Итак, по порядку.

1. Создаем фигуру с помощью инструмента Pen

2. Затем эту фигуру заливаем инструментом Fill, после чего меняем местами в панели слоев так, чтобы слой с фигурой был под слоем фотографии. После чего выбираем оба слоя и нажимаем на кнопку Use as mask сверху ??

Ура, готово!:)

Третий способ — с помощью плагинов

Да-да. Иногда обрезать фотографию проще с помощью плагина. Это уместно когда тебе надо отделить картинку от фона, особенно хорошо этот способ подойдет, если фон без контрастных деталей.

Плагины, которые я использую для удаления фона:

1. Icons8 Background Remover
2. RemoveBG

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

Всем приятного пользования и крутых интерфейсов ??