Плагины Figma: как установить и подобрать плагин под свои задачи

Графический редактор Figma — один из универсальных инструментов для дизайнеров. Однако его базового функционала может не хватить, если нужно воплотить в жизнь нестандартные решения и идеи. Тогда на помощь приходят плагины: они расширяют возможности редактора, помогают упростить рутинные задачи и сэкономить кучу времени. Сегодня мы рассмотрим самые востребованные модули Figma, узнаем, что они умеют, и разберемся, как с ними работать. 

Типы плагинов Figma

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

Плагины для фона

Начнем с плагинов Фигма для фона. Эти инструменты помогают за несколько кликов удалить или поменять фон на изображениях. Модули работают на основе технологии искусственного интеллекта: они автоматически выделяют нужный объект на картинке, а затем очищают фон позади него. 

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

Отдельные модули (например, Background Image Generator) умеют преобразовывать фон в код CSS. Правда, это можно проделать только с простыми бэкграундами, которые состоят из градиента, цвета или повторяющихся элементов. 

Плагины для изображений

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

Они умеют:

• Быстро добавлять в макет нужные изображения.
• Автоматически заполнять контентом фотогалереи. 
• Добавлять стильные эффекты и фильтры к картинкам.
• Превращать растровые изображения в векторные. 
• Создавать палитру на основе цветов фотографии.
• Оптимизировать вес картинок без потери качества. 
• Создавать анимации из изображений. 

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

Плагины для векторной графики

Эти плагины — прекрасные помощники не только для новичков, которые пока не умеют работать с векторами, но и для профи. Они позволяют за пару кликов создавать простые фигуры, генерировать новые объекты и редактировать рисунки. 

Что умеют плагины Фигма для векторной графики:

• создавать объекты вроде волн, клякс и разных фигур;
• добавлять 3D-измерение к векторным картинкам;
• накладывать на изображение эффекты и комбинировать их друг с другом;
• создавать сложные геометрические фигуры на основе математических формул;
• добавлять в макет готовые векторные изображения из фотостоков. 

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

Плагины для шрифтов и текста

Если вы создаете дизайны для сайтов или журналов, то обратите внимание на плагины Фигма для текста. Они помогают быстро подобрать нужный шрифт и протестировать макет, даже если контент еще не готов. 

В этой категории есть и довольно специфичные инструменты, которые можно использовать для работы не только с текстом, но и с другими элементами. Например, To Path. Он размещает текст и разные объекты по контуру фигур. Далее мы рассмотрим подробнее принцип его работы. 

Плагины для мокапов

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

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

Как установить плагин в Фигме

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

Добавить плагин в Figma можно двумя способами: прямо из рабочей области или со страницы сообщества (Community). Оба варианта простые, поэтому справится даже новичок. 

Способ 1. Установка из рабочего проекта. 

Чтобы добавить модуль из рабочей области, кликните на значок «Ресурсы» в верхнем меню или нажмите комбинацию горячих клавиш Shift+I. Затем выберите вкладку «Plugins». 

Введите название нужного плагина в строке поиска или выберите модуль из списка «From Community». 

Нажмите на название модуля, чтобы перейти на вкладку с его описанием. Далее кликните на кнопку «Run». Плагин тут же запустится на рабочем пространстве.  

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

Способ 2. Установка через Explore Community.

Откройте главную страницу в программе Figma и нажмите на «Explore Community» в верхнем правом углу.

Промотайте страницу вниз до раздела «By the Community, for the community», нажмите на фильтр «All resources» и выберите значение «Plugins». Программа покажет все плагины, которые доступны для установки. 

Вы можете отсортировать их по популярности (Trending) или дате добавления (Recent). 

Надпись «in-app purchases» рядом с некоторыми плагинами означает, что вы можете приобрести подписку на них или оплатить дополнительные функции в приложении Figma. 

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

Перед вами откроется страница со всей информацией. Для установки дополнения кликните на кнопку «Try it out» справа.

Эта же кнопка доступна в общем разделе со всеми плагинами. 

Готово! Дополнение автоматически добавится в редактор и будет доступно к работе. 

Топ-25 бесплатных плагинов Фигма в 2024

О возможностях модулей мы узнали, с установкой тоже разобрались. Теперь переходим к самому интересному — подборке самых востребованных плагинов Figma. В ней вы найдете инструменты для разных целей и проектов. 

Remove BG

Полезный плагин, который автоматически вырезает фон с изображения. Инструмент бесплатный, но для работы с ним нужно зарегистрироваться на сайте remove.bg и получить API ключ. Этот уникальный код необходимо указать в окне настроек плагина. 

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

Ссылка для скачивания: Remove BG 

Pattern Hero

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

Ссылка для скачивания: Pattern Hero

Unsplash

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

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

Ссылка для скачивания: Unsplash 

Image Palette

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

Минус инструмента в том, что он выделяет только 5 главных цветов, поэтому всю палитру картинки собрать не получится. 

Ссылка для скачивания: Image Palette

Image Tracer

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

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

Ссылка для скачивания: Image Tracer

Noise and Texture

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

Ссылка для скачивания: Noise & Texture

Autoflow

На первый взгляд очень простой, но крайне полезный плагин. Один из лидеров по количеству установок. 

Autoflow соединяет объекты макета друг с другом с помощью стрелочек или линий. Связи можно подписать, например, указать «Шаг 1», «Шаг 2».

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

Инструмент пригодится, если вы хотите показать какой-то процесс поэтапно (например, заказ товара с момента оплаты до доставки) или продемонстрировать хронологию событий. 

Ссылка для скачивания: Autoflow 

To Path

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

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

Ссылка для скачивания: To Path 

Blobs

Этот плагин умеет создавать кляксы с помощью векторной графики. Настроек всего две: Uniqueness (Уникальность) и Complexity (Сложность). При изменении параметров можно сразу посмотреть, как будет выглядеть фигура. 

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

Ссылка для скачивания: Blobs 

Coolors

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

Ссылка для скачивания: Coolors

Geometric

Интересный модуль, который умеет создавать замысловатые математические фигуры и узоры. Например, с его помощью можно нарисовать сложный орнамент, мандалу, цветок. 

В настройках доступны 6 типов формул для построения фигуры: «Polar Rose», «Trigonometric Function», «Polygon», «Spiral», «Superellipse» и «Astroid». Вы можете регулировать параметры каждого объекта: количество углов, сторон, сложность и так далее. Готовый рисунок будет зависеть от типа расчета и параметров, которые вы укажете. 

Ссылка для скачивания: Geometric 

Get Waves

Простой плагин для векторов в Фигме. Умеет генерировать SVG-волны. Для создания объекта нужно выбрать тип кривой линии и настроить сложность изгибов. Готовую векторную волну можно редактировать по своему усмотрению: менять цвет, деформировать, добавлять новые изгибы, перемещать, накладывать фильтры, эффекты и так далее. 

Ссылка для скачивания: Get Waves 

Morph

Полезный плагин для работы с векторной графикой. Добавляет к изображениям разные эффекты: Skeuomorphic, Neon, Glitch, Reflection, Glass, Gradient. Их можно использовать по отдельности или комбинировать друг с другом. 

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

Ссылка для скачивания: Morph 

Humaaans for Figma

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

С помощью Humaaans for Figma можно за пару минут подобрать нужное изображение для дизайна, а не отрисовывать все с нуля или искать на фотостоках. Фильтров и категорий в нем нет, картинки можно найти в общей галерее или через поиск. Пока в каталоге только изображения людей, отдельных частей тела, цветов и некоторых предметов интерьера. Но разработчики обещают пополнять коллекцию. 

Ссылка для скачивания: Humaaans Humaaans for FigmaFigma

Vector Maps

Модуль для создания векторных карт стран и отдельных регионов. Пригодится, если нужно показать локацию, но вы не хотите использовать стандартный вариант вроде Google Maps или Яндекс Карт. 

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

Ссылка для скачивания: Vector Maps

Charts

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

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

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

Ссылка для скачивания: Charts

Iconify

Плагин с большой коллекцией иконок. В нем представлено более 100 наборов, что в сумме дает около 100 000 разных объектов на любой вкус и цвет. Все иконки разбиты по категориям, есть сортировка и удобный поиск по хештегам и ключевым словам. 

Каждый объект можно редактировать: менять размер в процентном соотношении, перекрашивать отдельные элементы, деформировать и так далее. 

Ссылка для скачивания: Iconify 

Mockup

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

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

Ссылка для скачивания: Mockup 

Lorem Ipsum

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

Для генерации нужно создать текстовый слой и указать в настройках Lorem Ipsum количество параграфов, предложений или слов, которые нужно добавить. Шрифт и размер текста можно поменять с помощью стандартных параметров Figma. 

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

Ссылка для скачивания: Lorem Ipsum

Content Reel

Этот плагин схож с предыдущим Lorem Ipsum, но его функционал более широкий. Content Reel умеет добавлять в макет не только случайный текст, но и другие типы контента: фотографии, фальшивые адреса и номера телефонов, списки, отзывы и так далее. 

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

Ссылка для скачивания: Content Reel

Better Font Picker

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

Важно: плагин показывает только шрифты, которые уже установлены в системе на вашем ПК. 

Ссылка для скачивания: Better Font Picker 

Wireframe 

Плагин с одной из самых больших библиотек прототипов для сайта. Для создания макета нужно запустить файл и собрать из SVG-заготовок каркас будущего дизайна. Инструмент полностью бесплатный, коллекция вайрфреймов постоянно пополняется. 

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

Ссылка для скачивания: Wireframe

LilGrid

Модуль помогает автоматически упорядочить элементы по сетке. Для этого нужно выделить объекты, задать ширину отступа и количество столбцов, а затем нажать «Применить». Если ничего не выделять, то инструмент выровняет сразу все элементы верхнего уровня на странице. 

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

Ссылка для скачивания: LilGrid 

HTML To Design

Модуль умеет преобразовывать любой веб-сайт в макет Figma. Это можно сделать буквально за пару кликов: запустите плагин и укажите адрес ресурса, дизайн которого вы хотите изменить. Дальше инструмент все сделает сам: импортирует и преобразует код в макет, загрузит изображения, создаст слои. 

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

В бесплатной версии можно импортировать 12 проектов каждые 30 дней. Если нужно больше, то придется переходить на платную подписку Pro Plan стоимостью $15/месяц. 

Ссылка для скачивания: HTML To Design

Figma to WordPress

Этот плагин поможет вам экспортировать дизайн из редактора Figma и перенести его на CMS (Система Управления Контентом) Wordpress. Модуль полностью бесплатный и не требует знаний кода. 

Ссылка для скачивания: Figma to Wordpress

Заключение

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