Возможности графического редактора Figma можно значительно расширить при помощи плагинов, которые могут быть установлены из раздела Plugins на сайте или в окне самой программы перейдя в раздел Community. Навыкам работы с плагинами Figma обучают даже на онлайн курсах, поскольку сложно представить себе профессионала, который работает в Фигме и не использует возможность упростить и ускорить процесс создания макетов.
Для того, чтобы установить плагин, вам нужно нажать на ссылку «Try it out», после чего откроется диалоговое окно с предложением запустить плагин (синяя кнопка Run). Справа от этой кнопки так же будет иконка с тремя точками, нажатием на которую вы можете сохранить плагин в своей коллекции (Save).
Ниже, мы рассмотрим наиболее популярные плагины Figma, которые однозначно должны быть в инструментарии того, кто занимается дизайном. Если прямая ссылка на страницу плагина по каким либо причинам не работает — просто введите в поисковой строке раздела Community название плагина.
1. Iconify
Плагин Iconify позволит вам в несколько кликов добавлять векторные иконки в свой макет. Поддерживается большое количество коллекций иконок, включая Material Design Icons, FontAwesome, Jam Icons, EmojiOne, Twitter Emoji и т.д.
2. Remove Bg
Плагин Remove Bg позволяет удалять фон у изображений при помощи искусственного интеллекта. Недостаток его в том, что бесплатно он позволяет отредактировать не более 50 изображений.
3. Image Tracer
Плагин Image Tracer позволяет быстро конвертировать растровые изображения в векторные. Конечно, не все изображения подойдут для подобного рода конвертации, однако с какими нибудь иконками или логотипами справляется отлично.
4. Unsplash
Этот плагин позволяет в пару кликов добавить в проект фото с популярного сайта Unsplash. Вам больше не нужно открывать сайт в браузере и тратить время на сохранение изображения и копирования его в проект с локального диска.
5. Content Reel
Плагин Content Reel позволяет в пару кликов добавлять различный текстовый или графический контент в ваши проекты. Например сгенерировать нужного размера параграфы текста, подставить адреса компаний, добавить аватарки или иконки — все это делается буквально в пару кликов.
6. Blobs
Плагин Blobs генерирует абстрактные объекты (блобы, кляксы), которые можно использовать в качестве фона для различных блоков контента и иллюстраций. Вы можете настраивать внешний вид вашего «блоба», изменять его, заливать различными цветами и т.д.
7. Get Waves
Плагин Get Waves позволяет генерировать SVG волны, которые можно использовать в дизайне различных блоков. Вы можете настраивать внешний вид и сложность волн. Совмещая различные цвета и прозрачность можно добиться очень интересных результатов.
8. Wireframe
Плагин Wireframe позволяет создавать профессионально выглядящие прототипы дизайна, которые помогают определиться со структурой проекта, и уже на основе утвержденной структуры можно начать работу непосредственно над дизайном.
9. Datavizer
Плагин Datavizer позволяет создавать различные графики и диаграммы, причем вы можете использовать реальные данные в формате CSV или JSON. Просто незаменимый плагин Figma если вы рисуете интерфейсы в которых есть статистические данные.
10. Image Palette
Плагин Image Palette для Figma позволяет генерировать цветовые схемы на основе изображения. В некоторых случая может быть очень полезен и существенно сэкономить вам время, например, при создании логотипа или оформления посадочной страницы.
11. Clay Mockups 3D
Плагин Clay Mockups 3D позволяет вставлять объекты в мокапы различных устройств. Имеется возможность изменения угла, освещения, тени, цвета устройства и его модель (поддерживаются наиболее популярные, вроде iPhone, MacBook и т.д.).
12. Map Maker
Плагин Map Maker для Фигмы позволяет дизайнеру быстро добавлять карты Google Maps в проект. Вы можете выбрать определенную локацию а так же вид карты и уровень приближения. К сожалению, поддерживаются только карты Google.
13. Figmotion
Плагин Figmotion позволяет создавать продвинутые анимации в Фигме. Он является довольно простым в использовании и позволит отказаться от сторонних программ при создании несложных анимаций.
14. TinyImage Compressor
Плагин позволяет сжимать графические объекты без потери качества, при этом уровень компрессии может достигать 90%. Может экспортировать всю графику из проекта в один архив. Плагин условно бесплатный, вы можете бесплатно сжать до 15ти изображений.
Установить TinyImage Compressor
15. Spellchecker
Плагин Spellchecker занимается проверкой орфографии. Поддерживаются русский, украинский, казахский и английский языки. Ошибки подсвечиваются красным цветом и вам предлагаются варианты для исправления.
16. Figmoji
Небольшой и простой в использовании плагин Figmoji поможет вам добавить смайлики (эмодзи) в свои проекты. Все эмодзи разделены на категории для удобного поиска, а импорт осуществляется по клику на нужный смайл.
17. Builder.io — Figma to HTML, React and more…
Плагин Builder.io позволит вам конвертировать ваши дизайн-проекты в HTML, CSS, React, Vue и т.д. Конечно, плагин не заменит работу верстальщика на все 100%, однако он вполне неплохо справляется с небольшими лэндингами.
18. Find and Replace
Плагин Find and Replace предназначен для поиска и замены текста внутри проекта Figma. Он реально может выручить в случаях, когда в процессе создания макетов была допущена ошибка в написании слова, после чего она «тянулась» по всему проекту.
19. Vector Maps
Плагин Vector Maps позволяет вставлять в документ векторные карты различных стран. Подобные карты могут пригодиться, скажем, для выбора региона, или указания локаций на странице контактных данных.
20. Halftones
Плагин Halftones позволяет добавлять интересные точечные и полутоновые эффекты фотографиям. Подобные фильтры позволяют создавать очень интересные изображения из казалось бы ни чем не выделяющихся фото.
21. HTML to design
Плагин HTML to design позволяет в пару кликов конвертировать любую html-страницу в векторный макет Figma. Будет очень полезен тем, кто хочет использовать в своих работах какие либо интересные решения, которые они увидели на других сайтах.
22. Perspective Toolkit
Плагин Perspective Toolkit для Figma позволяет трансформировать объект по перспективе (3D трансформация). Отлично подойдет для добавления скриншотов в дисплеи компьютеров, ноутбуков или смартфонов.
Установить Perspective Toolkit
23. Beautiful Shadows
Плагин Beautiful Shadows позволяет добавлять красивые и реалистичные тени для объектов в Фигме. Плагин работает значительно лучше стандартного Drop Shadow, при этом он так же прост в использовании.
24. Image Editor
Плагин Image Editor позволяет добавлять интересные фильтры и эффекты для изображений в Figma. Отлично дополняет базовый функционал программы большим количеством интересных эффектов.
25. Photopea — Photoshop для Figma
Плагин Photopea это бесплатная замена популярной программе Adobe Photoshop для Figma. Этот плагин позволяет редактировать и создавать растровые изображения прямо в Фигме. Возможности данного плагина конечно не на 100% такие же, как возможности Фотошопа, однако, он позволяет делать все самое необходимое.
В заключении
Это далеко не полный список полезных плагинов для Figma. В соответствующем разделе сайта постоянно появляются новые проекты и возможно вам стоит периодически заходить туда, чтобы находить новые инструменты, которые помогут вам сэкономить время и добавить новых эффектов в ваши проекты.
