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

Бесплатные плагины для удаления фона у изображений в Figma

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

1.3K показов
18K открытий

Удалить фон можно с помощью разных онлайн-сервисов, программ и плагинов. Однако у многих из них есть определенные ограничения, например:

• нужна регистрация и API;
• бесплатно убрать фон можно только у определенного количества изображений;
• после удаления фона ухудшается качество изображений;
• нельзя удалить фон у изображений, имеющих высокое разрешение и большой размер;
• нужно выбирать фон и вырезаемый объект вручную и т.д.

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

• Icons8 Background Remover
• Unbackground
• BENZIN (нужна регистрация)

Все три плагина убирают фон достаточно быстро и качественно, но иногда срабатывают некорректно (убирают лишнее или убирают не всё что нужно).

Я обычно пробую вырезать фон всеми тремя плагинами и выбираю наилучший вариант. Иногда приходится использовать маски, внешние сервисы или Фотошоп. Но об этом в другой раз.

А какие инструменты для удаления фона используете вы?

Экспорт в Figma. Как сохранять в Фигме (PNG, JPG, PDF, SVG, MP4, GIF)

Чтобы экспортировать элементы, выделите их в списке слоев и нажмите на «+» в разделе Export в правом окне инструментов. После этого появится окно с настройками экспорта, в котором вы можете выбрать размер, дополнение к названию (Suffix) и формат файла.

Видео: экспорт в Figma


Тег video не поддерживается вашим браузером

Как экспортировать элементы в один слой

За один слой Figma считает группу или фрейм. Если у вас есть несколько элементов и вы хотите, чтобы они экспортировались как одно изображение (например PNG), объедините их в одну группу (cmnd + G).

Если вы выделите несколько отдельных элементов, они экспортируются как разные файлы

Вы можете экспортировать элементы сразу в нескольких расширениях — для этого в разделе Export нажмите еще раз «+» и укажите дополнительные форматы. То есть вы можете выгрузить изображения сразу как svg и png, и в любых других комбинациях.

Как указать разрешение

В окне разрешения вы можете либо указать кратность — 1X, 2X и т.п. Это значение, на которое будет умножено фактическое разрешение сторон экспортируемой группы/фрейма/элемента.

Либо вы можете указать ширину стороны — высоты или длины. 512w — означает ширину 512 пикселей, 512h — высоту. Вы можете указывать свои значения, либо выбрать из предустановленных вариантов.

Презентация

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

Экспорт области экрана

Если вам требуется экспортировать только часть вашего проекта (по действию похоже на «Ножницы» в Windows и скриншот части экрана в Mac), воспользуйтесь инструментом Slice. Подробнее читайте здесь.

Сохранение файла проекта

Вы также можете сохранить весь файл на локальный диск, об этом читайте здесь.

Экспорт в PDF одним файлом

Дополнительная опция Export Frames to PDF выгружает все найденные на странице фреймы в один PDF.

Как использовать экспорт в один PDF читайте здесь.

Экспорт в видео и GIF

Для экспорта в видео есть несколько плагинов: читайте здесь.

Как сохранять в Фигме: форматы JPG, PNG, PDF, SVG, FIG

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

• JPG — самый популярный формат. Подходит для сохранения любых изображений, фотографий, макетов и т.д.
• PNG — формат подходит для картинок с прозрачным фоном.
• SVG — векторный формат. Подходит для экспорта иконок, иллюстраций, логотипов и т.д.
• PDF — если нужно создать какой-либо документ или презентацию.
• FIG — внутренний формат Figma, для сохранения на компьютер.
• Массовый экспорт — подойдет, если нужно сохранить сразу много картинок, фото, иконок или других элементов в представленных форматах выше.

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

Быстрая инструкция по экспорту файлов в Фигме

Любое изображение, картинку, фото, фрейм, макет, файл или проект целиком можно экспортировать с помощью функции экспорта. Выберите нужный элемент и нажмите напротив надписи «Export» иконку «+». После этого вы сможете выбрать нужный формат.

Нажав на надпись «Prewie» вы можете сделать предварительный просмотр экспортируемого элемента. Чтобы сохранить элемент на компьютер нажмите на кнопку «Export НАЗВАНИЕ ВЫБРАННОГО ЭЛЕМЕНТА».

Изменение масштаба экспортируемых файлов

Если хотите сохранить проект размерами в 2 раза меньше, то стоит выбрать другой масштаб. Изначально стоит 1X — это значит, что ваш проект будет сохранятся один к одному.

Если для макета размерами 1920 x 1000 px, поставить значение 0.5X, то масштаб сохраненного файла будет в два раза меньше (960 x 500 px). Аналогично объект увеличится в 2 раза, если поставить 2X.

Сохранить проект или картинку в Figma в формате JPG

Чтобы сохранить любой объект, проект или дизайн макет в Figma выделите его. К примеру возьмем первый экран Landing Page. В правой панели нажмите на иконку плюсика напротив надписи «Export». Выберите из списка формат JPG. После этого нажмите на кнопку экспорта и выберите место для сохранения на компьютере.

Сохранение из фигмы файлов в формате PNG

Выберите изображение или картинку для экспорта. Для наглядности возьмем изображение женщины, которая расположена в круге. Нажмите плюс рядом с надписью «Export» в правой панели и выберите формат PNG из списка.

Если нажмем на экспорт и сделаем предпросмотр нажав на надпись «Prewie», то будет видно, что вокруг изображения появился фон в виде шахматной доски. Это означает прозрачность.

Экспорт в формате SVG

Чтобы сохранить элементы из фигмы в формате SVG, выберите элемент. В правой панели нажмите + напротив «Export» и нажмите на кнопку экспорта. Выберите место для сохранения на рабочем столе или компьютере.

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

Для примера экспортируем несколько моих работ и создадим небольшое портфолио (подойдет для отправки заказчику).

1. Чтобы сделать экспорт в PDF с множеством страниц нажмите на меню «гамбургер» слева, сверху.
2. Выберите «File» —> «Export Frames to PDF» и сохраните на рабочий стол.

Важное примечание: в этом случае ничего не нужно выделять. Экспортируются все созданные вами ранее фреймы в вашем из вашего проекта.

Экспорт в PDF выбранных элементов:

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

Как сохранить проект в Фигме в формате FIG (внутренний формат)

Импорт файлов в Figma в формате «.fig»

Файл в формате «.fig» можно загрузить в фигму, если перейти во все ваши проекты раздел «Drafts» и перетащить к остальным проектам. Также есть иконка «Import» сверху, справа.

Массовый экспорт из Figma

Как называть файлы, чтобы сохранить их в разные папки при экспорте

Если вы сохраняете файлы для разработки сайтов, то лучше называть их на английском языке. Например «Woman», «Illustration» и т.д.

Если хотите сохранить файл в отдельную папку то переименуйте слой следующим образом:

• 1/Wooman
• 2/Landing Page
• 3/Illustration

Файлы сохранятся в отдельные папки на вашем компьютере с названиями «1», «2», «3».

Далее поговорим о форматах и для каких элементов они подходят.

Важное дополнение:

Если вы хотите передать макет вашему заказчику, то нет необходимости сохранять всё на компьютер и отправлять (это прошлый век). Проще поделиться ссылкой на ваш проект. Это можно сделать нажав на кнопку сверху, справа «Share» (1) и скопировав ссылку (2).

Также можно поделиться вашим проектом в режиме презентации. Для этого нажмите на иконку «Play», сверху, справа. Затем нажмите на кнопку «Share prototype» и скопируйте ссылку нажав на «Copy link»

P.S. В этой статье вы узнали о том, как сохранять файлы в Figma в различных форматах.

Хотите получить бонусный урок быстрому созданию дизайн макетов Landing Page в Figma? Жмите на эту ссылку и получите 24 раздела для прототипирования и дизайна Landing Page в Figma.

P.S. Проект и автор не связан с компанией Figma (Not affiliated with Figma).

Почему изображение из Figma экспортируется с фоном?

Собственно есть макет, в нем SVG-фигура. При её экспорте (SVG или PNG, без разницы) на ней почему-то отображается фон. В чем может быть дело?

• Вопрос задан более трёх лет назад
• 16546 просмотров

Комментировать

Решения вопроса 1

Dymok @UnluckySerivelha Автор вопроса

Проблема была в этой галочке (настройки экспорта):

Ответ написан более трёх лет назад

Комментировать

Нравится 1 Комментировать

Ответы на вопрос 1

TimurMukushev @TimurMukushev

И еще, хотел бы добавить то, что можно экспортировать не убирая галочку, при этом фон будет прозрачным. Для этого нужно картинку поставить в формат png, потому что в jpg и svg она сохранится с белым фоном

Ответ написан более трёх лет назад

Комментировать

Нравится Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

• Figma

Как сделать утончающуюся рамку | линию в фигме?

• 1 подписчик
• 18 нояб.
• 31 просмотр

• Figma

Почему часть моих проектов в figma стала доступна другому аккаунту?

• 1 подписчик
• 08 нояб.
• 74 просмотра