Как вставить, обрезать и редактировать изображения (картинки, фото) в фигме

Как добавить изображение (картинку или фотографию) в фигму

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

Изменить размер фото можно просто потянув за его уголок. Если при этом на панели Layout нажать на иконку Lock/Unlock aspect ratio, размер картинки будет изменяться пропорционально или непропорционально. Во втором случае часть картинки будет симметрично обрезаться по краям.

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

Обрезать изображение в фигме можно с помощью инструмента Crop, находящегося в разделе Image на правой панели программы:

Потянув за уголки, можно выбрать любую область картинки, которую вы хотите оставить, а остальные части изображения просто скроются. При необходимости их потом можно будет вернуть обратно с помощью этого же инструмента. Для применения результата нужно просто нажать Enter на клавиатуре.

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

Как сделать фото в круге в фигме

Самый простой способ заключается в том, чтобы сначала сделать фотографию квадратной (с помощью метода, описанного выше), а затем на панели Appearance задать ей большой радиус скругления углов. Чтобы картинка стала идеально круглой, этот радиус должен быть не меньше половины ширины/высоты самой картинки.

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

Для этого существует функционал маски. Суть довольно простая: нужно нарисовать требуемую форму с помощью инструмента перо, на панели слоев переместить слой с получившейся фигурой под слоем с картинкой, одновременно выделить оба этих слоя и нажать на кнопку Use as mask в дополнительном меню в на правой панели фигмы.

Если у вас возникли сложности с данным методом, советую посмотреть его в видео-версии урока, там я пошагово показываю как создавать и применять маски с произвольными фигурами к картинкам. Вот пример результата данного метода:

Как удалить фон с фотографии в фигме или вырезать объект

Чтобы убрать фон с фотографии или вырезать основной объект, можно воспользоваться встроенным в фигму искусственным интеллектом. Нужная нам функция так и называется — Remove Background. Найти её можно в разделе Actions на панели инструментов:

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

Чтобы сделать изображение в фигме размытым, его нужно выделить и добавить эффект на панели справа. По умолчанию будет создан эффект тени (Drop Shadow), поэтому нужно в выпадающем списке изменить его на Layer Blur. А если нажать на иконку слева от названия эффекта, можно будет задать необходимую силу размытия:

Как поменять цвет картинки или сделать её чб

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

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

Файлы фигмы автоматически сохраняются в облаке. Но если вы хотите сохранить картинку или фото на свой компьютер, необходимо выделить изображение и экспортировать его. нажав на плюсик в самом низу правой панели программы. Там можно будет выбрать нужный формат — JPG, PNG, PDF или SVG.

Плагины и сторонние сервисы для редактирования фото, улучшения качества, преобразования картинки в вектор

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

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

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