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

Плагины Figma давно ожидаемое событие. И вот наконец то они полноценно ворвались в нашу жизнь.

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

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

Где искать плагины Figma

На самом деле все очень просто — плагины находятся слева на панели главной страницы

Figma Plugins paragraph

Нажмите на пункт Plugins и вы окажетесь на странице плагинов

Figma Plugins group

Плагины сгруппированы по группам — рекомендуемые, популярные и установленные. Все плагины которые есть на данный момент вы можете посмотреть нажав на кнопку Browse all plugins.

Установка плагинов

Установить плагины можно двумя способами:

  • На странице всех плагинов нажмите на кнопку Install напротив нужного и плагин будет автоматически установлен, состояние кнопки меняется на Installed, а плагин будет помещен в список группы Installed.

Figma Plugins details

  • На детальной странице плагина — выберите нужный, перейдите на него и нажмите на кнопку Install для установки.

Figma Plugins details

Установка плагина происходит мгновенно. Еще одно нажатие на кнопку инсталляции плагина приводит к его деактивации.

Figma Plugins details

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

Переходим к самим плагинам

Top 8 плагинов Figma

Unsplash

Figma Plugins unsplash

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

Работа с этим плагином крайне проста и приятна как и вся работа с редактором Figma.

Давайте посмотрим на его работу. Выберите плагин — нажмите правой кнопкой мыши в любом месте канваса. Выберите пункт Plugins → Unsplash.

Figma Plugins unsplash

Появится окно плагина.

Figma Plugins unsplash

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

Figma Plugins details

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

Figma Plugins details

Map Maker

Figma Plugins Map Maker

Map Maker позволяет быстро создавать уникальную настраиваемую карту для вашего проекта. В настоящее время он поддерживает Google Maps и Mapbox.

Разберем процесс создания карты на основе Google Maps.

Выберите нужный плагин — Map Maker

Figma Plugins Map Maker

По умолчанию установлена вкладка — Google Maps, она нам и нужна. Перейдите на поле Address и введите нужную локацию, например Paris.

Figma Plugins Map Maker 1 — Вкладка Google Maps, 2 — Адресная строка для ввода названия локации, 3 — Блок Custom Style для ввода JSON кода.

Ниже адресной строки вы можете поменять тип карты и зум на тот который вас устроит.

Теперь самое интересное — стиль карты. Поменять стиль карты можно перейдя по одной из двух ссылок в блоке Custom Style

Figma Plugins Map Maker

Давайте перейдем по первой ссылке Snazzy Map и посмотрим что это и как можно использовать данный сервис.

Figma Plugins Map Maker

Перейдя по ссылке на ресурс Snazzy Map мы видим информационное окно которое гласит что данный сервис не может в полной мере поддерживать функционал Google Maps так как с июля 2019 года компания Google решила взимать с этого сервиса оплату за использования их API. Суммы достаточно большие. Для того чтобы не закрыть сервис и хоть как то оставаться на плаву, руководство сайта было вынуждено урезать самые дорогие функции и тем самым сократить свои расходы, тем более что сервис на данный момент бесплатный.

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

Перейдите по ссылке Google Official Map Style в блоке Custom Style

Figma Plugins Map Maker Выберите Create a Style.

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

Figma Plugins Map Maker

Также можно немного почистить карту убрав лишние мешающие названия, достопримечательности и дороги. Для этого есть специальный фильтр Adjust density of features (регулировка плотности функций)

Figma Plugins Map Maker

Также можно поменять цвета и настроить карту более гибко. Для этого нажмите внизу кнопку More Options.

Figma Plugins Map Maker

Теперь когда карта готова нажмите Finish выйдет следующее окно:

Figma Plugins Map Maker

Нажмите на ссылку — Copy JSON и код скопируется в буфер обмена, это нужно для того чтобы получить код настроенной карты и перенести его в наш плагин. Возвращаемся обратно в Figma и вставляем скопированный код в поле Custom Style.

Figma Plugins Map Maker

Обратите внимание на то как изменилась карта в окне просмотра. Значит все применилось, все работает корректно.

Далее осталось только нажать на кнопку Make Map чтобы применить настроенную карту к нашему блоку который в дальнейшем можно использовать в проекте.

Figma Plugins Map Maker

Я немного уменьшил зум и вот что из этого получилось.

Figma Plugins Map Maker

Charts

Figma Plugins Map Maker

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

Как он работает? Выбираем плагин Charts из выпадающего списка плагинов.

Figma Plugins Map Maker

Получаем вот такое окно

Figma Plugins Map Maker

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

  • Choose chart type — выбираем тип диаграммы
  • Configure — настраиваем конфигурацию, количество линий, точек, начало и конец диапазона данных
  • Preview — окно просмотра

Figma Plugins Map Maker

Можно создавать сколько угодно большое количество разных диаграмм

Figma Plugins Map Maker

А потом настраивать их под свои задачи.

Iconify

Figma Plugins Map Maker

Очень полезный и нужный плагин. Я думаю он должен быть в арсенале любого дизайнера.

Суть плагина вполне проста — быстрый поиск и добавление нужной иконки в SVG формате в ваш проект.

Выбираем плагин Iconify.

Figma Plugins Map Maker

Получаем вот такое окно со всевозможными сборниками иконок, просто огромное количество.

Figma Plugins Map Maker

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

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

Figma Plugins Map Maker

Затем выбранную иконку можно немного преобразовать — повернуть на определенный угол или отзеркалить по вертикали или горизонтали, а также задать нужный цвет.

Autoflow

Один из самых простых и самых популярных на сегодняшний день плагин.

Figma Plugins Map Maker

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

Чтобы создать взаимосвязь достаточно выделить два объекта и выбрать в выпадающем списке плагин Autoflow.

Figma Plugins Map Maker

Небольшой лайфхак: Чтобы каждый раз не выбирать плагин из списка есть сочетание клавиш которое позволяет выбирать последний плагин > которым вы пользовались — Ctrl+Alt+P.

Figma Plugins Map Maker

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

Content Reel

Figma Plugins Content Reel

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

Что входит в состав плагина:

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

Я создал восемь карточек с таким наполнением — аватар, поле имени, поле адреса и электронная почта.

Figma Plugins Content Reel

Задача — получить на всех карточках разный контент. Давайте посмотрим как работает плагин и что он реально может. Начинаем с выбора плагина.

Figma Plugins Content Reel

Получаем вот такое окно.

Figma Plugins Content Reel

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

Figma Plugins Content Reel

Мы рандомно поменяли на восьми карточках имена, адреса и емейлы. Отлично, аватары поменять мы не сможем потому что эта опция еще недоступна, когда ее добавят разработчики можно только гадать, поэтому предлагаю очень простое решение которым я пользуюсь очень давно и довольно успешно — воспользуемся сервисом Random User Generator.

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

Figma Plugins Content Reel

Нам нужно будет восемь разных фотографий пользователей. Теперь возвращаемся в Figma и заполняем аватарки на карточках сохраненными изображениями. Для того чтобы не переносить изображения по одному в Figma есть специальная пакетная вставка, активируется она клавиатурным сокращением Ctrl+Shift+K, далее в открывшемся окне выберите нужные изображения и нажмите открыть. Появится курсор с количеством изображений и превью.

Figma Plugins Content Reel

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

Небольшой итог по плагину:

  • Минусы
    • Контент только на трех языках — Английский, Испанский, Французский, русского языка нет, будем надеяться что появится.
    • Недоступны аватары.
    • Иконки доступны только с оговоркой скачивания и установки шрифта, что тоже является лишним действием.
  • Плюсы
    • Большой выбор тематических полей.
    • Простая настройка.
    • Большой потенциал плагина при условии если авторы возьмутся за него всерьез.

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

Blobs

Figma Plugins Blobs

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

Выбираем плагин Blobs.

Figma Plugins Blobs

Появляется вот такое окно.

Figma Plugins Blobs

И по сути это и есть весь плагин, две настройки — сложность и контраст, количество и там и там ограничено десятью. Давайте посмотрим что может этот малыш.

Figma Plugins Blobs

Еще минута и готово вот такое чудо:

Figma Plugins Blobs

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

Image tracer

Figma Plugins Image tracer

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

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

Выбираем плагин.

Figma Plugins Image tracer

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

Figma Plugins Image tracer

Работает он следующим образом.

Figma Plugins Blobs

Есть еще дополнительные опции по более точной настройке плагина

Figma Plugins Image tracer

Пожалуй самая важная это опция blur она предназначена для сглаживания пикселей и превращение рваной линии в более плавную.

Figma Plugins Image tracer

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

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

Вместо заключения

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

Samurai

Автор статей по дизайну