Блог UXART

Карты города, удаление фона, проверка макетов для дальтоников, стоки и многое другое — 9 плагинов для усиления Figma

Ванильная Figma хороша всем: удобный функционал, приятное и отзывчивое управление, но что самое главное — возможность работать практически со всем, что может прийти в голову дизайнеру. Или нет? Можно ли убирать в Figma задний фон? Или показать, как ваш визуал будет видеть дальтоник? А плагины могут. И в этой подборке мы расскажем и покажем вам их.
Всем привет, на связи UXART, где мы ежедневно делаем интернет удобнее. Но как делать его удобным, если самый лучший, по мнению большинства, графический редактор Figma не выдает пользователю весь функционал?
В такие моменты у пользователей есть два стула: пользоваться дополнительным софтом или начать юзать плагины. И с последними часто бывают ошибки. Например, часть плагинов просто не коннектятся к Figma по русским ip-шникам.
Тем не менее, сегодня мы собрали 9 полезных плагинов, которые оптимизируют ваши рабочие процессы. Часть из них вы уже наверняка слышали от других людей или же находили сами. Но мы и пытаемся кричать, что это самые лучшие и неизвестные плагины. Просто хорошие инструменты, которые помогут вам во время работы)
А еще мы запилили видосик для всех, кому не очень хочется читать текст и любит визуальное повествование.
Со вступлением закончили, теперь можно и с плагинами познакомиться.

Iconify

Пойдем по известным плагинам, с которыми многие уже знакомы. Если хотите что-то новое, то можете скипать эти блоки)
Ну что можно сказать об Iconify сегодня? Когда векторные изображения крайне нужны, а гуглить и искать их самостоятельно уже надоело, вашим спасением станет именно он.
Огромная библиотека иконок на любой вкус и цвет. Использовать можно сразу. Просто запускаем плагин, в поиск вписываем нужный объект и выбираем среди сотни вариантов. Нашли нужную иконку? Можете изменить цвет и разрешение, после чего добавляйте на доску и продолжайте работать.

This browser does not support the video element.

А если не уверены в том, что вам нужно прямо сейчас — можно изучить коллекции от авторов, в которых собраны основные иконки.
Из плюсов:
— Удобный функционал, который заключается в своей простоте
— Огромная библиотека иконок
— Возможность минимальной кастомизации (цвет, размер)
Из минусов:
— Не понимает русский язык. Не знаете, как на английском будет дом? Переходите в переводчик и тратьте на это время.
Согласен, минус кажется смешным. Но мы же стараемся оптимизировать все, что только можно! Но необходимость открывать дополнительную вкладку тратит такое ценное время.
Скачать плагин можно тут
Или внутри фигмы:

This browser does not support the video element.

Unsplash

Перед тем, как писать про этот плагин, нужно отметить — он работает со стоком. И если вам не нравится такой формат визуалов, стоит сразу перейти к следующему плагину.
В общем-то, да. Unsplash — большая библиотека стоковых изображений, которыми вы можете разбавить свои работы. Плагин предлагает 16 типов изображений: от абстракции до еды. Также вы можете самостоятельно искать нужные визуалы, что может помочь вам найти нужное фото/изображение.
Из плюсов:
— Действительно большая библиотека стока
— Частично работает с русскими запросами
— Быстро находит нужный визуал
Из минусов:
— Это сток и этим много сказано
— Частично работает с русскими запросами
Про русский было сказано и в плюсах, и в минусах. Почему? Все дело в том, что слово «кот» Unsplash воспринимает, а «жираф» уже не совсем. Странная механика, но хоть частично работает и то радует.

This browser does not support the video element.

Скачать плагин можно тут

Figmap

Ну и как без карт. В каждой подборке должен быть плагин, который используется для визуализации карты реального места в вашем проекте.
Figmap — один из самых популярных плагинов для карт. Для работы нужно выбрать гео, стиль карты (например, кадры со спутника, или вообще создать свой стиль), нажать на заветную голубую кнопочку и добавить карту в файл. Если нужно, также вы можете добавить метки на карту, но это уже лирика. Все гениальное просто.
Из плюсов:
— Простой и понятный функционал
— Возможность кастомизировать карту
Из минусов:
— Маркеры порой не выставляются или теряются при экспорте карты

This browser does not support the video element.

Скачать плагин можно тут

Remove BG

Скажу честно, один из моих любимых плагинов в данной подборке. Уверен, что хоть раз вы находили классное изображение, которое точно подойдет вашему проекту, но задний фон настолько ужасный, что со слезами на глазах приходиться вырезать его вручную через Photoshop или использовать отдельные сервисы.
Хватит это терпеть! Теперь вам всего-то нужно выбрать нужный визуал, включить плагин и он уберет задний фон. Делается в два клика, а ускоряет работу многократно.
Но тут мы сталкиваемся с другой вещью — для некоторых плагинов нужно авторизоваться через сайты разрабов. И не все сайты поддерживают русские Ipшники, поэтому скачайте ВПН и поменяйте регион, чтобы в дальнейшем не сталкиваться с этой проблемой.
Из плюсов:
— Быстро убирает задний фон
— Работает в два клика
Из минусов:
— Порой вырезает настолько криво, что плакать хочется
— При первом включении нужно авторизоваться на сайте разраба, который без ВПН не запустится

This browser does not support the video element.

Скачать плагин можно тут

Autoflow

Сбор UX-дизайнеров объявляю открытым. Именно вы лучше всех расскажете, насколько долго, муторно и не очень интересно делать флоу экранов для заказчика. А для тех, кто не совсем понимает, о чем речь — это то как, что и почему идет на каждом шаге со стороны пользователя.
Плагин Autoflow оптимизирует этот процесс. Теперь вам не придется вручную протягивать линии/стрелки от одного экрана к другому. Просто выбираем два фрейма и плагин все делает за вас.
Кроме того, сами линии можно кастомизировать — менять толщину, цвет, тип линии, непрозрачность, скругление и добавлять текстовый блок.
Из плюсов:
— Оптимизация флоу
— Возможность кастомизировать стрелки
— Отсутствие подписки, как следствие, возможность использовать плагин всегда
Из минусов:
— Порой плагин багуется, из-за чего не протягивает лайны
— Цвет меняется только по коду

This browser does not support the video element.

Скачать плагин можно тут

GPT Stylist, GPT Mate

Да, OpenAi со своими нейронками и до Figma добрались. В общем, у нас есть 2 нейроновских плагина, каждый из которых по описанию с официального сайта ну очень хороши. Но есть одно большое НО.
Эти плагины нельзя подключить без привязки карты к основному аккаунту OpenAi. А он не работает с русскими картами. Вот такой нюанс.
Но если вы счастливый обладатель нероссийской карты, это описание для вас.
GPT Stylist — подбирает цветовую палитру на основе введенного промпта. Грубо говоря, в основном меню вы пишите «Приложение по структуре похоже на социальную сеть, где пользователи не только узнают что-то новое об играх, но и могут взаимодействовать с коммьюнити, общаться в личке, оставлять комментарии, лайкать новости редакции и других пользователей.». Он проанализирует текст и выдаст вам базу.
Естественно, не работает с русскими запросами, так что пользуйтесь переводчиком)
GPT Mate — генерирует текст для вашего проекта на основе промта. Также не работает без привязки карты и не принимает русские запросы.
Из плюсов:
— Страшно, очень страшно, мы не знаем что это такое, если бы мы знали, что это такое, но мы не знаем, что это такое))))
Из минусов:
— Нельзя воспользоваться без привязки карты. Ну что это за дела-то?
Попытать удачу с GPT Stylist
Попытать удачу с GPT Mate

Color Blind

Самый интересный плагин в сегодняшней подборке. По разным исследованиям, дальтонизмом болеют до 300 миллионов человек в мире. Существуют разные формы дальтонизма — от сходства многих цветов до полного отсутствия цвета.
Этот плагин позволит визуализировать изображение в 8 вариантах дальтонизма. Скорее всего вы не будете пользоваться этим плагином, ведь малое количество сайтов и продукции в целом разрабатываются для дальтоников. Но если вдруг вы столкнетесь с такой задачей, решить её будет сильно проще.
Из плюсов:
— Можно выбрать нужный тип дальтонизма
— Быстро переводит цвет
Из минусов:
— По комментариям людей с дальтонизмом, не всегда правильно переводит цвет
— Вряд ли вы будете пользоваться им

This browser does not support the video element.

Скачать плагин можно тут

Mockup plugin

Полезный плагин для проекции ваших визуалов на различных устройствах и продуктах.
Например, если вы хотите показать интерфейс на экране «настоящего» ноутбука. Или дизайн новой листовки.
Простой и понятный функционал — заходите в плагин и выбираете понравившийся мокап. Единственное, стоит обращать внимание на приписочку PRO. Эти мокапы доступны только при подписке на сервис. Но и среди бесплатных есть много приятных, так что не ленитесь искать.
Ну а если вам лень, то легче всего разграничить платные от бесплатных в поиске. Здесь просто выбираете показ «бесплатных» и все — дело сделано.
Из плюсов:
— Большая коллекция мокапов
— Удобно добавлять изображения прямо на мокап
Из минусов:
— Система подписки

This browser does not support the video element.

Скачать плагин можно тут

Html to design

Отличный плагин для того, чтобы «украсть» сайт к себе в Figma. Особенность Html to design заключается в том, что он переносит абсолютно все элементы со страницы в полном качестве. Нужен хедер, футер, поп-ап или что-то другое? Он сможет это перенести.
Хороший инструмент, если нужно достать конкретный элемент с сайта или в целом понять логику сервиса.
Из плюсов:
— Удобный сервис, который перенесет страницу
— Возможность выбрать разрешение и тему сайта
— Переносит исходники, а не скрины сайта
Из минусов:
— В бесплатной версии есть ограничение по кол-ву экспорта сайтов в неделю. Так что вам нужно будет либо купить подписку, либо довольствоваться тем, что есть.
— Порой «плющит» элементы страницы
— Если сайт «большой», то и ждать придется долго

This browser does not support the video element.

Скачать плагин можно тут
А теперь я предлагаю поделиться вашими любимыми плагинами. Ну и, конечно же, раскритиковать нашу подборку. Ведь какой топ-плагинов может обойтись без этого)
Немного лирики от автора: я понимаю всю важность и необходимость плагинов, но я искренне уверен, что всю работу можно сделать и без них. Отношусь к ним так же, как к нейронкам. Это крутой способ оптимизировать время, но за вас они ничего не сделают. Живите в симбиозе и не отдавайте им все, если сами хотите апаться в своих скиллах.
Если статья вам понравилась и вы все еще не посмотрели фулловый видос со всеми плагинами — предлагаю перейти на YouTube и поставить там лайк.
А еще не забывайте подписываться на наш ТГ-канал, в котором мы ежедневно постим самый разный контент: от экспертных статей до UX-патрулей туалетов в разных ресторанах Санкт-Петербурга)