Главная | Блог | Темы | Маркетинг | Обзор полезных плагинов для FigmaОбзор полезных плагинов для Figma 26 мая 2023 16 мин на чтение 15 616 дизайн гайды дизайн гайды Юлия УсачеваРедактор блога Calltouch Содержание Нет времени читать? Плагины для Figma — это внешние модули, которые расширяют стандартный функционал программы. Благодаря им дизайнеры могут пользоваться дополнительными возможностями для более быстрой визуализации данных, создания интересной анимации, наполнения макета контентом и выполнения других необходимых действий.Рассказываем о полезных плагинах, которые уже сегодня значительно оптимизируют вашу работу.Где находятся плагины в FigmaЧтобы просмотреть ранее установленные, рекомендуемые или другие плагины, откройте графический редактор, авторизуйтесь через аккаунт Google и перейдите на главную страницу. Затем откройте раздел Plugins и страницу Browse all plugins, на которой собраны все платные и бесплатные плагины для Figma.Как установитьЧтобы установить плагин, воспользуйтесь одним из способов:На странице Browse all plugins в разделе Plugins выберите нужный плагин и кликните Install. Загрузка начинается автоматически и обычно длится не больше минуты. Когда плагин будет установлен, надпись изменится с Install на Installed.Выберите на странице Browse all plugins нужный плагин, чтобы посмотреть небольшое описание, историю версий и рекомендации по использованию в графическом редакторе Figma, а затем — кликните Install.Если плагин не подошел или больше не требуется, вы можете его деактивировать. Для этого на общей странице Browse all plugins или в меню плагина кликните Installed.Обзор полезных плагинов для FigmaВ графическом редакторе Figma можно найти сотни плагинов, которые автоматизируют рабочую рутину. Они показывают разнообразные палитры цветов, создают уникальный графический контент, систематизируют и упорядочивают элементы проекта.Мы собрали самые интересные плагины, которые облегчают создание дизайна в Figma, и для удобства восприятия разделили их на несколько категорий. Маркетинг Читайте также: Что такое YML-файл и как его создать Что такое YML-файл и как его создать Работа с графикойЧтобы работать внутри графического редактора с цветами, фоном и другими графическими элементами, используйте специальные плагины. Они добавляют дизайну уникальности, значительно упрощают работу и позволяют обходиться без сторонних программ.А чтобы оптимизировать маркетинговый бюджет и оценить эффективность рекламных источников, с которых поступают звонки клиентов, подключите Коллтрекинг Calltouch. Помимо источника обращения инструмент определит геоположение, операционную систему, тип устройства и уникальность пользователя. Все эти данные помогут сократить расходы на рекламные кампании и повысить их эффективность. КоллтрекингОтслеживайте источники звонков с рекламы для ее оценкиВкладывайте в ту рекламу, которая приводит клиентов. Слушайте звонки и улучшайте работу менеджеров. ПерейтиПростые и функциональные плагины для работы с графикой:Blobs и Get Waves. Инструменты для бесплатной генерации уникальных SVG-волн. Они кастомизируются в пару кликов, достаточно выбрать кривую и настроить сложность. Удобно, что можно экспериментировать с разными цветами и прозрачностью.Image Tracer. Полезный плагин для Figma, который предназначен для быстрой векторизации изображений. Удобный инструмент, когда необходимо конвертировать растровое изображение, состоящее из пикселей, в векторное, но обводить вручную нет ни времени, ни желания.Color Kit. Чтобы генерировать более светлые или темные оттенки любого цвета, используйте бесплатный плагин Color Kit. Отличная альтернатива сторонним приложениям, чтобы разнообразить проекты и придать цветам динамический диапазон.Webgradients и uiGradients. Удобные инструменты для быстрого добавления градиентов. Просто выберите группу, текст или другой элемент проекта и запустите один из плагинов. Библиотека Webgradients включает 180 интересных градиентов, а uiGradients — 350, что почти вдвое больше.TinyImage Compressor. Подойдет, чтобы быстро экспортировать сжатые изображения в форматах JPG и PNG. Отличается от остальных инструментов возможностью уменьшить размер файлов до 90%. Плагин платный, но есть демоверсия — первые 15 изображений можно сжать бесплатно.Image Palette. Чтобы создать цветовую палитру на основе загруженной фотографии и поддержать единую стилистику, устанавливайте Image Palette. Удобно, что плагин можно использовать для работы с логотипами и другими элементами проекта.Stark и Contrast. Бесплатные инструменты для проверки контрастности цветов, которые можно использовать не после завершения проекта, а во время работы. Просто выберите слой, и плагин сравнит его с выделенным цветом.Remove BG. Главное преимущество плагина — удаление фона с изображения за 3–5 секунд. Remove BG отличается от остальных инструментов тем, что пользователю не требуется вручную удалять каждый слой, — все происходит автоматически. Минус — нет предварительного просмотра.Isometric. Применяется для создания изометрической проекции дизайна, оставаясь в графическом редакторе. Раньше для этого отдельно использовали Photoshop, но сейчас изометрия доступна в пару кликов прямо в Figma.Генерирование контентаГлавное в работе дизайнера — контент. Чтобы работать с ним быстро и удобно, используйте специальные плагины для редактора Figma. Они генерируют тексты, создают таблицы и диаграммы, выгружают изображения из бесплатных фотостоков.Популярные плагины для создания контента:Charts. Используйте этот плагин, чтобы создавать различные диаграммы на основе реальных или случайно сгенерированных данных. Отличается от аналогичных инструментов тем, что поддерживает копирование из популярных редакторов — например, Excel и Google Sheets.Figmoji. Простой, но удобный плагин для использования эмодзи в проекте. Достаточно его запустить прямо из Figma, выбрать подходящие смайлики из открывшегося списка, которые разделены на несколько категорий, и кликнуть по ним для вставки.Iconify. С этим плагином можно за 2–3 секунды добавлять векторные иконки в проект. Библиотека бесплатных инструментов Iconify включает разноформатные коллекции иконок, в том числе FontAwesome, Twitter Emoji и другие.Unsplash. Чтобы использовать в макете красивые изображения из фотостока Unsplash, используйте одноименный плагин для графического редактора Figma. Лицензия Unsplash позволяет свободно выгружать фотографии для коммерческих и личных проектов.Mapsicle и Map Maker. Полезные инструменты для создания уникальных карт. Они поддерживают Google Maps и Mapbox, не ограничивают выбор локаций и предоставляют возможность настраивать вид карты, цветовое исполнение, степень приближения.Table Generator. Применяется для быстрого создания и добавления таблиц в проект. Достаточно открыть плагин, задать параметры — и информация отобразится в форме таблицы. Отдельный плюс состоит в том, что ячейки можно стилизовать.Content Reel. Чтобы не придумывать «рыбный текст», который нужен только для заполнения пространства макета, используйте плагин Content Reel. Он генерирует не только текстовый, но и графический контент — например аватарки пользователей.Chroma. Бесплатный инструмент для создания цветов. Достаточно выделить объекты с заливкой и открыть плагин прямо из Figma, чтобы стили автоматически сгенерировались. Это ощутимо экономит время на поиск подходящих к проекту цветов.Wire Box. Используется для конвертации проектов обратно в прототипы всего одним кликом. Это важно, когда при разработке макета необходимо сконцентрироваться на «опыте пользователя» (UX), а не на оформлении (UI).Создание анимацииВ графическом редакторе Figma есть несколько способов создания анимации, но самый удобный — использовать плагины. Они позволяют разрабатывать новые анимационные эффекты или использовать готовые варианты из библиотеки.Лучшие плагины для создания анимации:GiffyCanvas. Предназначен для генерации GIF в графическом редакторе. Чтобы его использовать, выберите макеты, укажите временной интервал и количество циклов. Доступен предварительный просмотр, а число изображений для создания GIF не ограничено.LottieFiles. Популярный инструмент для создания анимации и использования готовых вариантов из библиотеки плагина. Его часто используют, чтобы показать клиенту примерный дизайн и расположение анимации в проекте.Figmotion. Еще один плагин для создания анимационных эффектов, которым можно пользоваться, не выходя из Figma. Используется дизайнерами и верстальщиками, поскольку быстро экспортирует анимацию, как CSS или Json.Наведение порядка в проектеПлагины предназначены не только для работы с контентом. Есть удобные инструменты, которые используют в графическом редакторе для удаления неиспользуемых стилей, группирования изображений и даже массового переименования объектов в пару кликов.А чтобы облегчить для клиентов выбор способа связи с вами, подключите виджеты Calltouch, которые работают на рост продаж и конверсии. Они помогут увеличить количество лидов и не пропустить ни одной заявки даже в нерабочее время. Настроить виджеты можно за 5 минут. ВиджетыВиджеты CalltouchУвеличьте конверсию сайта на 30% Подробнее Полезные плагины для наведения порядка:LilGrid. Позволяет быстро расположить иконки в правильном порядке. Плагин автоматически отбирает элементы и размещает их по сетке, чтобы вам не приходилось делать все вручную. Для этого выберите иконки, которые хотите упорядочить, и кликните «Расположить по сетке».Design System Organized. Бесплатный плагин, который упрощает взаимодействие со стилями и другими элементами дизайн-системы. К его основным возможностям относится группировка компонентов, реорганизация стилей, очищение библиотеки с несколькими именами.Design Lint. Находит недостающие стили на всех слоях макета, поэтому используется для проверки проекта и автоматически вносит исправления до начала разработки. Если вы допустили одну и ту же ошибку в нескольких проектах, кликните «Выбрать все» для одновременного исправления.Product Planner. Удобный инструмент, чтобы планировать, визуализировать и делиться своим видением проекта. Создавайте новые шаблоны или используйте готовые варианты из бесплатной библиотеки плагина.Rename It. Помогает массово переименовывать объекты. Отличается от остальных инструментов тем, что дополнительно включает в название цвет, обводку и даже шрифт слоя. Переименовывать можно в разной последовательности — например по убыванию или возрастанию.Autoflow. Бесплатный плагин, который применяется для визуализации связей между разными объектами макета. Позволяет быстро и легко иллюстрировать связи между элементами при переходах с одной страницы проекта на другую.Time Machine. Автоматически копирует версию макета на страницу, которая называется Time Machine. Она содержит историю того, что вы сохраняли в процессе работы, и располагает макеты в хронологической последовательности для удобного сравнения.Коротко о главномЧтобы расширить возможности графического редактора, используйте дополнительные плагины для Figma, — большинство из них бесплатные и устанавливаются менее чем за минуту.Плагины упрощают создание анимационных и других эффектов, быстро генерируют контент, переводят растровые изображения в векторные и визуализируют информацию.Для разработки уникального дизайна используйте плагины Image Tracer, TinyImage Compressor или Remove BG.Чтобы наполнять проекты полезным контентом, используйте инструменты Table Generator, Map Maker или Figmoji.Среди популярных плагинов Figma, предназначенных для поддержания порядка и удаления «мусора» перед сдачей проекта клиенту, — LilGrid, Rename It и Design Lint. Юлия УсачеваРедактор блога Calltouch