Must have: Плагины для Figma

🤓
🍀
Print

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

  • Не нужно засорять пространство для плагинов, добавляйте только те, которые Вам действительно необходимы
  • Если плагин нужен единоразово, возможно есть смысл удалить его, после использования
  • Старайтесь избегать одинаковых или схожих плагинов: если плагин выполняет идентичную функцию — нет смысла засорять рабочее пространство, тем самым усложняя себе жизнь
  • Ниже перечислены плагины, которыми пользуюсь я (Сергей Головашкин), а также плагины, которые скорее всего будут полезны. В любом случае, самый актуальный список из последних плагинов и новинок лучше искать напрямую в Figma Community.

Unsplash

Unsplash
Unsplash Figma плагин

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

Подробнее & установить: https://www.figma.com/community/plugin/738454987945972471/Unsplash


Image Tracer

Image tracer
Image Tracer плагин

Наверное один из самых полезных плагинов, отрисовывает практически любую иконку/иллюстрацию из растрового формата (картинки) в вектор.

P.S. Когда-то давно, старинные дизайнеры использовали Adobe Illustrator, чтобы провернуть подобное волшебство.

Подробнее & установить: https://www.figma.com/community/plugin/735707089415755407/Image-tracer


Breakpoints

Breakpoints
Breakpoints плагин

Еще не пользовался, но многообещающий. Есть смысл попробовать.

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

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

► Создать адаптивный макет

► Поделиться анимированным прототипом

Шаг 1. Добавьте новые точки и диапазоны привязки к существующим схемам. Вы получите рамку предварительного просмотра в реальном времени, которая переключается при изменении размера.

Шаг 2. Включите переключатель прототипов и поделитесь прототипом анимации Figma со своей командой в качестве руководства для разработчиков.

Подробнее & установить: https://www.figma.com/community/plugin/824289601590456356/Breakpoints


QR Code Generator

QR Code Generator
QR-Code-Generator плагин

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

Подробнее & установить: https://www.figma.com/community/plugin/735650288109030027/QR-Code-Generator


Material Design Icons (Community)

Material Design Icons (Community)
Material Design Icons (Community) плагин

Один из способов получения и использования иконок от https://material.io/ (дизайн система Google). Также, из альтернатив — можно установить шрифт (должен быть доступен на сайте дизайн системы).

Подробнее & установить: https://www.figma.com/community/plugin/775671607185029020/Material-Design-Icons-(Community)


Font Preview

Font Preview
Font Preview плагин

Предпросмотр шрифтов в фигме.

Подробнее & установить: https://www.figma.com/community/plugin/890494567122693015/Font-Preview


Component Variables

Component Variables
Component Variables плагин

Плагин не для новичков, но это шедевр!

  • Можно построить логику компонентов так же, как и в sketch (мне этого не хватало, очень)
  • Позволяет внедрять условия и создавать еще более “умные” компоненты

Подробнее & установить: https://www.figma.com/community/plugin/819995136233235915/Component-Variables


ARC

Удобен для случаев когда текст нужно отобразить по кругу/овалу

Подробнее & установить: https://www.figma.com/community/plugin/762070688792833472/arc


Font Scale

Плагин генерирует текстовые слои (удобно для создания правил типографики (заголовок, параграф и тд.))

Подробнее & установить: https://www.figma.com/community/plugin/735707089415755407/Image-tracer


Map Maker

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

Подробнее & установить: https://www.figma.com/community/plugin/731312569747199418/Map-Maker


Insert Big Image

Позволяет добавлять изображения более чем 4096px без изменения размеров

Подробнее & установить: https://www.figma.com/community/plugin/799646392992487942/Insert-Big-Image


Платные & смысл в использовании только при определенных потребностях


Bannerify

Bannerify Banner Studio
Bannerify плагин

Смешанные ощущения, но однозначно крутой продукт для тех, кому нужно экспортировать дизайн в HTML/GIF или VIDEO

На заметку:

  • Очень невнятно уведомляют, что бесплатной версии нет (15 раз можно запустить, после чего требует лицензию).
  • Лицензия не дорогая, и вполне оправдывает себя в тех случаях, когда нужно запустить Google Ads (в формате HTML5). Если сравнивать с типичным процессом создания рекламы, стоимость окупается менее чем за 1 рекламный баннер.
  • Интуитивно понятный и действительно крутой редактор / процесс: Можно добавить анимации, выбрать для чего и в какой формат экспортировать, Google пропускает без ошибок.
  • (!) Сам редактор конвертирует текст в кривые (outline stroke), технически это по идее ок (не нужно ломать голову как подключить шрифт + google ads поддерживают только fonts.google.com); но, это все же кривые а не текст.

Подробнее & установить: https://www.figma.com/community/plugin/796124491692147799/Bannerify-Banner-Studio