Плагины фигмы — цвета и шрифты, эффекты и мокапы, градиенты и тени, стрелки и линии, таблицы и диаграммы

Где найти и как установить плагины в фигме

Плагины в фигме находятся сразу в нескольких местах. Их можно найти на странице фигма комьюнити figma.com/community или прямо в рабочем файле в кнопке Actions на панели инструментов:

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

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

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

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

Подобрать цветовую палитру для вашего дизайна можно с помощью следующих плагинов:

• Color Palettes ( Colorsinspo ) : Color & Accessibility Tools — позволяет не только подобрать цвета, но также проверить контрастность текста и фона
• Magic color palettes — много качественно подобранных цветовых палитр
• Color palette generator — простой, но удобный генератор сочетаний цветов

Для замены цветов в фигме существуют следующие плагины:

• Image Colorizer — раскрашивает выбранные изображения в градациях заданного цвета
• Color overlay — перекрашивает одноцветные растровые изображения в выбранный цвет. Хорошо подходит например для изменения цвета у растровых иконок.
• Color changer — позволяет заменить определенные цвета в рамках всего проекта

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

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

• Morph — добавляет эффекты скевоморфизма, неонового свечения, глитча, стекла, отражения
• Glass-morphism effect — еще один способ сделать эффект матового стекла
• Effects — предлагает готовые эффекты с градиентами, мокрыми каплями на стекле, шумом, волнами и абстракциями. Также позволяет применить 3д эффекты к векторной фигуре.
• Displace – pattern glass, noise and glitch effects — позволяет добавлять и настраивать эффекты ребристого стекла, шума и глитча
• Figma Duotones — раскрашивает картинку в градациях заданных цветов
• Pixels — создает эффект картинки из пикселей

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

• FontScanner — помогает найти все шрифты и начертания, использующиеся в конкретном файле. Очень полезный инструмент для проверки шрифтового единообразия в ваших проектах.
• Fontpair — делает подбор шрифтовых пар (заголовок и обычный текст)
• Fonts changer — помогает быстро заменить один шрифт на другой в выбранных фреймах
• Typescales — генерирует шрифтовую иерархию с заданными параметрами

Плагины c бесплатными мокапами в фигме

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

• Mockup Plugin – Devices Mockups, Print Mockups, AI Mockups
• iMockup
• Clay Mockups 3D
• Artboard Mockups
• Visual Mockups — Devices & Branding Mockups

Плагины которые переносят сайт или HTML в фигму и наоборот

Нужно внести изменения в дизайн работающего сайта, но исходников у вас нет? Не беда, перерисовывать весь дизайн вручную не придется, ведь есть плагины Figma, с помощью которого можно легко перенести дизайн любого сайта прямо в ваш редактор:

• Web to Figma — Convert any website or HTML code to design
• html.to.design — by ‹div›RIOTS — Import websites to Figma designs (web,html,css)

Провести обратную операцию, то есть преобразовать дизайн в фигме в HTML и CSS код, можно с помощью плагинов Figma to HTML & CSS или Megezon Figma to code. Правда, качество кода здесь сильно хромает.

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

• Beautiful Shadows — добавляет красивые мягкие тени с помощью стандартных эффектов фигмы
• Pretty Shadows — подборка разнообразных готовых теней
• Shadow maker — еще один генератор теней с возможностью гибкой настройки параметров

Плагин для создания таблиц и диаграмм в фигма

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

• Table Creator — топовый вариант. Позволяет создавать таблицы из компонентов, при этом дизайн будет отзывчивым. Можно создавать свои собственные шаблоны или использовать готовые.
• Table to figma — позволяет импортировать данные из гугл таблиц, excel файлов и других форматов прямо в фигму. Результат также реализован компонентами.
• Charts — добавляет графики и диаграммы различных типов (круговые, столбчатые, линейные и т д) в ваш проект

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

• Doodle Arrows — добавляет изогнутые векторные стрелки в ваш проект
• Arrow Auto и Simple Arrow Drawer — соединяют выбранные элементы стрелками (удобно при создании схем и диаграмм)
• Wavy Lines — создает красивые волнистые или зигзагообразные линии

Плагины для градиента в фигме

Здесь я могу выделить следующие варианты:

• Generative Gradients
• Non boring gradients
• Noizy Gradient
• Mesh Gradient

Почему не работают плагины в фигме

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

Поэтому ситуация, когда плагины не работают, или работают некорректно — не редкость, и сделать с этим к сожалению ничего нельзя. Впрочем, часто нужно просто немного подождать — возможно проблемы временные. Также часто причина бывает в блокировках. В этом случае стоит попробовать воспользоваться ВПН. Если всё это не помогло, просто поищите другой плагин или сторонний сервис для выполнения нужной вам задачи.