10 найпопулярніших плагінів Figma у 2022 році для UI/UX дизайнерів

Мене звати Свят, я Middle UI/UX designer в TechMagic, і якби мені потрібно було обрати одну програму для роботи на все життя, я обрав би Figma. Три роки роботи з нею — найкращий період мого дизайн життя.

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

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

1. Aninix

Щоб створити анімацію, раніше я годинами страждав в Adobe After Effect. Набагато зручніше, коли все знаходиться в межах основної програми і не потрібно щоразу шукати додаткові інструменти. Саме так влаштована моя робота у Figma.

Нещодавно я почав користуватись плагіном Aninix. Він має гнучку та інтуїтивно зрозумілу систему ключових кадрів і готові пресети, які можна редагувати. Ще одна корисна фіча в тому, що розробники можуть переглядати специфікації створеної анімації, а я — експортувати їх в GIF, MP4, а також (що для мене є найважливішим) — у форматі Lottie.

2. Material Symbols

В більшості моїх проєктів є іконки від Material Design. Саме Google надає великий вибір консистентних іконок, які раніше я завантажував на Google Icons.

А нещодавно зарелізили новий плагін Material Symbols, який містить понад 2500+ іконок. Їх можна шукати, переглядати та змінювати одразу в плагіні, а потім — вставити в робочий файл векторним об’єктом. Це значно пришвидшує роботу, адже зникає необхідність щоразу завантажувати нові svg файли з сайту Google Icons.

З приємного: команда Google обіцяє радувати нас регулярними оновленнями плагіна та поповнювати бібліотеки новими символами.

3. Content Reel

Коли мова йде про додавання контенту не просто з Lorem ipsum, то зазвичай мій мозок генерує щось схоже на «Olegan Moralinomotka». Ситуація з емейлами не краща, на жаль. Але цьогоріч я відкрив для себе плагін від дизайн-команди Microsoft, який вирішив цю проблему.

Content Reel за декілька секунд генерує імена, адреси електронних скриньок, номери телефонів, фото користувачів та багато іншого. До того ж, плагін дає змогу створювати власні зразки тексту та зображень, які потім можна використовувати на постійній основі. Тепер я користуюсь ним регулярно, і з моїх мокапів назавжди зникли імена схожі на «Ivanolin Romastanovanenko».

4. LottieFiles

Я вже згадував, що на проєкті часто працюю з анімацією. Моя робота ускладнювалась тим, що я не мав змоги отримати прев’ю JSON анімації в Figma. Тепер за допомогою плагіна LottieFiles я можу переглядати файли dotLottie (.lottie) і JSON (.json) безпосередньо в Figma.

Щобільше, плагін дає доступ до бібліотеки безкоштовних анімацій, дозволяє конвертувати їх в gif, а також дає можливість вставляти кадри анімації, як svg об’єкти.

Крім того, розробники регулярно покращують плагін та додають нові функції.

5. Frame Tags

Під час роботи над великими проєктами я намагаюсь зробити файли зручними для навігації. Це особливо актуально, якщо файл переглядають інші члени команди, наприклад, QA, PM, BA, Dev’s. Адже вони не так добре орієнтуються в розміщенні екранів, а їм потрібно мати змогу швидко побачити актуальний статус кожного з них.

Щоб не створювати теги вручну, з плагіном Frame Tags я можу швидко в один клік додати теги з актуальним статусом над кожним фреймом. Плагін має готовий набір з одинадцяти тегів з різними статусами. В майбутньому розробники планують додати можливість користувачам створювати теги з кастомними статусами.

6. A11y

Зараз є багато сторонніх інструментів, які дозволяють звірити дизайн з рекомендаціями WCAG.

Я завжди перевіряв контраст за допомогою сайту Contrast Ratio, а тепер всі мокапи я перевіряю через плагін A11y безпосередньо у Figma. В ньому можна переглянути контраст всього вмісту робочої області.

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

7. Google Sheets Sync

Часто в роботі недостатньо використовувати вигаданий нереальний контент, на багатьох проєктах потрібно вставляти в макети реальні дані, що містяться в таблицях. Якщо таких даних достатньо багато, їх перенесення відповідно займатиме багато часу.

Плагін Google Sheet Sync автоматизує увесь цей процес та дуже швидко переносить дані з ваших гугл таблиць одразу в Figma макети. Все, що потрібно — коректно назвати шари в Figma. Детальна інструкція, як це зробити, є на сторінці плагіна в Figma Community — лінк той самий, що й у назві цього пункту.

8. StyleList

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

Плагін простий та зрозумілий у використанні, дає змогу бачити прев’ю та одразу вносити зміни в обраний стиль. Усе це, погодьтеся, додає інструменту гнучкості та зручності в роботі.

9. Find and Replace

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

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

Корисна фіча — можливість здійснювати пошук за назвою шарів, а також одразу перейменовувати їх.

10. Your Own Plugin

Якщо ви не знайшли в моїй добірці плагін, який задовольняв би ваші потреби — завжди можна створити власний! На останній конференції Config 2022 серед багатьох оновлень було анонсовано, що тепер створювати власні плагіни стало простіше.

Як це зробити? На офіційному YouTube-каналі Figma є плейлист Build Your First Plugin, де у відеоінструкціях покроково розповідається про всі аспекти та особливості створення власних плагінів.

А ще, на Figma Developers можна знайти розширений тьюторіал з порадами. Сміливо користуйтесь, можливо, саме ваш плагін стане наступним топовим улюбленцем багатьох користувачів!

Bottom line

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

Чим плагіни корисні саме для мене: з їх допомогою я автоматизував багато процесів, завдяки чому зміг приділити більше часу тим аспектам роботи, які мені справді цікаві. Я не витрачаю час і креатив на вигадування нереальних імен, не займаюсь зайвою конвертацією анімацій чи завантаженням іконок, а можу вирішувати реальні проблеми користувачів, приносити їм користь.

Важливо, що розробники Figma заохочують створення користувачами власних плагінів, допомагають розвивати спільноту та ділиться навчальними матеріалами для розробки нових і нових помічних інструментів. Тому в майбутньому можна очікувати релізу абсолютно різних плагінів, що зроблять життя дизайнерів ще простішим і цікавішим одночасно.

👍ПодобаєтьсяСподобалось47
До обраногоВ обраному28
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Дуже корисна та цікава стаття, дякую!

я не дизайнер, але плагін для пошуку забрав собі — то просто топ

Aninix це щось;)

А ще є зручний плагін для пошуку всього що заманеться у проекті www.figma.com/...​plugin/838752837372119505

Привіт!
Бачу ви є розробником цього плагіна, дякую вам, справді корисно!

Підписатись на коментарі