Топ 25 лучших Плагинов Figma, о которых вы, возможно, не знали

Возможности графического редактора Figma можно значительно расширить при помощи плагинов, которые могут быть установлены из раздела Plugins на сайте или в окне самой программы перейдя в раздел Community. Навыкам работы с плагинами Figma обучают даже на онлайн курсах, поскольку сложно представить себе профессионала, который работает в Фигме и не использует возможность упростить и ускорить процесс создания макетов.

Для того, чтобы установить плагин, вам нужно нажать на ссылку «Try it out», после чего откроется диалоговое окно с предложением запустить плагин (синяя кнопка Run). Справа от этой кнопки так же будет иконка с тремя точками, нажатием на которую вы можете сохранить плагин в своей коллекции (Save).

Ниже, мы рассмотрим наиболее популярные плагины Figma, которые однозначно должны быть в инструментарии того, кто занимается дизайном. Если прямая ссылка на страницу плагина по каким либо причинам не работает — просто введите в поисковой строке раздела Community название плагина.

Плагин Iconify позволит вам в несколько кликов добавлять векторные иконки в свой макет. Поддерживается большое количество коллекций иконок, включая Material Design Icons, FontAwesome, Jam Icons, EmojiOne, Twitter Emoji и т.д.

Установить Iconfy

Плагин Remove Bg позволяет удалять фон у изображений при помощи искусственного интеллекта. Недостаток его в том, что бесплатно он позволяет отредактировать не более 50 изображений.

Установить Remove Bg

Плагин Image Tracer позволяет быстро конвертировать растровые изображения в векторные. Конечно, не все изображения подойдут для подобного рода конвертации, однако с какими нибудь иконками или логотипами справляется отлично.

Установить Image Tracer

Этот плагин позволяет в пару кликов добавить в проект фото с популярного сайта Unsplash. Вам больше не нужно открывать сайт в браузере и тратить время на сохранение изображения и копирования его в проект с локального диска.

Установить Unsplash

Плагин Content Reel позволяет в пару кликов добавлять различный текстовый или графический контент в ваши проекты. Например сгенерировать нужного размера параграфы текста, подставить адреса компаний, добавить аватарки или иконки — все это делается буквально в пару кликов.

Установить Content Reel

Плагин Blobs генерирует абстрактные объекты (блобы, кляксы), которые можно использовать в качестве фона для различных блоков контента и иллюстраций. Вы можете настраивать внешний вид вашего «блоба», изменять его, заливать различными цветами и т.д.

Установить Blobs

Плагин Get Waves позволяет генерировать SVG волны, которые можно использовать в дизайне различных блоков. Вы можете настраивать внешний вид и сложность волн. Совмещая различные цвета и прозрачность можно добиться очень интересных результатов.

Установить Get Waves

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

Установить Wireframe

Плагин Datavizer позволяет создавать различные графики и диаграммы, причем вы можете использовать реальные данные в формате CSV или JSON. Просто незаменимый плагин Figma если вы рисуете интерфейсы в которых есть статистические данные.

Установить Datavizer

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

Установить Image Palette

Плагин Clay Mockups 3D позволяет вставлять объекты в мокапы различных устройств. Имеется возможность изменения угла, освещения, тени, цвета устройства и его модель (поддерживаются наиболее популярные, вроде iPhone, MacBook и т.д.).

Установить Clay Mockups 3D

Плагин Map Maker для Фигмы позволяет дизайнеру быстро добавлять карты Google Maps в проект. Вы можете выбрать определенную локацию а так же вид карты и уровень приближения. К сожалению, поддерживаются только карты Google.

Установить Map Maker

Плагин Figmotion позволяет создавать продвинутые анимации в Фигме. Он является довольно простым в использовании и позволит отказаться от сторонних программ при создании несложных анимаций.

Установить Figmotion

Плагин позволяет сжимать графические объекты без потери качества, при этом уровень компрессии может достигать 90%. Может экспортировать всю графику из проекта в один архив. Плагин условно бесплатный, вы можете бесплатно сжать до 15ти изображений.

Установить TinyImage Compressor

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

Установить Spellchecker

Небольшой и простой в использовании плагин Figmoji поможет вам добавить смайлики (эмодзи) в свои проекты. Все эмодзи разделены на категории для удобного поиска, а импорт осуществляется по клику на нужный смайл.

Установить Figmoji

Плагин Builder.io позволит вам конвертировать ваши дизайн-проекты в HTML, CSS, React, Vue и т.д. Конечно, плагин не заменит работу верстальщика на все 100%, однако он вполне неплохо справляется с небольшими лэндингами.

Установить Builder.io

Плагин Find and Replace предназначен для поиска и замены текста внутри проекта Figma. Он реально может выручить в случаях, когда в процессе создания макетов была допущена ошибка в написании слова, после чего она «тянулась» по всему проекту.

Установить Find and Replace

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

Установить Vector Maps

Плагин Halftones позволяет добавлять интересные точечные и полутоновые эффекты фотографиям. Подобные фильтры позволяют создавать очень интересные изображения из казалось бы ни чем не выделяющихся фото.

Установить Halftones

Плагин HTML to design позволяет в пару кликов конвертировать любую html-страницу в векторный макет Figma. Будет очень полезен тем, кто хочет использовать в своих работах какие либо интересные решения, которые они увидели на других сайтах.

Установить HTML to design

Плагин Perspective Toolkit для Figma позволяет трансформировать объект по перспективе (3D трансформация). Отлично подойдет для добавления скриншотов в дисплеи компьютеров, ноутбуков или смартфонов.

Установить Perspective Toolkit

Плагин Beautiful Shadows позволяет добавлять красивые и реалистичные тени для объектов в Фигме. Плагин работает значительно лучше стандартного Drop Shadow, при этом он так же прост в использовании.

Установить Beautiful Shadows

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

Установить Image Editor

Плагин Photopea это бесплатная замена популярной программе Adobe Photoshop для Figma. Этот плагин позволяет редактировать и создавать растровые изображения прямо в Фигме. Возможности данного плагина конечно не на 100% такие же, как возможности Фотошопа, однако, он позволяет делать все самое необходимое.

Установить Photopea

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