Ура! Ура! Это случилось, в самый крутой инструмент для дизайна Figma добавили ещё и плагины. Вчера прошла презентация (стрим можно начинать смотреть с 20 минуты), вкладка «Plugins» появились в апдейте, и началась новая счастливая жизнь!
Сейчас я разберу несколько лучших и самых полезных (на мой взгляд) плагинов, которые уже потестил лично и они уже успели украсть моё сердечко навеки! Но для начала хочется немного порассуждать о том, что есть инструмент дизайна в современном мире и каким требованиям эти самые дизайнерские инструменты должны соответствовать (это вступление выделено курсивом, его можно легко проскроллить).
Вступление
Онлайн повсюду
1. Первая тенденция, которую больше нельзя игнорировать – дизайнеры перестали работать в одиночку, сидя на заброшенном острове на краю земли и удаленно транслируя свои гениальные картинки простым смертным: менеджерам и разработчикам. Да, реалии этого мира таковы, что дизайн стал неотделимой частью всего процесса разработки и посему, способности дизайнера к взаимодействию, быстрому показу всех промежуточных результатов из любых версий, быстрому сбору фидбека – стали намного важнее его собственно графических скиллов.
Простая коммуникация, хранение всего в облаке, постоянные апдейты макетов, возможность мгновенно собрать обсуждение в кафе за столиком, (когда у коллег по команде может не быть при себе не то что макбука, а вообще любого ноутбука в принципе) – и дали Figma бесконечное преимущество над Sketch. А ещё не забывайте про многообразие возможностей презентовать свой проект: как в виде кликабельного прототипа в рамочке айфона, так и и виде набора готовых компонент, палитр и отступов в коде.
Получается, что и менеджер, и фронт-ендер, и генеральный директор в любую секунду, в любом месте могут увидеть результат дизайна, его код, процесс его работы и оставить свои ценные комментарии.
Ну а если есть полные права, то ещё и оценить все изменения в версиях макетов по дням:
То есть требования постоянной доступности и кроссплатформенности, а также возможность непрерывной командной работы и тотального ко-дизайна – сегодня куда важнее, чем уникальная платформа у инструмента и уникальные скиллы у одного дизайнера без команды.
Но в рамках одной одной профессии
2. С другой стороны, современные инструменты не должны быть «швейцарским ножом» сразу про всё и сразу для всех. В этом плане меня немного печалит направление развития безусловно крутого инструмента Miro (бывшего Realtimeboard).
Хорошо помню, как 2-3 года назад я не мыслил свои процессы предварительного проектирования, планирования и конечного дизайна – без этого действительно классного инструмента. Но сейчас он стал слишком большим комбайном, одинаково подходящих и продакт-оунеру, и студенту, и даже домохозяйке. При этом каждый раз, когда передо мной стоит очень четкая и конкретная задача и мозг мечется в поисках наиболее простого и дешевого инструмента для скорейшего разрешения проблемы – Miro уже никогда не приходит в голову первым.
Составить прототип или майндмеп, описать продуктовую канву или накидать CJM, прокомментировать план с тикетами на виртуальной доске или просто обсудить мудборд – всегда есть другой инструмент, который удобнее и лучше в моменте, для конкретной профессии и рода деятельности.
И в этом плане подход с плагинами я считаю абсолютно гениальном, поскольку я могу установить себе ровно то, что нужно мне в рамках моей текущей деятельности. Убеждён, что у идеального инструмента дизайнера никогда не должно происходить такого, чтобы, загрузив очередной апдейт, затем часами изучать онбоардинг и запоминать новую навигацию пути к решению своей локальной задачи.
Plugins
Теперь отключаем курсив и переходим к основной задаче: разбору плагинов. Сразу скажу, что вы сами вполне можете легко научиться делать свои собственные плагины и делиться ими в сообществе, а пока обязательно найдите время изучить то, что уже есть.
На момент написания статьи их доступно уже более 50 штук, а предлагаемые функции часто дублируются, так что можно выбрать наиболее подходящий вариант именно под себя.
Mapsicle
Всё, больше никаких скриншотов Яндекс.Карт в моих макетах! Плагин позволяет буквально в пару кликов создать реальную карту любой местности и любого размера, вставлять её в макет, и при желании – легко редактировать в дальнейшем. Очень круто:
Unsplah
Кому вообще нужны платные фотостоки в 2К19? Даже в моем случае, когда Боженька не дал таланта фотографа с айфоном, можно в два клика загрузить совершенно бесплатно фотографию изумительного качества в любой из представленных категорий. Очень рекомендую всем!
Table generator
Просто и понятное название, очевидная польза, гигантская экономия времени при создании таблиц. Мне, как специалисту именно по сложным b2b сервисам, личным кабинетам и внутренним продуктам учета и контроля всего на свете (и даже спутников в космосе) – данный плагин сэкономит по паре часов рабочего времени ежедневно! Надеюсь, и вам он поможет тоже:
QR code generator
Тоже польза плагина очевидна из названия, теперь можно не бегать в сторонние сервисы для того, чтобы сгенерить реальный код. Более того, здесь же можно создавать код своих же расшаренных страниц Figma с макетами с помощью этого же плагина – рекурсия:
Image Palette
Совершенно бомбический плагин, который убивает раз и навсегда казалось бы извечный инструмент дизайнера «Пипетку». Всего 1 клик и 1 мгновение отделяют вас от того, чтобы плагин автоматически разложил на основные цвета любое фото. Любое! Это настолько безумно круто, что я не могу придумать ещё бОльших аргументов в статье для его немедленной установки, кроме скриншота его работы:
Figmoji
Не секрет, что эмоджи были в Фигма и ранее, однако инструмент был сырой, не совсем удобный и более половины эможди вообще не отображались нормально, как, например, эмоджи полицейского на скрине. Сейчас же новый плагин не только дает возможность выбора векторных emoji высочайшего качества, так он ещё и позволяет редактировать их на свой вкус, меняя цвета и фигуры внутри:
Content Reel
Что может быть лучше быстрого заполнения многочисленных блоков с текстом приближенным к реальности контентом? Здесь я выбрал четыре текстовых элемента с изначально одинаковыми названиями кампаний, затем запустил плагин – и контент внутри каждого блока изменился уникальным образом, без повторов. Крутяк! А ещё и иконки также можно:
Charts
Работа проектировщика космически сложнейших интерфейсов, помимо таблиц, содержит ещё один обязательный элемент интерфейса – графики, просто тонны графиков и дашбордов. Рисовать каждый раз руками похожие на реальность данные, которые потом на реальной странице кодом будут генериться за несколько мгновений – было всегда довольно непродуктивно и крайне уныло. Но сегодня мир навсегда изменился – красивейшие графики в макетах ваших дашбордов появляются уже через мгновение!
Chart
Ещё один аналогичный плагин (с разницей в названии в одну букву), который тоже очень советую вам установить как можно скорее. Отличается видом модального окна настройки и возможностью заполнить реальные данные прямо в таблице или загрузить готовым json-чиком.
Вместо заключения
Конечно, существующих плагинов уже сегодня намного больше (а что же будет через месяц?) и мой обзор достаточно субъективен – я показал лишь те, от которых наиболее кайфанул сам и планирую использовать их ежедневно в собственных проектах.
Очень надеюсь, что немного помог вам и самую чуточку поспособствовал тому, что хорошего дизайна теперь станет в мире чуть больше!
