Плагины
December 18, 2019

5 плагинов Figma для оптимизации рабочего процесса

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

Сегодня мы посмотрим как раз на одну такую группу — 5 плагинов для оптимизации рабочего процесса в Фигме: автоматически стрелки для user flows, визуализация всех размеров и отступов, два плагина для работы с направляющими и мини-карта.


Arrow Auto

https://www.figma.com/c/plugin/751007211632768205/Arrow-Auto

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

Один клик — и все стрелки в документе будут скрыты!

Как раз в этом и может помочь этот плагин, который позволит вам создать различные user flow в рамках одного документа. Из крутого — в настройках плагина можно разом зафиксировать или скрыть и показать все стрелки. Кроме того — если вы связали два объекта и затем случайно (или нет) изменили положение одного из них, то с помощью кнопки Update вы сможете автоматически перестроить все стрелки, они будут снова привязаны к объектам до изменения их положения.


Redlines

https://www.figma.com/c/plugin/781354942292031141/Redlines

Плагин, который поможет в проработке дизайн-системы и в передаче её разработчикам (или другим дизайнерам внутри команды).

Позволяет очень быстро визуализировать как точные размеры отдельных элементов, так и расстояния между всеми элементами. Можно настроить цвет (без color picker, увы, придется вводить код вручную) и настроить отображение единицы измерения.


Minimap

https://www.figma.com/c/plugin/772952119002135124/Minimap

Если вы когда-то играли в Warcraft, StarCraft (да, почему-то в первом названии все кроме первой буквы строчные) или любую Age of Empires или любую другую стратегию в реальном времени — то для вас описание этого плагина на названии и заканчивается.

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


Guides Inspector

https://www.figma.com/c/plugin/763500131554051614/Guides-inspector

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

Но из самого интересного — возможность создать из направляющих шаблоны и потом переиспользовать их. Внутри плагина уже есть наш с вами любимый Bootstrap в виде шаблонов на 12, 6 или 4 колонки, а так же шаблон сетки с ячейкой 16 на 16 пикселей. Из минусов — при выбора направляющей в списке в плагине нельзя увидеть её наглядно (сообщают, что это баг, и скоро пофиксят), а так же невозможность разом удалить все направляющие (а для этого у нас есть следующий плагин).


Clear Guides

https://www.figma.com/c/plugin/753903260307779121/Clear-Guides

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

Clear Guides поможет в один клик очистить все направляющие как внутри одного или нескольких фреймов, так и сразу во всем документе, что может помочь сэкономить вам много времени.


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