Автор: Денис Пристай

З одного боку, простота використання — те, за що ми любимо редактор Figma. З іншого — є завдання, які можна пришвидшити, щоб любити його ще більше.

Плагіни якраз і візьмуть на себе рутинні операції. Ну а ми зберегли вам години пошуків і зібрали 23 плагіни, які можуть бути корисними в роботі.

Роздивляйтеся, тестуйте, спрощуйте собі дизайн-життя.

Плагіни для дизайн-систем і компонентів

Handy Components 

Плагін від Арсена Колиби — куратора курсу Product Design, дизайнера продукту у Wix.

Це чарівна паличка, що автоматично підлаштовує UI компоненти під стиль вашого дизайну. Він визначає, як саме мають виглядати компоненти у файлі, враховуючи типографію, кольори, радіуси кутів та інші параметри.

Design System Organizer

Якщо ви створюєте дизайн-системи — це метч. Плагін дозволяє групувати компоненти, розгруповувати їх, а також пересувати й перейменовувати згруповані компоненти. Зміните назву групи — зміниться й назва всіх компонентів чи стилів у групі.

Після тестового періоду у 45 днів, вам запропонують купити ліцензію.

Design Lint

Є тим самим свіжим оком з боку. Допомагає знайти розбіжності в макетах. У всіх шарах перевіряє кольори, шрифти, заливки, обводки, border-radius та виправляє їх. Плагін працює динамічно, тому буде автоматично оновлюватися після внесення змін.

Плагіни для текстів і шрифтів

Bulka

Ще один плагін з українською душею. Автор — Стас Говорухін, дизайнер, автор курсу Growth Design і лектор на UI/UX Design Beginning.

Плагін прийде на допомогу, коли треба приборкати масиви тексту. Наприклад, у вас є фідбек користувачів, який потрібно перенести в охайні стікери з головними тезами.

Секретна порада від автора: виділіть текст на дошці, а потім запустіть плагін, щоб автоматично вставити текст у Bulka.

Find and Replace 

Плагін, який на раз-два змінює тексти в усьому макеті. Шукайте об'єкти на сторінці за текстовим вмістом або назвою шару і Find and Replace все зробить за вас.

UX Writing Assistant

Цей ШІ-плагін виручить, коли потрібні тексти для інтерфейсів, а UX райтера поруч немає. Можна задавати tone of voice та бажаний розмір контенту.

Плагіни для анімації та 3D дизайну

Figmotion

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

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

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

Кнопка відтворення збереже анімацію на сервері Figmotion, тому просто клацніть на останнє відтворення, і ви перейдете одразу до файлу.

BeatFlyer

Плагін анімує ваші артборди в кілька кліків. Додавайте динаміки у свої шари, комбінуючи стільки ефектів, скільки ви хочете з десятків доступних. Головне — правильно згрупувати шари перед запуском плагіна, щоб дати однакову комбінацію ефектів для кількох елементів.

Плагін є платним.

LottieFiles

Дозволяє додати в макет безоплатні GIF-файли чи фрейми анімації у форматі SVG тисячі. Щоб побачити анімацію в русі — пересвідчіться, що використовуєте режим «Prototype».

Плагін є платним.

Vectary 3D

Плагін додає третій вимір до ваших 2D дизайнів. Ви можете помістити роботу з Figma у заздалегідь визначений 3D макет або власний тривимірний елемент та встановити бажану перспективу.

Плагін є платним.

Плагіни для сіток, макетів, мокапів

LilGrid

Плагін бере різні елементи на вашій інформаційній панелі або у програмі та впорядковує їх у сітку, яку ви можете визначити самі. Добре підходить, щоб навести лад серед багатьох кнопок та/чи іконок.

Coda for Figma

Плагін працює з інструментом генерування документів Coda. Завдяки плагіну ви можете заповнити свої макети даними Spotify, Wikipedia, Dropbox, Gmail, Google Calendar, Jira, Shopify, Github тощо.

Mockuuups Studio

Пропонує понад 500 мокап-варіантів, які можете додати у кілька кліків. Загалом плагін має все, що вам може знадобитися для візуалів у соцмережах або блогах, маркетингових матеріалів, макетів продуктів тощо.

Плагін є платним.

Similayer

З цим плагіном можете знаходити та обирати леєри зі спільними параметрами.

Плагіни для зображень і файлів

TinyImage Compressor

Простий плагін, який зменшує розмір файлів ефективніше, ніж експорт за замовчуванням у Figma. А також дозволяє оптимізувати прозорі PNG та прогресивні JPEG-файли. При експорті кількох файлів автоматично формує їх як ZIP-папку. Підтримує формати JPG, PNG, SVG, WebP, GIF, WebM, AVIF та PDF.

Після 15 використань вам запропонують купити ліцензію.

Remove BG

Плагін на базі штучного інтелекту, який допомагає позбутися тла на зображенні в один клік. 

Щоб користуватися інструментом, вам знадобиться акаунт, що дасть доступ до 50 безоплатних дій на рік.

Map maker

Плагін дозволяє легко вставляти персоналізовані мапи у ваші проєкти та редагувати ті, які ви вже створили. Приємність — інтструмент працює з Google Maps.

Плагіни для роботи з кольором

Image Palette

Створює колірну палітру, базуючись на завантаженому зображенні.

Color Kit

Плагін допоможе генерувати світлі та темні відтінки потрібного вам кольору. Корисно, коли необхідно створити колірні градації.

Invert Color

Плагін змінює на протилежні кольори ефектів, фони, заливки, контури. Можна інвертувати одразу кілька обраних фігурі, частин тексту, фреймів тощо.

Плагіни для вебдоступності та інклюзивності

Include

Плагін, який спрощує додавання приміток щодо вебдоступності в дизайн-файли. Варто лише обрати top-level фрейм і запустити перевірку.

Stark 

Стоїть на сторожі комфортного інтерфейсу для усіх. Виявляє та розв’язує проблеми з доступністю дизайн-елементів на сайтах і застосунках.

У безоплатній версії можна моніторити до 5 сторінок.

Contrast 

Перевіряє контрастність кольорів та їхню відповідність до WCAG. Виберіть шар, і плагін відображатиме коефіцієнт контрастності разом із рівнями відповідності та невідповідності згідно з принципами вебдоступності.