TОП-40 плагинов Figma

Оглавление

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

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

Autoflow

Ссылка на плагин: https://www.figma.com/c/plugin/733902567457592893/Autoflow

Плагин позволяет создавать связи кривыми между объектами, артбордами и расположением в 2 клика. С этим инструментом легко проиллюстрировать связи между экранами и схемы переходов от страницы к странице

Avatars

Ссылка на плагин: https://www.figma.com/community/plugin/739659977030056719/Avatars

С помощью плагина вы можете генерировать аватарки вымышленных людей, в заданную дизайнером область (прямоугольник, звезда, многоугольник и т.д.). Плагин поддерживает множественную загрузку.

BeatFlyer Lite

Ссылка на плагин: https://www.figma.com/community/plugin/776923340646658146/BeatFlyer-Lite

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

Blend

Ссылка на плагин: https://www.figma.com/c/plugin/735442706723922553/Blend

Этот инструмент помогает создать логотипы и паттерны (фоны) на основе экземпляра фигуры.

Blobs

Ссылка на плагин: https://www.figma.com/community/plugin/739208439270091369/Blobs

Один из трендов современного дизайна – цветовое решение в виде капель (кривых Безье). Плагин «Blobs» помогает контролировать уникальность фигуры, количество точек и т.д.

Bullets

Ссылка на плагин: https://www.figma.com/community/plugin/734628505008435795/Bullets

Редко, когда макет обходится без создания списков. Плагин Bullets позволяет создать стильные маркированные списки. Создавайте стили, сохраняйте их в Figma и используйте их в рамках работы над всем проектом.

Chart

Ссылка на плагин: https://www.figma.com/community/plugin/734590934750866002/Chart

Плагин Chart позволяет создавать графики разнообразных форм. Работает как с рандомными данными, так и с данными клиента. Поддерживается копипаста из Google Sheet, Excel, Numbers, что значительно уменьшает время на обработку данных.

Charts

Ссылка на плагин: https://www.figma.com/community/plugin/731451122947612104/Charts

Плагин Charts позволяет создавать линейные, круговые, кольцевые и многие другие диаграммы. Является неким аналогом Chart, так что стоит решить, каким плагином вам пользоваться удобнее.

Chroma

Ссылка на плагин: https://www.figma.com/c/plugin/739237058450529919/Chroma

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

Coda for Figma

Ссылка на плагин: https://www.figma.com/community/plugin/738264841927149297/Coda-for-Figma

С помощью этого плагина, вы сможете заполнять макеты данными из Wikipedia, Gmail, Github, Jira и т.д.

Color Kit

Ссылка на плагин: https://www.figma.com/community/plugin/797696673804519719/Color-Kit

С помощью плагина Color Kit можно генерировать оттенки выбранного цвета от тёмных к светлым. Раннее дизайнерам требовалось использовать сторонние программы и приложения. Теперь получить 50 оттенков синего можно непосредственно в Figma.

Content Buddy

Ссылка на плагин: https://www.figma.com/c/plugin/731260490045684148/Content-Buddy

Многие дизайнеры сталкивались с ситуацией, когда необходимо изменить одинаковый текст сразу в нескольких макетах. Раньше приходилось открывать каждый макет и отдельно и делать правку. Но плагин Content Buddy, позволяет организовать автоматическую правку одновременно в 50 макетах!

Content Reel

Ссылка на плагин: https://www.figma.com/community/plugin/731627216655469013/Content-Reel

Этот плагин избавляет дизайнера от нужды придумывать «рыбный текст» для макета. Content Reel генерирует как текст, так и аватарки и имена пользователей, телефоны и адреса электронной почты, названия компаний и URL-адреса.

Design Lint

Ссылка на плагин: https://www.figma.com/community/plugin/801195587640428208/Design-Lint

Многие дизайнеры знакомы с ситуацией, когда после сдачи макета, разработчики находят расхождения – несоответствие цветов, шрифтов, заливки и т.д. Design Lint избавляет дизайнера от таких ошибок. Он проверяет макет полностью и автоматически исправляет несоответствия. Инструмент работает динамически и учитывает при проверке уже внесённые дизайнером исправления.

Плагин позволяет работать над макетом, не зацикливаясь на ошибках и мелких помарках.

Design System Organizer

Ссылка на плагин: https://www.figma.com/community/plugin/802579985985331070

Этот инструмент позволяет сгруппировать элементы в удобном интерфейсе. Таким образом можно упорядочить структуру, без утомительной работы. А значит, дизайнер избавлен от необходимости прописывать вручную такие пути как «Иконки / Маленькие / Состояния / По умолчанию». Если вы переименуете название группы, то это название будет автоматически изменено для всех компонентов и стилей.

Dot Grid

Ссылка на плагин: https://www.figma.com/community/plugin/795474715778185230/Dot-Grid

Плагин для тех, кто работает с сетками. С его помощью, можно украсить точечную сетку согласно выбранным параметрам (ширина, длина, цвет, разрывы). Dot Grid поможет заполнить пустоту ненавязчивым привлекательным элементом.

Figmoji

Ссылка на плагин: https://www.figma.com/community/plugin/736612173445813953/Figmoji

С помощью плагина Figmoji можно добавлять различные Эмодзи в формате svg.

Figmotion

Ссылка на плагин: https://www.figma.com/community/plugin/733025261168520714/Figmotion

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

Font Scale

Ссылка на плагин: https://www.figma.com/community/plugin/741231992144144738/Font-Scale

Это плагин для новичков в дизайне, которые ещё не приобрели навык автоматически, «на глаз», определять пропорции шрифтов. Font Scale позволяет быстро создать последовательную иерархию типографики.

Get Waves

Ссылка на плагин: https://www.figma.com/community/plugin/745619465174154496/Get-Waves

С помощью плагина Get Waves вы сможете создавать собственные эффекты волн.

GiffyCanvas

Ссылка на плагин: https://www.figma.com/community/plugin/803633147991628761/GiffyCanvas

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

Humaaans for Figma

Ссылка на плагин: https://www.figma.com/community/plugin/739503328703046360/Humaaans-for-Figma

Добавив плагин Humaaans for Figma, вы получаете возможность пользоваться огромной библиотекой с иллюстрациями людей. С этими иллюстрациями можно работать прямо в Figma, комбинируя, создавая новые образы. Плагин позволяет менять причёски и одежду, добавлять разное окружение.

Image tracer

Ссылка на плагин: https://www.figma.com/community/plugin/735707089415755407/Image-tracer

Плагин Image tracer поможет вам преобразовать растровые чёрно-белые изображения в кривые, чтобы получить возможность внести изменения. Подходит для тех, кто часто теряет исходники логотипов и иконок.

Isometric

Ссылка на плагин: https://www.figma.com/community/plugin/741184519069077841/Isometric

Плагин Isometric позволяет создать изометрическую проекцию дизайна прямо в Figma, не прибегая к помощи Photoshop и других графических программ.

LilGrid

Ссылка на плагин: https://www.figma.com/community/plugin/795397421598343178/LilGrid

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

LottieFiles

Ссылка на плагин: https://www.figma.com/community/plugin/809860933081065308/LottieFiles

Плагин LottieFiles позволяет украсить прототип анимациями. Плагин позволяет создавать собственные анимации или использовать готовые из библиотеки. Плагин позволяет вставлять анимационные фреймы как высококачественные SVG.

Mapsicle

Ссылка на плагин: https://www.figma.com/c/plugin/736458162635847353/Mapsicle

В прототипе нужна карта? С плагином Mapsicle можно генерировать карты и вставлять в заданную область. При этом можно воспользоваться набором стилей и поиском по координатам.

Material Palette

Ссылка на плагин: https://www.figma.com/community/plugin/799767414861565467/Material-palette

Многие дизайнеры используют инструмент Material Design для создания палитр. Теперь создавать палитры можно прямо в Figma, экономя время и силы. Сейчас в плагине три типа палитр: True monochrome, Monochrome и Material.

Movie Posters

Ссылка на плагин: https://www.figma.com/community/plugin/797471678566755597/Movie-Posters

Movie Posters – полезный плагин для тех, кто занимается созданием сайта по тематике «Кино, ТВ и сериалы». В векторный объект, созданный дизайнером, подгружается постер фильма, сериала или ТВ-шоу, популярный на данный момент.

Palette

Ссылка на плагин: https://www.figma.com/community/plugin/742549221432366731/Palette

Если вы любите эксперименты и «поиграть с цветами» – плагин Palette как раз для вас. Машинный интеллект генерирует автоматические палитры. Вы можете блокировать цвета, менять их местами. Плагин постоянно обновляется, туда добавляются новые варианты палитр, что позволяет экспериментировать на полную катушку.

Status

Ссылка на плагин: https://www.figma.com/community/plugin/742769304454952644/Status-%E2%9C%85

Плагин Status позволяет помечать статус дизайна. Когда над макетом работают несколько разработчиков, бывает трудно понять – какие страницы уже готовы к реализации, а над какими ещё ведётся работа. Воспользуйтесь плагином Status, чтобы решить эту проблему.

Table Paste

Ссылка на плагин: https://www.figma.com/community/plugin/781208362060364436/Table-Paste

Table Paste – ещё один табличный плагин, который позволяет перенести данные из Excel в стилизованные таблицы в Figma. Работать с ним достаточно просто – нужно создать свой стиль таблицы, а затем переносить данные из Excel, они автоматически стилизуются.

Themer

Ссылка на плагин: https://www.figma.com/community/plugin/731176732337510831/Themer

Дизайнеры знают, как много времени и нервов отнимают сложные макеты, когда требуется переключать темы. С помощью плагина Themer можно создавать «темы», закрепив за ними стили из библиотек. А затем по одному клику менять стили.

TinyImage Compressor

Ссылка на плагин: https://www.figma.com/community/plugin/789009980664807964/TinyImage-Compressor

Плагин TinyImage Compressor позволяет экспортировать ваши файлы в Figma и сжать их размер без потери качества. Плагин оптимизирует JPEG, а также PNG без фона, автоматически преобразует множественную загрузку в ZIP-папку. Правда у плагина есть ограничение на сжатие 15 файлов бесплатно, после придётся приобрести лицензию, но многие дизайнеры отмечают, что плагин сжимает файлы на 90% лучше, чем встроенные инструменты Figma.

Translate

Ссылка на плагин: https://www.figma.com/community/plugin/733062974250826253/Translate

Плагин Translate помогает автоматически перевести интерфейс на выбранный язык. Пока количество языков ограничено, но у расширения огромный потенциал.

Tumble

Ссылка на плагин: https://www.figma.com/community/plugin/736084415195819692/Tumble

Плагин Tumble добавит эффект гравитации и прибьёт объекты к нижней границе фрейма. Таким образом, можно быстро создать забавные паттерны, которые «работают благодаря силе Ньютона».

Unsplash

Ссылка на плагин: https://www.figma.com/c/plugin/738454987945972471/Unsplash

Плагин Unsplash интегрируется со стоковым сервисом и позволяет выбрать бесплатное стоковое изображение на любую тему. Можно использовать случайные снимки или поискать внутри расширения близкую по тематике.

Vector Maps

Ссылка на плагин: https://www.figma.com/community/plugin/777954172157933782/Vector-Maps

С помощью Vector Maps можно загрузить в макеты векторные карты. Для выбора страны или региона достаточно ввести название в поиск или выбрать на карте. Карта импортируется в Figma в виде отдельного фрейма.

Webgradients

Ссылка на плагин: https://www.figma.com/community/plugin/802147585857776440/Webgradients

В плагине Webgradients встроенный фильтр позволяет выбрать сочетания цветов для создания градиентов. Созданные градиенты можно добавить в избранное, чтобы, работая над разными страницами одного макета, экономить время на подборе.

Wire Box

Ссылка на плагин: https://www.figma.com/community/plugin/764471577604277919/Wire-Box

Плагин Wire Box позволяет преобразовать макет высокой точности в варфреймы, помогая сосредоточиться на UX, а не на UI. Конечно, работать в системах hi-fi быстрее и проще, но иногда требуется вернуться в lo-fi. Изменение цвета прототипа на навязчивый розовый показывает, что прототип уже в варфрейме.

Вывод

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