Підбірка корисних плагінів для Фігма
![](https://worker.romasheva.com/imgur/xEUfaM8.jpg?w=768)
Декілька корисних плагінів для Figma, що зекономлять ваш час
З одного боку, простота використання — сильна сторона редактора Figma. З іншого — є завдання, що потребують використання додаткових програм. Зменшити кількість таких завдань та оптимізувати рутинні процеси допоможе використання плагінів. Ну а ми вирішили допомогти в їх пошуку й зробили підбірку з 20 плагінів, які, на нашу думку, будуть корисними в роботі.
![Photo courtesy of olivia mew(CC No Derivatives)](https://worker.romasheva.com/imgur/1HeTZ1v.png?w=768)
Figmotion
Цей плагін працює як повноцінний інструмент для створення анімації безпосередньо в Figma. Завдяки цьому плагіну ви можете створювати базові анімації без потреби переходити до окремих інструментів на кшталт Principle, Haiku чи After Effects.
Створити анімацію достатньо просто:
- Виберіть фрейм, який ви хочете відредагувати;
- Запустіть Figmotion, натиснувши правою кнопкою мишки (плагін — Figmotion);
- Використовуйте звичні шкалу часу та кнопку з ромбом, щоб змінити стиль елемента в конкретний момент;
- Ви можете запустити анімацію кнопкою «програвання» та зрендрерити, коли будете задоволені результатом.
Примітка: Кнопка відтворення збереже анімацію на сервері Figmotion, тому просто натисніть кнопку останнього відтворення, і вона перенаправить вас до анімації.
![Photo courtesy of olivia mew(CC No Derivatives)](https://worker.romasheva.com/imgur/6awKbzQ.png?w=768)
LilGrid
Плагін допоможе вам очистити інтерфейс програми. Він бере різні елементи на вашій інформаційній панелі або в програмі та впорядковує їх у сітку, яку ви можете визначити самі. Добре підходить для організації багатьох кнопок та/чи іконок.
![Photo courtesy of olivia mew(CC No Derivatives)](https://worker.romasheva.com/imgur/pGGlAOk.gif?w=768)
Design System Organizer
Допоможе тим, хто працює над створенням дизайн систем. Він дозволяє групувати компоненти, розгруповувати їх, а також пересувати й перейменовувати згруповані компоненти. Зміните назву групи — зміниться назва всіх компонентів чи стилей в групі.
![Photo courtesy of olivia mew(CC No Derivatives)](https://worker.romasheva.com/imgur/Rd8bueN.png?w=768)
Table Paste
Допомагає перенести дані з таблиць Excel в стилізовані таблиці, які створені в Figma. Плагін дає можливість налаштувати певні параметри, аби заздалегідь визначити стилі елементів таблиці.
![Photo courtesy of olivia mew(CC No Derivatives)](https://worker.romasheva.com/imgur/lYi44kb.png?w=768)
BeatFlyer Lite
Плагін анімує ваші артборди в кілька кліків. Анімуйте свої шари незалежно, комбінуючи стільки ефектів, скільки ви хочете з десятків доступних. Головне — правильно згрупувати шари перед запуском плагіна, щоб дати однакову комбінацію ефектів для кількох елементів.
![Photo courtesy of olivia mew(CC No Derivatives)](https://worker.romasheva.com/imgur/fAUxX1s.gif?w=768)
Content Reel
Допомагає заповнювати рандомізованим вмістом такі поля як: ім’я та прізвище, номер телефону, адреса, e-mail, назва компанії, країна тощо. Крім того, є можливість додавати аватари та піктограми. Це допомагає вашому дизайну виглядати більш реалістично.
![Photo courtesy of olivia mew(CC No Derivatives)](https://worker.romasheva.com/imgur/9nsF6JM.png?w=768)
Vector Maps
Vector Maps дозволяє завантажувати в макети Figma векторні карти країн, регіонів і міст. Векторна карта буде імпортована у вигляді окремого фрейма.
![Photo courtesy of olivia mew(CC No Derivatives)](https://worker.romasheva.com/imgur/u3NagEd.png?w=768)
Map maker
Map Maker дозволяє легко вставляти персоналізовані карти у ваші проєкти та редагувати карти, які вже створили. Працює з Google Maps і Mapbox.
![Photo courtesy of olivia mew(CC No Derivatives)](https://worker.romasheva.com/imgur/9zXPAMl.png?w=768)
LottieFiles
Дозволяє додати в макет безкоштовні анімації у вигляді GIF-файлів чи фреймів анімації у вигляді SVG тисячі. Щоб побачити анімацію в русі — пересвідчіться, що використовуєте режим «Prototype».
![Photo courtesy of olivia mew(CC No Derivatives)](https://worker.romasheva.com/imgur/Cx3FMMY.jpg?w=768)
TinyImage Compressor
Простий плагін, який зжимає розмір файлів ефективніше, ніж експорт за замовчуванням у Figma. А також дозволяє оптимізувати прозорі PNG та прогресивні JPEG-файли. При експорті кількох файлів автоматично експортує їх як ZIP-папку. Підтримує формати JPG, PNG, SVG, WebP, GIF, WebM, AVIF та PDF.
Важливо — після 15 використань вам запропонують купити ліценцію.
![Photo courtesy of olivia mew(CC No Derivatives)](https://worker.romasheva.com/imgur/L9SWpEM.png?w=768)
Design Lint
Допомагає знайти розбіжності в макетах: у всіх шарах перевіряє кольори, шрифти, заливки, обводки, border-radius та виправляє їх. Плагін працює динамічно, тому буде автоматично оновлюватися після внесення змін.
![Photo courtesy of olivia mew(CC No Derivatives)](https://worker.romasheva.com/imgur/fRrW0N1.jpg?w=768)
Remove BG
Дозволяє швидко видалити тло зі зображення. Для використання плагіна вам знадобиться акаунт, що дасть доступ до 50 безкоштовних дій на рік.
![Photo courtesy of olivia mew(CC No Derivatives)](https://worker.romasheva.com/imgur/makSTcP.png?w=768)
Chart
Плагін дозволяє генерувати діаграми за заданими значеннями. Може бути корисним на етапі прототипування. Також для цих же завдань можна використовувати плагін — Charts.
![Photo courtesy of olivia mew(CC No Derivatives)](https://worker.romasheva.com/imgur/LGteVgG.png?w=768)
Coda for Figma
Плагін працює з інструментом генерації документів Coda. Завдяки плагіну ви можете заповнити свої макети даними таких служб, як Spotify, Wikipedia, Dropbox, Gmail, Google Calendar, Jira, Shopify, Github тощо.
![Photo courtesy of olivia mew(CC No Derivatives)](https://worker.romasheva.com/imgur/I0VNzeD.jpg?w=768)
MOCKUUUPS STUDIO
Пропонує понад 500 мокап-варіантів з можливістю додати їх до дизайну у кілька кліків. Загалом, включає все, що вам може знадобитися для публікацій у соціальних мережах або блогах, плюс маркетингові матеріали, макети продуктів та багато іншого.
![Photo courtesy of olivia mew(CC No Derivatives)](https://worker.romasheva.com/imgur/Tvihzl8.png?w=768)
Vectary 3D
Плагін додає третій вимір до ваших 2D-дизайнів. Ви можете помістити свій дизайн із Figma у заздалегідь визначений 3D-макет або власний 3D-елемент та встановити бажану перспективу.
![Photo courtesy of olivia mew(CC No Derivatives)](https://worker.romasheva.com/imgur/mARhJhy.png?w=768)
Font Preview
Цей плагін генерує попередній перегляд усього, що ви друкуєте, прямо у вікні плагіна. Крім того, є можливість зберігати улюблені шрифти на окремій вкладці, фільтрувати шрифти, швидко завантажує шрифти, які інакше не були б видимими.
![Photo courtesy of olivia mew(CC No Derivatives)](https://worker.romasheva.com/imgur/xZDVhN7.png?w=768)
Viewports
Дозволяє зробити свій сайт зручним для перегляду на різних пристроях. Виберіть один або кілька фреймів та змініть їх розміри на бажаний дисплей.