Figma: лучшие плагины для оптимизации рабочих процессов

Для меня, как для дизайнера, время является ценнейшим ресурсом, который всегда в избытке. Главным правилом моего тайм-менеджемента остается оптимизация рутинных процессов. “Не делай руками то, что может сделать за тебя подходящий скрипт. Не рисуй с нуля, если можно переиспользовать готовое решение.”– как-то так должен звучать манифест этого принципа. В течение долгих лет работы в Sketch у меня накопилась приличная библиотека плагинов, альтернативу которой я постарался собрать после окончательного переезда на Figma. В этой статье я постарался собрать самые часто используемые мной плагины, которые помогут вам упростить выполнение задач, автоматизировать процессы и сэкономить сотни бесценных часов.

Pixel Perfect

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

Arrow Auto

Этот плагин позволяет быстро добавлять направляющие стрелки и связующие линии при создания User Journey Maps. Просто выделите два объекта или экрана, выберите тип линии, её направление и кликните Link.

HTML to Figma

Переодически мне приходится вносить правки в дизайн уже сверстанных страниц, исходники которых благополучно были утеряны. Такая работа представляет из себя муторный процесс нарезки скринов или копирования изображений и текстовых блогов. Плагин HTML to Figma умеет переносить целые страницы в проект Figma, причем той ширины, которая нам требуется. Да, он делает это не идеально — нередко шрифт текстовых блоков заменяется на системные и кое-где съезжают отступы, но, тем не менее, это экономит уйму времени и сил. Кстати, в последней версии процесс переноса был сильно упрощен — теперь не нужно генерировать json файл с помощь дополнительного плагина для Crome. Теперь достаточно просто вставить URL нужной страницы в нужное поле, указать нужную ширину и нажать Import.

To Path

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

Time Machine

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

Downsize

По умолчанию, при импорте изображения в проекты, Figma хранит его в исходном размере, что с ростом количества экранов и слоев замедляет скорость загрузки и создает неприятные фризы при прокрутке и изменении масштаба. А еще, если проект действительно большой, в один прекрасный момент Figma может показать вам сообщение “Yikes You’re about to run out of memory!”. Этот небольшой плагин поможет сжимать всю растровую графику внутри группы или компонента в два шага: выберите подходящий для вас показатель Quality и нажмите Compress.

Search & Focus

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

Multiply

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

Frame Status

Мне приходилось работать в множестве дизайн команд и в каждой из них были приняты совершенно разные принципы хранения и описания экранов. Этот плагин упрощает указания статуса, в котором находится тот или иной экран. В арсенале у него имеется три состояния: In progress, Pending, Changes Requested и Done. Каждый из них имеет свой цвет, соответствующий принципу светофора.