Обзор полезных плагинов для Figma

Плагины для 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, и для удобства восприятия разделили их на несколько категорий.

Е-коммерс

Читайте также:

Как онлайн-реклама влияет на продажи в розничных магазинах: считаем с помощью Big Data

Как онлайн-реклама влияет на продажи в розничных магазинах: считаем с помощью Big Data

Работа с графикой

Чтобы работать внутри графического редактора с цветами, фоном и другими графическими элементами, используйте специальные плагины. Они добавляют дизайну уникальности, значительно упрощают работу и позволяют обходиться без сторонних программ.

А чтобы оптимизировать маркетинговый бюджет и оценить эффективность рекламных источников, с которых поступают звонки клиентов, подключите Коллтрекинг 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 минут.

Полезные плагины для наведения порядка:

• 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.