8 полезных плагинов для Figma, которые существенно ускорят работу

Рассказываем про плагины для Figma, автоматизирующие рабочую рутину.

Особенности плагинов в Figma

Команда Figma очень бережно относится к своему детищу и прислушивается к мнению сообщества. Благодаря такому взаимодействию в середине июля 2019 года была выпущена бета-версия редактора с поддержкой плагинов. А уже в начале августа презентовали обновленную Figma со встроенными плагинами.

Любой разработчик или дизайнер, знающий базовый HTML и JavaScript, мог подать заявку и принять участие в разработке плагинов.

Все плагины в Figma разработаны на общих принципах:

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

В начале августа 2019 года Figma презентовала обновленный продукт, встроенные плагины для Figma представляли их авторы-разработчики.

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

Степан Степанов

Автор статей по дизайну. В веб-дизайн пришел в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил верстку. Время от времени публикует переводы на Хабре.


Где находятся плагины

Откройте программу, авторизуйтесь под своим Google-аккаунтом, перейдите на главную страницу редактора Figma. Слева на панели увидите пункт Plugins (он находится сразу под Drafts).

Как найти плагины в Figma

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

Так выглядят списки всех доступных плагинов

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

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

Философия FIgma — в простоте, поэтому установка плагинов простая и понятная для любого пользователя.

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

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

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

Плагин легко как установить, так и удалить

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

Toп-8 плагинов для дизайнера

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

  • Unsplash — плагин для быстрого автозаполнения блоков фотографиями.
  • Map Maker — плагин для добавления карт.
  • Charts — плагин для визуализации данных.
  • Iconify — плагин для иконок.
  • Autoflow — плагин, который визуализирует связи между объектами.
  • Content Reel — плагин для наполнения макета сайта контентом.
  • Blobs — плагин, делающий симпатичные кляксы.
  • Image tracer — плагин, который умеет переводить растр в вектор.

Unsplash

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

Окно плагина Unsplash

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

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

Запускаем Unsplash в Figma

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

Окно плагина Unsplash

Выделите все карточки на холсте и выберите любую тематику (у нас в примере портреты).

Заполняем карточки портретами

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

Заменяем конкретный портрет на пейзаж в пару кликов

Map Maker

Плагин для добавления карт

Плагин Map Maker

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

Выберите плагин Map Maker.

Выбираем Map Maker из списка

По умолчанию установлена вкладка Google Maps, она нам и нужна.

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

1 — вкладка Google Maps, 2 — адресная строка для ввода названия локации, 3 — блок Custom Style для ввода JSON-кода

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

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

Стиль карты может быть разным

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

Информационное окно предупреждает об урезанных функциях карты в Snazzy Map

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

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

Посмотрим, что предлагается в Custom Style по ссылке Google Official Map Style.

Окно Google Official Map Style

Нажмите Create a Style. Теперь вы можете подобрать нужный стиль карты.


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


Выбираем универсальный стиль карты Silver

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

Убираем лишние подробности с карты

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

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

Когда карта готова, нажмите Finish, появится следующее окно:

Настройки карты можно скопировать и вставить в свой проект

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

Возвращаемся обратно в Figma и вставляем скопированный код в поле Custom Style.

Карта изменилась

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

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

Применяем изменения к проекту

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

Готовый вариант карты, который пойдет в проект

Charts

Плагин для визуализации данных

Плагин Charts

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

Как он работает?

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

Выбираем Charts

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

Окно настройки плагина Charts

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

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

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

Диаграммы и графики в Charts

Iconify

Плагин для иконок

Плагин Iconify

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

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

Выбираем Iconify

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

Доступные для скачивания иконки в Iconify

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

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

Подбираем иконку GitHub и меняем ее под наш проект

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

Autoflow

Плагин, визуализирующий связи между объектами

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

Плагин Autoflow

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

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

Связываем объекты с помощью Autoflow

Чтобы каждый раз не выбирать из списка, воспользуйтесь сочетанием клавиш Ctrl+Alt+P. Оно позволяет активировать последний плагин, которым вы пользовались.


Связь между объектами в Autoflow

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

Content Reel

Плагин для наполнения макета сайта контентом

Плагин Content Reel

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

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

Наполнение текстовых полей

Имя, телефон, адрес, сайт, адрес электронной почты и другие данные.

Аватары

Очень крутая опция, но на данный момент не рабочая.

Иконки

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

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

Создаем восемь одинаковых карточек

Задача — получить на всех карточках разный контент.

Давайте посмотрим, как работает плагин и что он реально может. Начинаем с его выбора.

Выбираем Content Reel из списка доступных плагинов

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

Окно плагина Content Reel

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

Content Reel наполняет заменяет поля данными

Мы рандомно поменяли на восьми карточках имена, адреса и email.

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

Чтобы быстро заполнить и аватары, воспользуемся сервисом Random User Generator.

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

Сохраняем фото из Random User Generator

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

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

Быстрая вставка аватарок

Вот так мы восполнили досадный пробел этого плагина.

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

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

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

Blobs

Плагин, делающий симпатичные кляксы

Плагин Blobs

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

Выбираем Blobs из списка.

Выбираем Blobs из списка доступных плагинов

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

Окно настроек Blobs

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

Blobs генерирует кляксы случайной формы: мы можем влиять только на сложность фигуры и контраст

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

Пример того, как можно разместить рандомные фигуры, сгенерированные Blobs

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

Image tracer

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

Плагин Image tracer

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

Преимущества изображений с четкими очертаниями и однородной заливкой в векторе перед растром:

  • Вектор можно редактировать.
  • Можно масштабировать без потери качества.
  • Можно быстро менять цвет.
  • Можно задавать обводку.

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

Выбираем Image tracer из списка доступных плагинов

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

Справа растровое изображение, слева обработанное плагином — векторное, которое можно еще настроить и улучшить контур

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

Переводим растр в вектор в Image tracer

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

Окно дополнительных настроек в Image tracer

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

Применение blur в Image tracer

Теперь вам не придется пользоваться дополнительным софтом (Illustrator или Corel) специально для того, чтобы трассировать изображение.

Заключение

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

Курс

Figma


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

Хочешь получать персональную подборку статей по дизайну?
Подпишись на рассылку Skillbox