Плагины Figma

Возможности графического редактора Figma можно значительно расширить при помощи плагинов, которые могут быть установлены из раздела Plugins
26 февраля 15 мин

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

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

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

1. Iconify

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

Установить Iconfy

2. Remove Bg

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

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

3. Image Tracer

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

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

4. Unsplash

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

Установить Unsplash

5. Content Reel

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

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

6. Blobs

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

Установить Blobs

7. Get Waves

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

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

8. Wireframe

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

Установить Wireframe

9. Datavizer

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

Установить Datavizer

10. Image Palette

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

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

11. Clay Mockups 3D

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

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

12. Map Maker

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

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

13. Figmotion

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

Установить Figmotion

14. TinyImage Compressor

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

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

15. Spellchecker

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

Установить Spellchecker

16. Figmoji

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

Установить Figmoji

17. Builder.io — Figma to HTML, React and more…

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

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

18. Find and Replace

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

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

19. Vector Maps

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

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

20. Halftones

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

Установить Halftones

21. HTML to design

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

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

22. Perspective Toolkit

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

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

23. Beautiful Shadows

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

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

24. Image Editor

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

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

25. Photopea — Photoshop для Figma

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

Установить Photopea

В заключении

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

Понравилось? Поделитесь
Скачать Figma с официального сайта

Скачать Figma с официального сайта

Рассказываем где скачать Figma и как начать пользоваться

Читать
Макеты Figma

Макеты Figma

Рассказываем где скачать Figma и как начать пользоваться

Читать
Шрифты в Figma

Шрифты в Figma

Рассказываем как изменить, скачать и установить шрифт в Figma

Читать