С каждым обновлением Figma становится все лучше. Но для большинства задач дизайнерам все еще приходится пользоваться сторонним софтом. В Figma вы не можете создавать 3D модели или редактировать фото, с функционалом Photoshop. Но плагины могут помочь вам с этим. Сегодня мы покажем и расскажем о 15 крутых плагинах, которые вы точно будете использовать)
Всем привет, на связи UXART, где мы ежедневно делаем интернет удобнее. Каждый дизайнер в нашей команде в той или иной степени пользуются плагинами. Ведь это банально удобно и ускоряет решение множества задач.
С недавних пор мы начали искать «те самые» плагины, которые могут помочь именно тебе в проектах. Нашли и разобрали 15 плагинов в формате 2-х мини-видосов. И если вам проще воспринимать информацию в формате видео, то велком:
P.s. редактор раньше лил много воды, поэтому эти выпуски стали сильно короче)
А для тех, кому удобнее читать статью, предлагаем ознакомиться с этими плагинами здесь.
Vectary 3D Elements
Один из самых сильных плагинов, в котором вы можете создавать свои 3D модельки. Если вам по какой-то причине не хочется или не «можется» заниматься 3D моделированием в 3Ds MAX или Blender, то этот плагин станет вашим спасательным кругом.
У плагина крайне простой функционал, если мы рассматриваем его базовые модельки — а их 7 штук.
Из минусов, давайте сразу о них — базовые модели вы практически никак не можете изменять. Только положение на экране, отключение/включение тени и выбор заднего фона.
Но этот плагин не вошел бы в этот список, если бы в нем не было другой киллер-фичи.
Вы можете создать свою модель, правда для этого придется авторизоваться на официальном сайте плагина. И уже тут через редактор вы можете создавать, изменять, добавлять что-то новое как к уже существующим моделям, так и сделать свою с нуля.
Из плюсов:
- Можно юзать 3дшки в своих проектах, особо не разбираясь с тем, как их создавать
- Возможность создавать свои модели или изменять уже существующие, изменяя их под себя
- Простая и удобная интеграция ваших моделей в Figma
Из минусов:
- Базовый функционал, не выходя из Фигмы, ограничен. Из-за этого вам все равно придется выходить из любимого приложения.
Ссылка на плагин: https://www.figma.com/community/plugin/769588393361258724/vectary-3d-studio-lite
Image Editor
Учитывая, что ниже в этом топе будет свой вариант Фотошопа, про Image Editor хочется рассказать совсем мало.
У самого плагина в действительности большой функционал, а его использование не вызовет проблемы даже у тех, кто ни разу не заходил в Figma. В плагине вы можете:
— Изменять яркость и контраст
— Изменять настройки каналов изображения
— Увеличить/уменьшить гамму
— Увеличить/уменьшить экспозицию
— Работать с кривыми
— Добавлять размытие
— Добавлять шумы…
…и еще 12 ползунков, с которыми вы можете играть.
Все изменения проходят через ползунки. И самое главное — эффекты не перейдут на ваш объект до тех пор, пока вы не подтвердите их в плагине. Это поможет избежать лишних проблем.
Из плюсов:
- Удобный и простой функционал
- Достаточно большой выбор настроек, которые можно изменить
- Невозможность испортить исходник, без подтверждения изменений в плагине
Из минусов:
- Мало где можно адекватно использовать (вряд ли подойдет тем же UX/UI дизайнерам)
- С некоторыми изображениями работает некорректно, из-за чего визуал может зашакалиться.
Ссылка на плагин: https://www.figma.com/community/plugin/914972720109480252/image-editor
Automate Color Styles
Если вам нужно собрать цветовую палитру проекта, но кликать все цвета вручную не хочется, то ACS сделает всю нудную работу за вас.
У плагина есть две простые, но полезные функции:
— Собрать все цвета на странице и перенести их в вашу библиотеку стилей цвета
— Собрать цвета в отдельную палитру в качестве фрейма на экране.
Как работает: открываете плагин, выбираете, с каких страниц нужно собрать цвета и нажимаете «apply».
Из плюсов:
- Простой функционал
- Работает практически моментально
- Собирает все цвета со страницы
- Возможность создания палитры прямо в файле
Из минусов:
- Собирает все цвета со страницы и это нельзя ограничить конкретным изображением. И если вы забудете об этом, то получите миллионный список цветов.
Ссылка на плагин: https://www.figma.com/community/plugin/979441006797488478/automate-color-styles
3D Transformer
Да, еще один плагин про 3D в этой подборке. Его отличительная особенность от прошлого заключается в том, что 3D Transformer, как не трудно догадаться из названия, переносит ваш объект из плоского изображения в 3дшный.
По функционалу — выбираете объект, при помощи ползунков меняете его положение по осям (X, Y, Z), изменяете перспективу и зум и, если нужно, добавляете сглаживание на углы.
Вуаля, 3D объект готов, и вы можете использовать его в своих проектах.
Из плюсов:
- Простота
- Приятный дизайн самого плагина
- Возможность «случайной настройки»
Из минусов:
- Ограниченный функционал. Да, он прост, но ничего сверх-выдающегося вы не сможете сделать.
Ссылка на плагин: https://www.figma.com/community/plugin/1009780509659307229/3d-transformer
Font Preview
Крайне приятный плагин для тех, кто часто работает с текстом. Font Preview оптимизирует процесс поиска и в собственном интерфейсе покажет, как ваш текст будет выглядеть с разными шрифтами.
С одной стороны, можно здраво отметить, что в Фигме такой функционал уже есть.
Но есть одно большое НО. В Фигме тебе нужно прокликивать шрифты мышкой, или же перемещать курсор. И если ты хочешь сравнить разные шрифты, тебе нужно дублировать текст, выбирать понравившиеся версии и только потом сравнивать.
Здесь же все происходит на одном экране, что оптимизирует процесс поиска «того самого» шрифта.
Из плюсов:
- Простой и понятный функционал
- Возможность посмотреть разные варианты шрифтов на одном экране
- Любой шрифт можно сделать избранным, после чего он выведется в отдельной вкладке
Из минусов:
- Нет фильтрации, а как вы знаете, не все шрифты адекватно реагируют на кириллицу :(
Ссылка на плагин: https://www.figma.com/community/plugin/890494567122693015/font-preview?searchSessionId=lypw6dyf-9hopw99b6gl
Beautiful shadows
На мой взгляд, один из самых приятных плагинов в сегодняшней подборке. BS, исходя из названия, помогает дизайнерам работать с тенями. И если в базовой Фигме все настраивается вручную через эффекты, то здесь все визуализируется на вашем экране.
В плагине вам показывают объект и источник света. Передвигаете источник — передвигается тень. Все просто. Цвет заднего фона можно изменить. Поможет, если вы используете белую тень. А размер и радиус тени меняется в отдельном окошке.
И в целом все. BS работает на тени и отлично с этим справляется.
Из плюсов:
- Визуализация тени и добавление её только после подтверждения
- Возможность менять саму тень
- Простота в использовании
Из минусов:
- А черт знает, мы не нашли, все удобно
Ссылка на плагин: https://www.figma.com/community/plugin/1068595505353552645/beautiful-shadows?searchSessionId=lypwhz9v-yuh2owjt76
Dark Mode Magic
А вот это, напротив, самый странный и непонятный плагин. С одной стороны, его функционал помогает вам перевести любой фрейм в темную тему. Так вы сможете лучше понять, как реализовать её на вашем сайте и это в действительности может спасти ваше время.
А с другой стороны, делает он эту темную тему ну очень странно. Порой он не воспринимает цвета, из-за чего объекты накладываются друг на друга, иногда считает, что текст на визуале не нужен, поэтому на черный задний фон добавляет черный текст. И так далее.
Ошибок с этим плагином множество, но как способ представления темной темы — круто.
Из плюсов:
- Он один — простота и возможность далее сделать свою нормальную темную тему
Из минусов:
- Не всегда грамотно подбирает цвета
- Может наложить темный текст на темный фон
- Может сделать одинаковый цвет разным объектам
- Большую часть работы придется делать вручную
Ссылка на плагин: https://www.figma.com/community/plugin/834062945643616879/dark-mode-magic?searchSessionId=lypwl1uh-95l3f0ij88q
Setup Pages
Маленький плагин, который существует лишь для одного — оптимизации ваших страниц в файле. Буквально, весь функционал направлен на то, чтобы вы в пару кликов создали N-ное количество страниц.
Для этого плагин предлагает выбрать общее кол-во страниц (по стандарту создает 8, но их кол-во можно увеличить), изменить названия и выбрать задний фон страницы (сомнительно, но ладно).
И все, после нажатия на «Create pages» плагин автоматически создает ваши страницы.
Пожалуй, здесь откажемся от плюсов и минусов, т.к. плагин однокнопочный)
Ссылка на плагин: https://www.figma.com/community/plugin/1392655215349091708/setup-pages
Material Palette
А вот тут интереснее, выше мы уже описывали плагин Automate color style, в котором вы могли вывести цвета со всех визуалов на странице. Здесь же функционал заключается в том, чтобы пользователи могли составить свою цветовую палитру.
Для начала вам нужно выбрать название, основной цвет и вид схемы. В дополнительных настройках можно выбрать алгоритм палитры — от ухода в конкретный оттенок до автоматики.
После этих сложнейших настроек плагин составляет цветовую палитру, которой вы можете пользоваться.
Из плюсов:
- Удобный функционал
- Наличие доп. функций, которые помогут выстроить лучшую цветовую палитру
Из минусов:
- Нет локализации
Ссылка на плагин: https://www.figma.com/community/plugin/799767414861565467/material-palette?searchSessionId=lypwr0fi-5xs41feb755
Accidently Great Font Pairings
Еще один интересный плагин, который направлен на типографику. Прелесть AGFP заключается в том, что это бесплатный способ посмотреть на разные связки шрифтов.
При открытии вас встречает кубик д6, а снизу акцентная кнопка — бросить кубик. И все, вы нажимаете на неё и до бесконечности можете получать разные варианты связок шрифтов, которые по мнению создателей плагина отлично сочетаются.
Из плюсов:
- Разберется даже школьник
- Быстро создает фреймы с разными вариантами использования текста
Из минусов:
- Не все шрифты работают с кириллицей
- Нельзя выбрать конкретный шрифт, за все отвечает рандом
Ссылка на плагин: https://www.figma.com/community/plugin/1053376215965114596/accidently-great-font-pairings?searchSessionId=lypwsofi-i19aqw3294e
Chart Maker
А если вы часто работаете с данными и нужно собрать все в одном доке фигмы, не тратя много времени на вырисовывание схем, то Chart Maker облегчит вашу ношу.
Внутри 6 вариантов схем — гистограмма, график, круговой график, точечный график, радар и календарь.
Все данные полностью доступны для редактирования, каждую ячейку можно видоизменять и прописывать самостоятельно. А все математические вычисления для показа данных на экране плагин сделает самостоятельно.
В правой части каждого графика доступна гибкая система настроек, которая визуально изменяет график. В целом, это полезный инструмент, особенно для тех, кто часто работает со всевозможными данными.
Из плюсов:
- Действительно удобный инструмент для данных
- 6 вариантов схем для редактирования
- Гибкая настройка таблиц
Из минусов:
- Таблицы нельзя перемещать по внутреннему интерфейсу
- После вставки таблицы во фрейм, за математические вычисления и визуал отвечаете вы. Плагин не распознает свои таблицы
- Нет шаблонов таблиц, поэтому каждый раз придется настраивать их заново
Ссылка на плагин: https://www.figma.com/community/plugin/1019974184922505532/chart-maker?searchSessionId=lypwvx22-2i8c0540d2q
Photopea
А вот это, пожалуй, самый интересный плагин в сегодняшней статье. Наверняка вы уже в той или иной мере слышали это название — Photopea. А если не слышали, то вы многое потеряли.
В чем суть — Photopea это аналог Фотошопа, который открывается и работает внутри Фигмы. Практически весь функционал, который смогли перенести, работает и это крайне удобно использовать для изменения визуалов.
Не хочется много говорить про него, так как количество функций просто огромно, а эту статью не хочется затягивать. Я просто советую вам включить его и опробовать весь функционал самостоятельно.
Но если вам вдруг будет интересно и вы напишите об этом в комментариях, мы выпустим огромный гайд по функциям Photopea и покажем, какие визуалы с ним вы можете делать.
Ссылка на плагин: https://www.figma.com/community/plugin/1164118094004004837/photopea?searchSessionId=lypx5io4-19wu63hafvu
Webgradients
Часто работаете с градиентами и кажется, что перепробовали все комбинации цветов? Этот плагин, по сути, огромная библиотека градиентов от пользователей, которые так же, как и вы попробовали большое количество сочетаний цветов.
В плагине 180 вариаций градиентов и думаю, что хоть 1 западет в вашу душу и вы сможете использовать их в своих проектах.
По функционалу все просто — выбираете понравившееся сочетание и элемент на экране, после чего градиент перенесется. В плагине предусмотрена небольшая фильтрация — вы можете выбрать главный цвет и отталкиваться в выборе градиента от него. В общем удобный и полезный инструмент.
Из плюсов:
- Огромная библиотека градиентов
- Возможность выбора акцентного цвета
- Возможность скопировать CSS код
Из минусов:
- А их нет, разве что 180 градиентов может вам не хватить)
Ссылка на плагин: https://www.figma.com/community/plugin/802147585857776440/webgradients?searchSessionId=lypxi63l-8z0taoplqjg
Spectrum
Этот плагин переносит выбранную палитру на любое изображение. Настраиваете палитру внутри плагина, меняете ползунки, чтобы добиться лучшего эффекта и при помощи одной кнопки визуал окрашивается в нужный цвет.
Из плюсов:
- Возможность настроить палитру внутри плагина
- Быстро переносит цвета на ваше изображение
Из минусов:
- В бесплатной версии всего 5 активаций плагина, так что да, придется платить, если вам все понравится.
- Порой переносит цвета неправильно
Ссылка на плагин: https://www.figma.com/community/plugin/993087744324640694/spectrum
Morph
В копилочку интересных плагинов Morph, от того же автора.
С его помощью вы можете сделать — неоновый стиль, неоморфизм, глич эффект, рефлекты, стеклянный вид и градиент на выбранном элементе.
Для этого просто выберите элемент и тип изменения и при помощи ползунков регулируйте степень изменений.
Из плюсов:
- Все работает быстро и бесплатно
Из минусов:
- А часто ли оно вам пригодится?
Ссылка на плагин: https://www.figma.com/community/plugin/906950256777348534/morph
А теперь я предлагаю поделиться вашими любимыми плагинами. Ну и, конечно же, раскритиковать нашу подборку. Ведь какой топ-плагинов может обойтись без этого)
Если статья вам понравилась и вы все еще не посмотрели фулловые видосы со всеми плагинами — предлагаю перейти на YouTube и поставить там лайк.
А еще не забывайте подписываться на наш ТГ-канал, в котором мы постим самый разный контент: от экспертных статей до UX-патрулей туалетов в разных ресторанах Санкт-Петербурга)
