Найти тему
design thread.

Топ-10 плагинов Figma для ежедневного использования

Оглавление

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

10. Autoflow

Autoflow
Autoflow

В 2021 ребята из Figma запустили свой аналог Miro – Figjam. Для UX-дизайнеров, менеджеров, для всех, кому представление информации в виде алгоритмов/блоков/стикеров необходимо. У меня тоже иногда встречаются задачи, когда нужно показать какие-то юзерфлоу, или же просто сделать быструю схему. Я не хочу создавать дополнительный файл Figjam и хочу сделать эту схему внутри проекты фигмы. С плагином Autoflow я могу автоматически рисовать стрелки между фреймами. Мелочь, а приятно.

Цена: бесплатно

9. To Path

To Path
To Path

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

Цена: бесплатно

8. Gifmock

Gifmock
Gifmock

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

Цена: от $5 в месяц

7. Rename It

Rename It
Rename It

Бывает, проект в фигме уже настолько переполнен, что новые фреймы называются в духе «Frame 16201». Но тут просят при экспорте прилично обозвать каждый макет. Плагин в один клик может переименовать все выбранные фреймы как нужно: с нумерацией, с обратной нумерацией, с размерами фрейма и ещё с парой настроек. Спасает от негодования заказчика о «нечитабельных и неподготовленных к размещению файлах».

Цена: бесплатно

6. SmoothShadow

SmoothShadow
SmoothShadow

Те, кто работают с фигмой, прекрасно понимают боль градиентов и теней. Для исправления резких градиентов есть плагин, который «дробит» их на несколько частей, тем самым делая их изящнее. Незаменимый помощник, если дело касается макета для печати (который случайно собрали в фигме😄).

Цена: бесплатно

5. Master

Master
Master

Сделал много разных одинаковых сущностей (ну карточек, например), а теперь надо во всех поменять стили? Ок, если их 10, можно и вручную. А если 500? «Эх, создал бы компонент на старте и не было бы проблем». Не страшно! Плагину достаточно показать все одинаковые сущности, и он сделает мастер компонент, к которому привяжет все ваши уже отрисованные части. Красота же, а?

Цена: бесплатно

4. TinyImage Compressor

TinyImage Compressor
TinyImage Compressor

Баннеры для многих рекламных площадок должны строго укладываться в ограничения по весу изображения. Конечно, вектор весит минимум, но часто на баннерах фотографии/рендеры, а это бывает тяжеловато. Чтобы сжимать изображения на экспорте из фигмы под нужные критерии есть классный плагин. Можно либо ограничить степень сжатия (в зависимости от этого рассчитывается вес файла), либо ограничить вес на выходе (в зависимости от этого рассчитывается степень сжатия). На любой вкус!

Цена: от $12 в месяц

3. Pitchdeck Presentation Studio

Pitchdeck Presentation Studio
Pitchdeck Presentation Studio

В фигме я делаю почти всё и презентации тоже. Но на выходе часто нужен не PDF (с чем фигма прекрасно справится и сама), а редактируемый PPTX. С этой задачей хорошо справится этот плагин. Хоть он и платный, но свой функционал окупает сэкономленным временем. Иногда глупит с преобразованием стилей теней, обводок. Для меня это не критично, но понимаю, что кого-то раздражает.

Цена: от $19 в месяц

2. Figma to HTML, CSS, React & more!

Figma to HTML, CSS, React & more!
Figma to HTML, CSS, React & more!

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

Цена: бесплатно

1. AEUX

AEUX
AEUX

Очень часто работаю с анимацией и раскадровки делаю в Figma. Ещё можно встретить тех, кто в таких случаях по слоям экспортирует в PNG и затаскивает всё в After Effects. Этот плагин шикарно выполняет функцию «перенеси из Figma в After Effects так, чтобы текст и шэйпы редактировались». Супер находка, работает как часы. Ускоряет работу над анимацией ощутимо.

Цена: бесплатно

Расскажите в комментариях какими плагинами пользуетесь вы? Может есть какой-то супер мастхэв?

Все цены актуальны на 1 апреля 2022 года.