ГАРАЖ
20 корисних плагінів для Figma, що зекономлять ваш час
З одного боку, простота використання — сильна сторона редактора Figma. З іншого — є завдання, що потребують використання додаткових програм. Зменшити кількість таких завдань та оптимізувати рутинні процеси допоможе використання плагінів. Ну а ми вирішили допомогти в їх пошуку й зробили підбірку з 20 плагінів, які, на нашу думку, будуть корисними в роботі.
Figmotion
Цей плагін працює як повноцінний інструмент для створення анімації безпосередньо в Figma. Завдяки цьому плагіну ви можете створювати базові анімації без потреби переходити до окремих інструментів на кшталт Principle, Haiku чи After Effects.

Створити анімацію достатньо просто:

  1. виберіть фрейм, який ви хочете відредагувати;
  2. запустіть Figmotion, натиснувши правою кнопкою мишки (плагін — Figmotion).
  3. використовуйте звичні шкалу часу та кнопку з ромбом, щоб змінити стиль елемента в конкретний момент;
  4. ви можете запустити анімацію кнопкою «програвання» та зрендрерити, коли будете задоволені результатом.

Примітка: Кнопка відтворення збереже анімацію на сервері Figmotion, тому просто натисніть кнопку останнього відтворення, і вона перенаправить вас до анімації.
LilGrid
Плагін допоможе вам очистити інтерфейс програми. Він бере різні елементи на вашій інформаційній панелі або в програмі та впорядковує їх у сітку, яку ви можете визначити самі. Добре підходить для організації багатьох кнопок та/чи іконок.
Design System Organizer
Допоможе тим, хто працює над створенням дизайн систем. Він дозволяє групувати компоненти, розгруповувати їх, а також пересувати й перейменовувати згруповані компоненти. Зміните назву групи — зміниться назва всіх компонентів чи стилей в групі.
Table Paste
Допомагає перенести дані з таблиць Excel в стилізовані таблиці, які створені в Figma. Плагін дає можливість налаштувати певні параметри, аби заздалегідь визначити стилі елементів таблиці.
BeatFlyer Lite
Плагін анімує ваші артборди в кілька кліків. Анімуйте свої шари незалежно, комбінуючи стільки ефектів, скільки ви хочете з десятків доступних. Головне — правильно згрупувати шари перед запуском плагіна, щоб дати однакову комбінацію ефектів для кількох елементів.
Content Reel
Допомагає заповнювати рандомізованим вмістом такі поля як: ім'я та прізвище, номер телефону, адреса, e-mail, назва компанії, країна тощо. Крім того, є можливість додавати аватари та піктограми. Це допомагає вашому дизайну виглядати більш реалістично.
Map maker
Map Maker дозволяє легко вставляти персоналізовані карти у ваші проєкти та редагувати карти, які вже створили. Працює з Google Maps і Mapbox.
Image Palette
Створює колірну палітру, базуючись на завантаженому зображенні.
LottieFiles
Дозволяє додати в макет безкоштовні анімації у вигляді GIF-файлів чи фреймів анімації у вигляді SVG тисячі. Щоб побачити анімацію в русі — пересвідчіться, що використовуєте режим «Prototype».
TinyImage Compressor
Простий плагін, який зжимає розмір файлів ефективніше, ніж експорт за замовчуванням у Figma. А також дозволяє оптимізувати прозорі PNG та прогресивні JPEG-файли. При експорті кількох файлів автоматично експортує їх як ZIP-папку. Підтримує формати JPG, PNG, SVG, WebP, GIF, WebM, AVIF та PDF.

Важливо — після 15 використань вам запропонують купити ліценцію.
Design Lint
Допомагає знайти розбіжності в макетах: у всіх шарах перевіряє кольори, шрифти, заливки, обводки, border-radius та виправляє їх. Плагін працює динамічно, тому буде автоматично оновлюватися після внесення змін.
Remove BG
Дозволяє швидко видалити тло зі зображення. Для використання плагіна вам знадобиться акаунт, що дасть доступ до 50 безкоштовних дій на рік.
Chart
Плагін дозволяє генерувати діаграми за заданими значеннями. Може бути корисним на етапі прототипування. Також для цих же завдань можна використовувати плагін — Charts.
Color Kit
Плагін допоможе вам генерувати світлі та темні відтінки потрібного вам кольору. Корисно, коли необхідно створити колірні градації.
Coda for Figma
Плагін працює з інструментом генерації документів Coda. Завдяки плагіну ви можете заповнити свої макети даними таких служб, як Spotify, Wikipedia, Dropbox, Gmail, Google Calendar, Jira, Shopify, Github тощо.
MOCKUUUPS STUDIO
Пропонує понад 500 мокап-варіантів з можливістю додати їх до дизайну у кілька кліків. Загалом, включає все, що вам може знадобитися для публікацій у соціальних мережах або блогах, плюс маркетингові матеріали, макети продуктів та багато іншого.
Vectary 3D
Плагін додає третій вимір до ваших 2D-дизайнів. Ви можете помістити свій дизайн із Figma у заздалегідь визначений 3D-макет або власний 3D-елемент та встановити бажану перспективу.
Font Preview
Цей плагін генерує попередній перегляд усього, що ви друкуєте, прямо у вікні плагіна. Крім того, є можливість зберігати улюблені шрифти на окремій вкладці, фільтрувати шрифти, швидко завантажує шрифти, які інакше не були б видимими.
Viewports
Дозволяє зробити свій сайт зручним для перегляду на різних пристроях. Виберіть один або кілька фреймів та змініть їх розміри на бажаний дисплей.


Сподіваємося, підбірка була для вас корисною й ви знайшли плагіни, які знадобляться у роботі. Якщо ви хочете прокачати свої навички у вебдизайні на практиці — запрошуємо на курс Web Design Junior. А якщо тільки починаєте працювати з Figma, то освоїти інструмент можна на курсі Figma. Basics.
Зібрав: Денис Пристай
Головне фото: Наталія Азаркіна

Віжуали до плагінів взяті із сайту figma.com
Гараж
Сподобалась підбірка?