Совсем недавно в Фигме появились плагины. Если верить твитам ребят из Фигмы — первые наработки по плагинам появились 2 года назад, и все это время они занимались полировкой работы API. Список плагинов пока что не такой большой, но уже сейчас есть плагины, которые значительно ускоряют проектирование — о них я хочу рассказать.
Figmotion
Плагин позволяет создавать анимацию внутри Фигмы. Не могу сказать, что у плагина хорошо сделан UX, по крайней мере в текущей версии (изменение позиции объекта — боль). Тем не менее, уже можно экспортировать анимацию в виде css или json и скинуть похвастаться друзьям в .gif, .mp4 или .webm. Думаю стоит обязательно посмотреть, Principle напрягся.
Из минусов — нельзя включать воспроизведение пробелом (пока я это писал — починили) и совсем странное изменение позиции объекта, надеюсь так же, что в итоге починят.
Content Reel
Позволяет вставлять в дизайн рандомные данные (имена и фамилии, телефоны, адреса, почту, места работы, числа), работает супер smooth, UX простой и понятный.
Поддерживаемых языков пока что всего три, но уверен, что и наш любимый русский язык так же скоро подвезут. У некоторых из данных так же есть настройки, позволяющие гибко изменить их отображение — оставить только имена или только фамилии, вставить целые числа или со значением после запятой, изменить форматирование номера телефона.
Помимо текстовых данных есть еще текстовые иконки (уже) и аватарки (скоро будут).
Brandfetch
Просто вводите адрес сайта компании — и к вам прилетает логотип бренда. Работает не только с крупными брендами (вытащил им, например, логотип портала «Активный гражданин»)
Из минусов — логотипы забираются с сайта, а значит, с большей долей вероятности, они буду растровые и в очень маленьком разрешении. Тем не менее, если нужно быстро найти десяток логотипов для раздела «Нам доверяют» (или как его сейчас называют?) — почему бы и нет? В противном случае для векторных логотипов можно воспользоваться плагином Iconify.
Unsplash
Плагин избавляет нас от необходимости ходить за фотками из Unsplash в браузер и позволяет вставлять их, находясь прямо в Фигме. Есть поиск и вставка рандомной фотки. Так же можно выделить, например, несколько форм и вставить в них разные выбранные вами фотографии.
Важно помнить, что вставить фотографию можно только при выбранном объекте, при этом фотография вставится не в виде маски, а добавится в самый верх параметра Background.
Iconify
Этот плагин позволяет вставлять иконки из кучи наборов — в том числе Material и мой любимый Feather Icons. Есть поиск, а перед вставкой у иконки можно изменить цвет (пока что только вставкой кода), повернуть вокруг центральной оси или отразить по вертикали или горизонтали. Так же в наборах есть пак с логотипами брендов в векторе — это на случай, когда растровые логотипы из вышеупомянутого Brandfetch вас не устраивают.
Паков на мой взгляд слишком много, встречается даже два пака Feather Icons от разных авторов, поэтому не помешала бы возможность добавить паки в избранное и отображать их в самом верху списка.
Lorem Ipsum
Да, я знаю, что считается моветоном использовать Lorem ipsum при тестировании интерфейса (почитать на эту тему — https://blog.prototypr.io/why-testing-with-real-content-is-better-than-lorem-ipsum-c7c79586ee72), но во время проектирования этот текст-пустышка может помочь правильно сформировать типографику.
Плагин можно настроить так, чтобы текст начинался не с первого предложения трактата, можно указать нужное количество предложений или вообще сделать так, чтобы плагин сам нашел отрывок, который идеально поместится в выбранный контейнер текста.
Charts
Поможет, когда в интерфейсе нужно сделать много разных диаграмм (для, например, проектирования дэшборда). Здесь есть круговые и столбчатые, диаграммы-области, диаграммы-графики. Для каждого вида есть свои настройки: можно указать количество сравниваемых величин и точек для сравнения, выбрать максимальное значение для всего графика и минимальное значение для всех точек (чтобы на графике с потолком в 1000 не было провалов до, например 10).
Цвета на графике меняются при изменении любых значений, а хотелось бы отдельную кнопку, которая рандомно меняет цвета, ждем!
Viewports
Когда дизайн готов для самого маленького поддерживаемого приложением экрана, я обычно вручную переключаю размеры выбранного фрейма — при настроенных constraints (поведение объектов внутри фрейма при изменении его размеров) это помогает увидеть, как контент поведет себя на экранах большего размера. Этот плагин немного упрощает эти действия, предоставляя сразу список устройств, при нажатии на устройство размер фрейма меняется на указанный.
Что означает процент справа я могу только догадываться, и догадываюсь, что это популярность этих экранов, ээм, в мире?
Stark
Плагин поможет проверить контрастность элементов по отношению друг к другу, с помощью чего, в свою очередь, можно снизить нагрузку на глаза пользователей. Очень полезная штука, особенно для тех, кто любит серый текст на сером фоне (признаюсь, я раньше такое любил). Можно посмотреть контрастность текста по отношению к белому фону или по отношению к любому выбранному дополнительно объекту. Так же можно просто выбрать два объекта и узнать их контрастность по отношению друг к другу.
Сравнивать можно до двух объектов, к которым применена заливка (градиенты и обводки не в счет). Так же немного странно работает проверка текста внутри дочерних компонентов, иногда плагин просто показывает пустое окно, если выбран только текст, в таком случае поможет выбор фона компонента.
Autoflow
Выбираете два фрейма (или два объекта на разных фреймах, или объект внутри одного фрейма и другой фрейм, или два объекта внутри одного фрейма), запускаете плагин — вуаля, между объектами проводится линия. Таким образом можно очень быстро создавать наглядные user flows.
Для того, чтобы каждый раз не вызывать меню плагинов, можно использовать сочетание клавиш ⌥⌘P — оно запускает последний использованный плагин. Таким образом остается выбрать объекты и быстро связать их горячими клавишами.
Из минусов — пока что это все же не стрелки, а линии, у которых нет никаких настроек внешнего вида (работа над этим уже ведется, посмотреть можно на http://www.flowchart.design/, будут нам стрелки и даже аннотации над стрелками), ну и иногда линия проводится совсем уж по заковыристому пути, хотя очевиден намного более простой пусть для связи двух фреймов, но такова работа алгоритма.
Еще немного про плагины
- Меня умиляет кнопка «Install», после нажатия на которую плагин устанавливается менее чем за секунду. Это напоминает иконку с телефонной трубкой от стационарного телефона, хотя сам смартфон сегодня выглядит иначе. Здесь уместнее был бы просто тоггл, показывающий, включён плагин или выключен.
- Так же интересно, что плагины обновляются автоматически, никуда не нужно нажимать и не нужно бояться несовместимости версий Фигмы и любого из плагинов.
