30+ полезных плагинов для Figma необходимых UX дизайнеру
Автор: Андрей Климов
Должность: Арт - директор
Должность: Арт - директор
Публикую подборку полезных плагинов для работы в Figma, которыми пользуемся мы в студии karelin.cc. Все плагины разбиты по принципам работы, чтобы вам было проще найти нужный плагин под ваши нужды.
Принципы работы
- Плагины по работе с графикой
- Плагины для генерирования контента
- Плагины для анимации
- Плагины по наведению порядка в проекте
Плагины по работе с графикой
Blobs и Get Waves
Blobs позволяет нам делать простые абстрактные фоны в виде клякс. А Get Waves позволяет генерировать разные волны, иногда используем для создания графиков.
Image Tracer
Очень полезный плагин, который позволяет быстро перевести растровое изображение в векторное.
Color Kit
Этот плагин позволяет сгенерировать темные или светлые оттенки нужного цвета с выбором шага. Помогает нам при создании UI кита для проекта.
Webgradients и uiGradients
Плагины с большой библиотекой красивых градиентов.
TinyImage Compressor
Очень полезный плагин, который сжимает размер файлов лучше, чем экспорт по умолчанию из Figma. Мы часто используем его для оптимизации изображений под web сайты. После 15 сжатий файлов через TinyImage вам будет предложено приобрести лицензию.
Image Palette
Плагин Image Palette создаёт цветовую палитру на основе выбранного загруженного изображения, можно использовать также на логотипах.
Stark и Contrast
Эти плагины помогут посмотреть контрастность элементов по отношению друг к другу.
Remove BG
Крутой плагин, который позволяет быстро удалить фон у изображения.
Есть примечание: Для этого плагина вам потребуется аккаунт и вам дается 50 бесплатных действий на год.
Есть примечание: Для этого плагина вам потребуется аккаунт и вам дается 50 бесплатных действий на год.
Isometric
Плагин позволяет отобразить объект в изометрии вам только требуется настроить угол.
Плагины для генерирования контента
Chart и Charts
Плагины Chart и Charts позволяют генерировать диаграммы по заданным значениям. Мы часто используем на стадии прототипирования, когда нужно быстро показать экран с графиком клиенту или команде для лучшего понимания работы интерфейса.
Figmoji
Плагин для быстрой вставки эмоджи, а не искать нужный эмоджи в браузере.
Iconify
Очень полезный плагин для поиска и добавления пиктограмм прямо в Figma. Так же в этом плагине есть айкон паки, с помощью которых вы можете найти быстро разные пиктограммы в одной стилистике.
Unsplash
Unsplash - это большая библиотека фотографий, с помощью которой можно быстро найти и добавить фотографию прямо в проект.
Mapsicle и Map Maker
Эти плагины позволяют нам выбрать координаты и просто вставить карту прямо в проект. С картами можно взаимодействовать и гибко изменять параметры под себя.
Table Generator
Плагин генерирует обычную таблицу, есть возможность регулирования строк, колонок и ячеек, также можно добавить контент в каждую ячейку. В прототипировании чтобы быстро показать клиенту табличку этот плагин очень полезен.
Content Reel
С помощью этого плагина можно быстро заполнить сайт контентом. Например заполнить имя, фамилию, телефон, время и дату, быстро добавить аватар и тд… Один момент весь контент на английском.
Chroma
Теперь можно добавить цвет в цветовую палитру в один клик. Вам просто надо выбрать нужный объект с цветом и запустить плагин. Цвет появится в библиотеке стилей с названием выбранного объекта.
Wire Box
Плагин позволяет преобразовать готовый дизайн в вайфреймы. Вы просто выбираете нужный макет и запускаете плагин. Плагин очень помогает, когда у клиента есть готовый дизайн, а вам нужно его переделать и в вашем процессе решения задачи используются вайфреймы.
Плагины для анимации
GiffyCanvas
GiffyCanvas позволяет быстро создать gif внутри Figma. Нам просто надо выбрать 2 и более макетов, поставить время интервала и количество циклов.
LottieFiles
С помощью этого плагина вы можете быстро вставить логотип анимации в макет Figma. Плагин помогает нам, когда клиенту нужно показать примерно как будет выглядеть анимация в макете.
Плагины по наведению порядка в проекте
LilGrid
Классный плагин, который берет все неупорядоченные элементы в системе и организует их. Вам остается задать расстояние между элементами и во сколько колонок их организовать.
Design System Organized
Плагин для организации компонентов в Figma. Он позволяет сгруппировать и разгруппировать компоненты а также перемещать их в вашей библиотеке.
Design Lint
Плагин работает как поиск элементов в выбранном макете, у которых вы не использовали цвета и шрифты из библиотеки стилей. Таким образом плагин позволяет быстро находить несоответствия в макетах и исправлять эти несоответствия.
Viewports
Плагин показывает как выглядит ваш макет на разных устройствах. Главное не забывать настроить в Figma ограничения элемента в зависимости от размера окна.
Product Planer
Интересный плагин в котором много шаблонов по которым можно вести планирование по продукту прямо в Figma.
Rename It
Нам этот плагин помогает переименовать быстро слои с разными названиями, чтобы экспортировать макеты в Principle для создания прототипа.
Autoflow
Плагин помогает быстро показать переходы между макетами с помощью визуализации связей.
Time Machine
Этот плагин автоматически копирует версию, которую вы хотите сохранить, на другую страницу под названием «Time Machine» и присваивает макету имя с датой его сохранения.
Спасибо за просмотр!
Мы будем рады если эти плагины облегчат вам работу.
Мы будем рады если эти плагины облегчат вам работу.