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

21 Figma-плагин для работы с изображениями

Ando — AI Copilot for Designers

Insert Big Image — сохраняет высокое качество больших изображений при вставке в Figma

Insert Big Image

Downsize — сжимает и меняет размеры изображений, чтобы файлы быстрее загружались и занимали меньше памяти

Downsize

TinyCanvas — автоматически сжимает изображения одним щелчком мыши с помощью API TinyPNG

TinyCanvas

TinyImage JPG/PNG Compressor — сжимает экспортируемые из Figma изображения до 90% без потери качества и упаковывает в архив

TinyImage JPG/PNG Compressor

Icons8 Background Remover — удаляет фон с одного или нескольких изображений одновременно

Icons8 Background Remover

PixCut remove background

Autocrop — автоматически обрезает лишнее пространство у изображения

Autocrop

Image Cutter — разрезает любое изображение на части

Image Cutter

Image Grid — рандомно размещает изображения по сетке

Image Grid

Image Extractor — находит все изображения в файле и собирает их в одном месте

Image Extractor

Image Editor — помогает редактировать изображения с помощью настроек цвета и фильтров. Можно сохранять и загружать свои пресеты

Image Editor

Batch Image Editor — помогает настроить экспозицию, контрастность или насыщенность сразу нескольких изображений в один клик

Batch Image Editor

Mini Photo Editor — упрощает быструю обрезку, поворот, отражение, фильтрацию, точную настройку и редактирование изображений

Mini Photo Editor

Photopea — Photoshop внутри Figma — позволяет редактировать фотографии, применять эффекты, фильтры, добавлять текст, обрезать или менять размер изображений

Photopea

Recognize — распознаёт текст с картинки на 24 языках

Recognize

Text From Image — распознаёт и копирует текст с изображения

Text From Image

Export Original Images — экспортирует картинки из макетов в оригинальном разрешении и без обрезки

Export Original Images

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

Sources

Image Tracer — трассирует чёрно-белые изображения

Moodz — позволяет быстро создать мудборд из выбранных изображений

Moodz

Как в Figma экспортировать изображение с прозрачностью?

Помогите, пожалуйста, понять, почему изображение, которое в программе не имеет фона, при экспорте в формате PNG обретает фон?

Например, изображение казана вверху уже при экспорте показывает, что фон прозрачный

Но это же изображение в контексте макета экспортируется с белым фоном (ХОТЯ на макете у него фон прозрачный)

И ещё одно изображение, которое на макете прозрачное , но при экспорте появляется белый фон

• Вопрос задан более года назад
• 2158 просмотров

• Facebook
• Вконтакте
• Twitter

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

Как вырезать в фигме: объект, изображение, картинку, фото, фон

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

Прежде всего отмечу, что эта инструкция подойдет для простых объектов. Если вам нужно удалить фон у сложного объекта (например где есть волосы), то это не поможет и лучше воспользоваться фотошопом. Используйте этот приём для простых объектов с прямыми сторонами: коробка, стул, стена и т.д.

Пошаговая инструкция как вырезать объект на фото с помощью пера в фигме

Шаг №1. Выберите инструмент перо (Peen tool) в панели инструментов сверху.

Шаг №2. Увеличьте фотографию нажав на клавиатура на «+». Поставьте точку с помощью пера.

Шаг №3. Обведите объект по контуру рисуя новые линии.

Если на объекте есть скругление, то поставьте точку и потяните в сторону.

Чтобы появилась возможность рисовать прямые линии, нажмите на «Shift» и на точку после скругления.

Шаг №4. После того как вы обведете объект вокруг, сделайте заливку фигуры. Это можно сделать нажав напротив справа надписи Fill на иконку плюса.

Результат после заливки контура вокруг будет таким. На время отключите этот слой нажав в левой панели на иконку глаза.

Шаг №5. При необходимости обведите объект внутри, как показано на скриншоте выше.

Сделайте заливку внутренней обводки.

Шаг №6. Поменяйте цвет у внутренней заливки. Включите отключенный ранее слой с первым контуром.

Шаг №7. Выберите контуры нарисованные пером и нажмите на надпись «Substract selection».

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

Шаг №8. Поместите получившуюся фигуру вниз фото в слоях. Также выделите фото и фигуру и нажмите на иконку маски «Use as mask».

В результате мы получаем объект, без заднего фона сзади.

Шаг №9. При необходимости отредактируйте получившийся объект, выбрав одну из векторных точек. Также можно отредактировать фото, чтобы оно вписывалось в окружающий фон вокруг. Как это сделать, смотрите в видео выше.

Если хотите сохранить изображение к себе на рабочий стол, то выбирайте для этого формат PNG. Это позволит сохранить прозрачный фон у фотографии. Вот инструкция по экспорту изображений из фигмы.

Таким образом вы можете удалять задний фон у фото. Безусловно, это сработает для простых объектов. Если вам нужно вырезать более сложный объект, то лучше воспользуйтесь фотошопом. Почему? Простой потому что фигма подходит больше для работы с векторной графикой.

Бесплатный Фотошоп в Figma. Как такое возможно?!

Мы все знаем, что Figma – это векторный редактор. Но значит ли это, что создание дизайна для мобильных приложений и сайтов в ней, может обойтись без растровых изображений, а следовательно, коллажей и ретуши? НЕТ! Если раньше для обработки нужной фотографии нужно было открывать ее в Photoshop. Обрабатывать там и затем загружать в Figma, то теперь все изменилось. Каким образом? Я расскажу в данной статье.

Речь пойдет о бесплатном плагине PhotoPea от одноименного графического редактора. Они уже давно ассоциируют себя как онлайн Фотошоп. Пришло время убедиться, что это не шутки.

Как работает бесплатный Фотошоп в Figma. Установка плагина.

Откройте сайт Figma.com. Если вы еще не зарегистрировались и не создали свой первый проект в этом редакторе, советую вам сделать это, используя статьи с сайта «Дизайн в жизни».

• Figma – первое знакомство
• Создаем первый проект в Figma.

Это не займет много времени.

В новом проекте Figma создайте фрейм для десктопа или другого устройства.

Поместите на рабочий фрейм фотографию — File – Place Image.

Place Image in Figma

Выделите фото, щелкнув по нему левой клавишей мыши.

Перейдите в список плагинов редактора File – Plugins – Find More Plugins и найдите плагин для редактирования фото PhotoPea.

Подключение новых плагинов в Figma

Нажмите RUN, чтобы запустить его.

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

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

Рабочее окно PhotoPea

Здесь вы найдете:

• Привычные инструменты рабочей среды Photoshop
• Практически полный набор необходимых фильтров
• Смарт слои и маски
• Урезанный инструмент Camera Raw
• Кривые
• Стандартные параметры наложения
• Корректирующие слои и маски
• Исправление перспективы Vanishing Point и многое другое.

Здесь вы не найдете:

• Временной шкалы
• Функции заполнение с учетом содержимого
• Инструмента Perspective Warp
• Выделение объекта
• И другие расширенные возможности Photoshop

По сути PhotoPea — это качественный, бесплатный аналог Photoshop

Будьте готовы к тому, что привычные горячие клавиши сработают не так как в Photoshop. Например, Ctrl (Cmd) + T откроет новую вкладку браузера, а не активизирует режим трансформации. Поэтому рекомендую изучить их прежде, чем начинать работу. Информацию о них вы найдете в пункте меню плагина Больше – Горячие клавиши.

Как вырезать фон в плагине PhotoPea онлайн

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

Выберите инструмент «Волшебная палочка» и выделите фон на фотографии.

Выделение с помощью волшебной палочки в PhotoPea

Инвертируйте выделение с помощью команды Выделить – Инвертировать и выберите на панели инструментов кнопку Уточнить край.

Выделение объекта на фото онлайн

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

Вырезаем волосы на фото онлайн

Нажмите на OK, чтобы применить результат.

Теперь для того, чтобы кадрированный силуэт девушки оказался на нашем фрейме в Figma, сохраните результаты и закройте плагин. Файл – Сохранить.

Сохрание вырезанного фото в Figma

Кстати, вы можете скачать PSD исходник со всеми слоями на свой компьютер, если выберите — Сохранить PSD.

Имейте ввиду, после закрытия окна плагина все слои будут утеряны и при следующем открытии изображения в PhotoPea, уже отредактированное фото станет исходным.

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

Дизайн постера в Figma

Этого же результат можно было добиться, оставаясь в плагине или самом редакторе PhotoPea онлайн. Но нам интересно было посмотреть, как работает связка Figma и редактор растра PhotoPea. По сути мы получили мощный инструмент для работы с вектором и растром в одном окне.

PhotoPea + Figma. Растр + вектор.

Если вы хотите больше узнать, как работать в Figma — переходите в раздел со статьями для этого редактора на сайте «Дизайн в жизни»

ЧИТАЙТЕ ТАКЖЕ

Растр в вектор – 7 способов трассировки. Для тех, кто еще не знает, чем отличается растр от вектора.

Заключение

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

Коллажи и ретушь более сложного уровня также по плечу в PhotoPea. Особенно для тех представителей старой гвардии, кто начинал изучать Photoshop с его более ранних и не таких навороченных версий.