30 важных плагинов для Figma

Зачем нужны плагины

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

Такие дополнения позволяют увеличить производительность работы за счет автоматизации рутинных задач. Освобождение от монотонных задач позволяет сосредоточиться на более интересных проектах, улучшая качество работы и позволяя проявить большую креативность.

Плагины для редактирования изображений

Photopea

Стоимость: бесплатно 

Язык: английский

Принцип работы: плагин позволяет дизайнерам применять фильтры и эффекты к изображениям, делать коррекцию цвета, масштабировать, обрезать и работать с другими инструментами.

Image Editor

Стоимость: бесплатно 

Язык: английский
Принцип работы: плагин дает возможность редактировать изображения с помощью коррекции цветовых настроек и применения фильтров, а также позволяет сохранять и импортировать пользовательские настройки.

Remove BG

Стоимость: бесплатно 

Язык: английский

Принцип работы: предоставляет возможность автоматически удалять фон с изображений, делая его прозрачным. Инструмент будет полезен для тех, кто занимается созданием логотипов, коллажированием или же работает с графическими элементами.

Image Cutter

Стоимость: бесплатно 

Язык: английский
Принцип работы: предназначен для удобного и быстрого вырезания изображений. Плагин дает возможность масштабировать изображение без значительной потери качества.

Bannerify Banner Studio

Стоимость: бесплатно 

Язык: английский

Принцип работы: расширение помогает создавать и редактировать баннеры и рекламные материалы. С его помощью дизайнеры могут добавлять текст, изображения и другие элементы на заранее созданные баннеры. Также есть возможность анимирования и экспорта готовых баннеры из Figma в HTML, GIF и видео. 

TinyImage Compressor

Стоимость: бесплатно 

Язык: английский

Принцип работы: плагин позволяет без потери качества сжать картинку, что в свою очередь сильно влияет на скорость загрузки страницы. 

Halftones

Стоимость: бесплатно 

Язык: английский

Принцип работы: инструмент для создания эффекта полутонов в дизайне. Позволяет добавлять текстуры и структуру, делая изображение более художественными и интересными.

Плагины для создания форм и макетов

Get Waves

Стоимость: бесплатно 

Язык: английский
Принцип работы: Get Waves позволяет настраивать волновые и криволинейные формы, которые могут быть использованы в дизайне. Дизайнеру не придется вручную выстраивать линии, достаточно будет выбрать предложенный вариант или видоизменить его с помощью ползунков.

Datavizer

Стоимость: бесплатно 

Язык: английский

Принцип работы: здесь можно создать графики, диаграммы и таблицы без сторонних приложений. Принцип работы простой: достаточно загрузить числовые данные и выбрать, как они будут визуализированы. 

Blobs

Стоимость: бесплатно 

Язык: английский

Принцип работы: дополнение дает инструменты для создания абстрактных и органических форм, известных как «блобы». С его помощью вы можете легко генерировать уникальные формы, которые могут использоваться в дизайне для создания необычных и креативных композиций. 

Плагины для преобразования формата 

Image Tracer

Стоимость: бесплатно 

Язык: английский

Принцип работы: обеспечивает быструю возможность преобразования растровых изображений в векторные. Хотя не каждое изображение пригодно для такой конвертации, этот плагин вполне успешно справляется с иконками и логотипами.

To Path

Стоимость: бесплатно 

Язык: английский

Принцип работы: дает возможность преобразовать выделенные векторные объекты в пути (path), что позволяет дизайнерам более точно и гибко управлять формами и кривыми.

HTML to design

Стоимость: бесплатно 

Язык: английский

Принцип работы: любой написанный HTML-код можно загрузить в HTML to design и получить макет или интерфейс. Дополнение облегчает процесс перевода кода в визуальный формат и помогает дизайнерам и разработчикам легче сотрудничать при создании веб-проектов.

Плагины для визуализации контента и текста 

Content Reel

Стоимость: бесплатно 

Язык: английский

Принцип работы: предоставляет доступ к обширной библиотеке изображений и текстов. Плагин позволяет создать контент для макетов на сайте, в базовой версии есть: имена, номера телефонов, адреса США, числа, адреса электронной почты, URL-адреса, компании, имена пользователей и страны и аватарки.

Font Master

Стоимость: бесплатно 

Язык: английский

Принцип работы: плагин сканирует ваш проект и показывает все стили шрифтов и их использование.Тексты можно согласовать и распределить по стилям.

SBOL Typograph

Стоимость: бесплатно 

Язык: русский

Принцип работы: с его помощью можно применять правила типографики к тексту, устанавливая правильные отступы, интервалы и шрифты.

Figmoji

Стоимость: бесплатно 

Язык: английский

Принцип работы: библиотека эмодзи, которая позволяет дизайнерам добавлять символы в макеты. Иконки адаптивны и не изменят внешний вид при переносе в другой формат. 

Vector Maps

Стоимость: бесплатно 

Язык: английский

Принцип работы: библиотека векторных карт и географических элементов. Есть все страны мира, база обновляется часто.

Spellchecker

Стоимость: бесплатно 

Язык: английский
Принцип работы: предоставляет проверку правописания и исправление ошибок написания прямо в Figma. Spellchecker хорошо подойдет, если вы работаете на зарубежный рынок.

Unsplash

Стоимость: бесплатно 

Язык: английский

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

Плагины для анимации и 3D

Figmotion

Стоимость: бесплатно 

Язык: английский
Принцип работы: есть возможность создания интерактивных анимаций и прототипов внутри Figma. Плагин позволяет получить тот же эффект, что и в Principle или After Effects.

Aninix/UI animation

Стоимость: бесплатно 

Язык: английский

Принцип работы: цель Aninix — сделать легче интеграцию анимаций пользовательского интерфейса в продукт разработчиков. Плагин также содержит большую библиотеку анимационных пресетов ручной работы.

Morph

Стоимость: бесплатно 

Язык: английский

Принцип работы: это инструмент для создания плавных анимаций и переходов между элементами в макетах интерфейса. 

Eezin

Стоимость: бесплатно 

Язык: английский

Принцип работы: eezin позволяет создавать более гладкие и красивые анимации в прототипах. Все это влияет на пользовательское восприятие: если время отклика будет слишком быстрым или, наоборот, медленным, то впечатление будет испорчено. 

Prototyper

Стоимость: бесплатно 

Язык: английский

Принцип работы: дает возможность добавлять переходы, анимации и интерактивные элементы в макеты, чтобы продемонстрировать функциональность и взаимодействие внутри приложения или веб-сайта.

Perspective Toolkit

Стоимость: бесплатно 

Язык: английский
Принцип работы: предоставляет инструменты для создания и редактирования элементов с трехмерной перспективой в макетах и иллюстрациях. Perspective Toolkit улучшает визуальные эффекты и глубину дизайна, что полезно при создании трехмерных композиций и иллюстраций.

Vectary 3D Elements

Стоимость: бесплатно 

Язык: английский

Принцип работы: библиотека трехмерных элементов и моделей. Позволяет дополнить дизайн предметами не прибегая к самостоятельному созданию их в Blender.

Плагины для прототипирования и мокапов

Mockup

Стоимость: бесплатно 

Язык: английский

Принцип работы: помогает дизайнерам быстро создавать макеты для визуализации своих идей. Mockup предоставляет инструменты для компоновки элементов интерфейса и прототипирования. 

Angle Mockups

Стоимость: бесплатно 

Язык: английский

Принцип работы: дает доступ к библиотеке макетов и мокапов с разными ракурсами. Позволяет быстро примерить дизайн на реалистичном макете, например, на телефоне или ноутбуке. 

Artboard Studio Mockups

Стоимость: бесплатно 

Язык: английский
Принцип работы: в библиотеке находится несколько тысяч мокапов разных форм и размеров. Помогает примерить дизайн не только в диджитал-пространстве, но и на обычных вещах: упаковках или стаканах.

Как установить плагины в Figma  

Способ 1. Установка из рабочего проекта

1. Чтобы добавить плагин из рабочей области, кликните на значок «Ресурсы» в верхнем меню или нажмите комбинацию горячих клавиш Shift+I.

2. Выберите вкладку «Plugins». Поисковая панель плагинов разделена на две области. В верхней части поиск и сохраненные запросы, в нижней — плагины из списка «From Community».

3. Нажмите на название модуля, чтобы перейти на вкладку с его описанием. Далее нажмите на кнопку «Run». Плагин тут же запустится на рабочем пространстве.

Способ 2. Установка через Explore Community

1. Откройте главную страницу и нажмите на «Explore Community» в нижнем левом углу.

2. Промотайте страницу вниз до раздела «By the Community, for the community», нажмите на фильтр «All resources» и выберите значение «Plugins». Программа покажет все плагины, которые доступны для установки. 

3. Вы можете отсортировать их по популярности (Trending) или дате добавления (Recent). Если рядом с плагином есть значение «in—app purchases», то придется платить за его пользование или оформлять подписку.