9 плагинов Figma, которые облегчат жизнь любого дизайнера

С небольшим запозданием публикую подборку плагинов, без которых вы больше не сможете представить свою работу в Figma. По-крайней мере я — точно! Подготовил для вас не только статью, но и видео, поэтому для тех, кто любит посмотреть — милости прошу ко мне в ютубчик :)

Это моя первая статья на vc.ru, поэтому немного расскажу о себе:

Меня зовут Алексей, я UX/UI дизайнер со стажем более 4 лет. Сейчас чуть больше года работаю в супер ламповой студии интерфейсов UXART. До этого тихо и мирно фрилансил:)

Название статьи говорит само за себя. Приятного чтения!

Вам знакома ситуация, когда заказчик предоставляет список сайтов-партнёров, а логотипы приходится искать самостоятельно? Этот плагин избавит нас от рутинного «гуглежа» и копания в «коде страницы», чтобы достать Logo.png или Logo.svg

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

Пример работы плагина Brandfetch

Минусы лично для меня

  • Работает не со всеми сайтами;
  • Не умеет показывать сайты из поисковой выдачи, как это делают Гугл Документы (пример в видео).

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

Плагины Chart и Charts генерируют отличные диаграммы по заданным значениям

Пример работы плагина Chart
Пример работы плагина Charts

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

В поиске смайликов помогает emojipedia. Надеялся, что плагин заменит этот ресурс, но разработчики не добавили самый популярный набор — от Apple. Просто взяли и не добавили. Благо, в скором времени обещают исправить своё упущение :)

Ну а пока довольствуемся «классным» набором от Твиттера.

Пример работы Figmoji

Любите презентовать клиенту микроанимашки, примеры анимации и в целом работу сайта? Этот плагин позволит «не ходить» в другие приложения и работать прямо в Фигме. Здорово же?

Пример работы Figmotion

Наконец-то можно удобно добавлять иконки.

Раньше я использовал flaticon и собственные наборы иконок на отдельном артборде и они кочевали от одного проекта к другому. Проблема этого способа в его ограниченности — иконки есть не для всех случаев жизни.

С этим плагином можно забыть про дефицит и долгий поиск иконок. Все они векторные, классные и на любой вкус и цвет. Я доволен :)

Пример работы плагина Iconify

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

В этом плагине есть и Google Maps и Mapbox и всевозможные настройки:

  • Изменение масштаба;
  • Установка/удаление метки;
  • Выбор типа карты (спутник, гибрид, схема).

В общем всё, что нужно для удобной генерации карт.

Пример работы Map Maker

Кстати, напишите ваше мнение по поводу того, что у аналогичного Mapsicle при отсутствии гугла в 8 раз больше скачиваний. Я не понимаю.

Снова плагин, название которого говорит само за себя. С этим плагином (как и с многими другими) больше не нужно использовать сторонние сервисы.

QR code generator «в прямом эфире» генерирует любую фразу в виде QR кода.

Пример работы QR code generator

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

Открыли плагин → Задали параметры → Бинго!

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

Пример работы Table Generator

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

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

Всё это заменяют 2 клика — открыть плагин → Сгенерировать картинку. Так же просто, как 2х2.

 Пример работы Unsplash

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

Всем — мир, а за удобными интерфейсами — в UXART.

30
19 комментариев

Figmotion — самые примитивные возможности анимирования. Приниплу и другим инструментам это не конкурент.
Brandfetch — дает логотипы только крупных компаний (типа дрибббла и беханса, чтож еще нужно дизайнерам то), которые никому особо не нужны. Маил.ру вообще не дал. Яндекс какой то левый.
Есть интересный плагин Polyglot. Для перевода текстов на разные языки. Тоже пока косячно работает.
Content Reel вставляет заготовки текстов в виде имен, адресов, телефонов и прочего. Хорошая штука. Скоро должны добавить фотки людей.

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

1
Ответить

Спасибо за ответ, Александр!

Тоже сначала заинтересовал Content Reel, но для меня он бесполезен, потому что 90% наших заказчиков — русскоязычные.

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

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

1
Ответить

Из всего перечисленного ничего нет что может использоваться больше одного раза в неделю(если вы не ферма по производству лендингов). Фигма настолько революционный продукт что отстает от adobeXD на пол года или год(не помню когда там плагины появились)

1
Ответить

Спасибо за ответ, Сергей!

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

Подскажите, а чем конкретно на ваш взгляд XD обгоняет Фигму?

1
Ответить

Комментарий недоступен

1
Ответить

Комментарий недоступен

Ответить

Все эти плагины для тех, кто клепает по паре лендосов в день на скорую руку
Brandfetch, к сожалению выдает далеко не ту интерпритацию, которая нужна. Поверхностный плагин.
Figmotion не позволяет нормально использовать анимацию мелких объектов внутри проекта, в прототипе.
....
Ждем нормальных плагинов для "тяжеловесных" проектов

1
Ответить