Как вырезать объект в фигме

Работа с изображениями в Figma

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

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

Для этого нам понадобиться использовать клавиатурные сокращения Shift + H (отразить картинку по горизонтали), Shift + V (отразить по вертикали). Либо использовать в меню дублирующие пункты.

Как вставить картинку в фигме

Самый простой способ – просто перетащить изображение в окно проекта, и оно импортируется со своими оригинальными размерами.Также есть способ вставить через фигуры. Об этом ниже.

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

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

Для этого нам понадобиться:

1. Перенести картинку в проект (см. выше)
2. Создать фигуру по размеру нужно обрезки
3. Выделяем оба слоя, используем клавиатурное сокращение Ctrl + Alt + M – маска готова.

Важно, чтобы в иерархии картинка была выше, чем фигура.

Специально на эту тему я подготовил видео, где я наглядно показываю, как работать с изображениями в Figma.

Как вырезать объект в фигме

Чтобы не пользоваться дополнительными инструментами (Photoshop или онлайн-сервисы) — воспользуемся внутренними возможностями программы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Icons8 Background Remover
2. RemoveBG

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

Как работать с изображениями в Figma

Простая инструкция: как добавить изображение на макет и отредактировать его без «Фотошопа».

Meery Mary для Skillbox

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

Как добавить изображение на макет

Перетащите изображение на макет с рабочего стола или из папки:

Скопируйте изображение сочетанием клавиш Ctrl (⌘) + C и вставьте его в макет, нажав Ctrl (⌘) + V:

Также можно копировать изображения из интернета: нажмите правой кнопкой мыши на любую иллюстрацию в браузере, выберите «Копировать изображение», затем перейдите в Figma и нажмите Ctrl (⌘) + V:

Функцией Place Image можно автоматически поставить изображение сразу туда, где оно должно находиться:

• Создайте несколько произвольных фреймов на макете.
• Нажмите на иконку , выберите пункт File и нажмите на Place Image. Или зажмите клавиши Ctrl (⌘) + Shift + K.
• В появившемся меню выберите любые изображения.
• По очереди добавьте изображения на фреймы. На курсоре отображается миниатюра текущей иллюстрации.

С помощью заливки можно использовать изображение в качестве фона фрейма или фигуры:

• Выберите ваш фрейм или фигуру.
• На панели инструментов в блоке Fill нажмите на цвет и в появившемся меню в верхнем правом углу вместо Solid выберите Image.
• В том же меню нажмите на чёрно-белую картинку и выберите любое изображение на компьютере.

Аналогично можно использовать изображение как заливку обводки. Только вместо блока Fill нужно заходить в блок Stroke.

Настройки изображения

В Figma у любого изображения можно изменить свойства заливки и сделать минимальную коррекцию цвета. Чтобы открыть эти настройки, выделите любую иллюстрацию на макете, затем в блоке Fill нажмите на её миниатюру.

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

Fit — изображение заполняет пространство так, чтобы его было видно целиком.

Crop — обрезает изображение и фиксирует его видимую часть. При изменении размера оно может растянуться.

Tile — всё свободное пространство заполняется копиями изображения. Это свойство очень удобно использовать с паттернами.

Хотя в Figma можно сделать минимальную цветокоррекцию, качественно отредактировать фотографию не получится — для этого лучше идти в Photoshop.

Настройки цветокоррекции в Figma:

• Exposure — экспозиция.
• Contrast — контраст.
• Saturation — насыщенность.
• Temperature — температура.
• Tint — оттенок.
• Highlights — интенсивность света.
• Shadows — интенсивность тени.

Маска слоя

С помощью маски слоя можно придать изображению нестандартную для Figma форму:

• Создайте любую фигуру, выберите изображение на макете и расположите их друг на друге. Проследите, чтобы на панели слоёв изображение было выше фигуры.
• Зажав Ctrl (⌘), выделите фигуру и изображение, затем на панели инструментов нажмите на иконку .
• Чтобы изменить отображаемую часть изображения, просто выделите её на панели слоёв и измените размер на холсте.

Таким же образом изображением можно заполнить что угодно: от нескольких фигур до текста.

Полезные приёмы

Отразить изображение по вертикали можно с помощью горячих клавиш Shift + H. По горизонтали — Shift + V.

Скопировать SVG-иконку с любого сайта в Figma можно через браузер:

• Зайдите на сайт с нужной иконкой, нажмите правую кнопку и выберите «Посмотреть код». Справа откроется панель с HTML-кодом сайта.
• В окне с кодом на панели сверху нажмите на иконку и выберите нужную иконку на сайте.
• В HTML-коде выделится тег <path>, прямо над ним будет <svg> — нажмите на него и скопируйте с помощью сочетания Ctrl (⌘) + C на клавиатуре.
• Зайдите в Figma и нажмите Ctrl (⌘) + V — иконка встанет на макет.

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

Как установить плагин Remove BG:

• Зайдите на страницу плагина и установите его, нажав Install.
• Зарегистрируйтесь на сайте remove.bg.
• На сайте нажмите на иконку профиля и зайдите в панель управления. В панели нажмите на «Ключ API», затем ― на кнопку «Показать» и скопируйте полученный код.
• Зайдите в Figma, нажмите на иконку , перейдите, затем в Remove BG, нажмите на Set API key. В появившееся окно вставьте ключ, который вы взяли с сайта, и нажмите OK.
• Добавьте на макет любую иллюстрацию, нажмите на неё правой кнопкой мыши, перейдите в Plugins → Remove BG → Run. Фон из иллюстрации удалится.

Учтите, что этот способ не подойдёт для финального удаления фона, так как плагин работает не идеально. Но если вам нужно просто показать идею, то Remove BG поможет сэкономить кучу времени.

Больше интересного про дизайн в нашем телеграм-канале. Подписывайтесь!

Больше о Figma

Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.

Как вырезать объект в фигме

Приветствую всех на своем блоге! Сегодня я оставлю заметку о том как просто вырезать любой объект в фигме. Я покажу Вам на примере авокадо. Итак поехали.

Открываем графический редактор Figma. я пользуюсь браузерной версией. Горячими клавишами ctrl + k вставляем наше фото.

Выбираем инструмент Перо

Горячая клавиша P

Пером обводим по контуру

Когда все точки сомкнуты нажимаем Done

Должно получиться вот так

Жмем shift+x

Меняем слои местами, слой с фоном переносится вверх а с вектором вниз как на фото

Выбираем слой с вектором и нажимаем вверху на значок маска (use as mask)

Объект успешно вырезан!

Для перетаскивания объекта выделите оба слоя и объедините в группу клавиши ctrl+g

Здравствуйте! Меня зовут Александр. Я веб-разработчик. Мне нравится верстка, дизайн и программирование и CMS WordPress . В свободное время пишу статьи на тему веб-разработки. Если у Вас есть вопрос Вы можете его задать в контактах ниже