Must have: Плагины для Figma
Прежде чем презентовать набор плагинов, хотелось бы выделить несколько важных моментов:
- Не нужно засорять пространство для плагинов, добавляйте только те, которые Вам действительно необходимы
- Если плагин нужен единоразово, возможно есть смысл удалить его, после использования
- Старайтесь избегать одинаковых или схожих плагинов: если плагин выполняет идентичную функцию — нет смысла засорять рабочее пространство, тем самым усложняя себе жизнь
- Ниже перечислены плагины, которыми пользуюсь я (Сергей Головашкин), а также плагины, которые скорее всего будут полезны. В любом случае, самый актуальный список из последних плагинов и новинок лучше искать напрямую в Figma Community.
Unsplash
Позволяет искать и добавлять бесплатные для коммерческого и некоммерческого использования изображения, фотографии.
Подробнее & установить: https://www.figma.com/community/plugin/738454987945972471/Unsplash
Image Tracer
Наверное один из самых полезных плагинов, отрисовывает практически любую иконку/иллюстрацию из растрового формата (картинки) в вектор.
P.S. Когда-то давно, старинные дизайнеры использовали Adobe Illustrator, чтобы провернуть подобное волшебство.
Подробнее & установить: https://www.figma.com/community/plugin/735707089415755407/Image-tracer
Breakpoints
Еще не пользовался, но многообещающий. Есть смысл попробовать.
Предварительный просмотр адаптивного макета во фрейме Figma и публикация анимированного прототипа.
Работает даже без открытого окна плагина, и любой из вашей команды может изменить размер фрейма без установленного плагина. В остальном вы можете поделиться прототипом анимации.
► Создать адаптивный макет
► Поделиться анимированным прототипом
Шаг 1. Добавьте новые точки и диапазоны привязки к существующим схемам. Вы получите рамку предварительного просмотра в реальном времени, которая переключается при изменении размера.
Шаг 2. Включите переключатель прототипов и поделитесь прототипом анимации Figma со своей командой в качестве руководства для разработчиков.
Подробнее & установить: https://www.figma.com/community/plugin/824289601590456356/Breakpoints
QR Code Generator
Позволяет сгенерировать QR-код не выходя из фигмы, удобный.
Подробнее & установить: https://www.figma.com/community/plugin/735650288109030027/QR-Code-Generator
Material Design Icons (Community)
Один из способов получения и использования иконок от https://material.io/ (дизайн система Google). Также, из альтернатив — можно установить шрифт (должен быть доступен на сайте дизайн системы).
Подробнее & установить: https://www.figma.com/community/plugin/775671607185029020/Material-Design-Icons-(Community)
Font Preview
Предпросмотр шрифтов в фигме.
Подробнее & установить: https://www.figma.com/community/plugin/890494567122693015/Font-Preview
Component Variables
Плагин не для новичков, но это шедевр!
- Можно построить логику компонентов так же, как и в sketch (мне этого не хватало, очень)
- Позволяет внедрять условия и создавать еще более “умные” компоненты
Подробнее & установить: https://www.figma.com/community/plugin/819995136233235915/Component-Variables
ARC
Удобен для случаев когда текст нужно отобразить по кругу/овалу
Подробнее & установить: https://www.figma.com/community/plugin/762070688792833472/arc
Font Scale
Плагин генерирует текстовые слои (удобно для создания правил типографики (заголовок, параграф и тд.))
Подробнее & установить: https://www.figma.com/community/plugin/735707089415755407/Image-tracer
Map Maker
Отлично подходит для большинства задач, где нужно использовать карту (контакты)
Подробнее & установить: https://www.figma.com/community/plugin/731312569747199418/Map-Maker
Insert Big Image
Позволяет добавлять изображения более чем 4096px без изменения размеров
Подробнее & установить: https://www.figma.com/community/plugin/799646392992487942/Insert-Big-Image
Платные & смысл в использовании только при определенных потребностях
Bannerify
Смешанные ощущения, но однозначно крутой продукт для тех, кому нужно экспортировать дизайн в HTML/GIF или VIDEO
На заметку:
- Очень невнятно уведомляют, что бесплатной версии нет (15 раз можно запустить, после чего требует лицензию).
- Лицензия не дорогая, и вполне оправдывает себя в тех случаях, когда нужно запустить Google Ads (в формате HTML5). Если сравнивать с типичным процессом создания рекламы, стоимость окупается менее чем за 1 рекламный баннер.
- Интуитивно понятный и действительно крутой редактор / процесс: Можно добавить анимации, выбрать для чего и в какой формат экспортировать, Google пропускает без ошибок.
- (!) Сам редактор конвертирует текст в кривые (outline stroke), технически это по идее ок (не нужно ломать голову как подключить шрифт + google ads поддерживают только fonts.google.com); но, это все же кривые а не текст.
Подробнее & установить: https://www.figma.com/community/plugin/796124491692147799/Bannerify-Banner-Studio