10 минут на чтение Отправь статью на почту?

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

Подписаться
145

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

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

Содержание

Autoflow

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

Autoflow

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

Avatars

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

Avatars

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

BeatFlyer Lite

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

BeatFlyer Lite

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

Blend

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

Blend.png

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

Blobs

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

Blobs

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

Bullets

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

image005.jpg

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

Chart

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

image007.png

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

Charts

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

Charts

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

Chroma

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

image009.png

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

Coda for Figma

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

image010.png

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

Color Kit

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

Color Kit

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

Content Buddy

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

Content Buddy

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

Content Reel

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

Content Reel

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

Design Lint

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

Design System Organizer

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

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

Design System Organizer

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

Design System Organizer

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

Dot Grid

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

Dot Grid

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

Figmoji

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

Figmoji

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

Figmotion

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

Figmotion

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

Font Scale

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

Font Scale

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

Get Waves

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

image018.jpg

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

GiffyCanvas

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

GiffyCanvas

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

Humaaans for Figma

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

Humaaans for Figma

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

Image tracer

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

Image tracer

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

Isometric

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

Isometric

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

LilGrid

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

LilGrid

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

LottieFiles

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

LottieFiles

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

Mapsicle

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

Mapsicle

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

Material Palette

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

Material Palette

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

Movie Posters

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

Movie Posters

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

Palette

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

Palette

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

Status

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

Status

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

Table Paste

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

Table Paste

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

Themer

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

Themer

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

TinyImage Compressor

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

TinyImage Compressor

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

Translate

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

Translate

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

Tumble

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

Tumble

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

Unsplash

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

Unsplash

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

Vector Maps

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

Vector Maps

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

Webgradients

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

Webgradients

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

Wire Box

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

Wire Box

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

Вывод

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


Популярное

Все статьи
Золотой партнер<br>1С-Битрикс
Золотой партнер
1С-Битрикс
Сертифицированное агентство <br>Яндекс.Директ
Сертифицированное агентство
Яндекс.Директ
Сертифицированное агентство <br>Google.AdWords
Сертифицированное агентство
Google.AdWords
Региональный партнер <br>Ru-center
Региональный партнер
Ru-center
Золотой партнер  <br>Битрикс24
Золотой партнер
Битрикс24