fbpx

15 корисних плагінів для Figma, які істотно прискорять роботу

Розповідаємо про плагіни для Figma, що автоматизують робочу рутину.

Команда Figma дуже дбайливо ставиться до свого дітища і прислухається до думки спільноти . Завдяки цьому в середині липня 2019 року було випущено бета-версія редактора з підтримкою плагінів. А вже на початку серпня презентували оновлену Figma з вбудованими плагінами. Будь-який розробник або дизайнер,що знає базовий HTML і  JavaScript , міг подати заявку і взяти участь в їх розробці.

Загальні принципи:

  • Модулі повинні бути простими і зрозумілими для будь-якого дизайнера.
  • Якщо ви можете створити сайт, ви можете створити плагін.
  • Люди повинні мати можливість створювати плагіни на  популярних мовах програмування .
  • Модулі не повинні завдавати шкоди продуктивності  Figma.
  • Figma повинна повністю підтримувати API, на які спираються плагіни.

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

Де знаходяться плагіни

Відкрийте програму, авторизуйтесь під своїм Google-аккаунтом, перейдіть на головну сторінку редактора Figma. Зліва на панелі побачите пункт Plugins (він знаходиться відразу під Drafts ).

Як знайти плагіни в Figma?

Натиснувши на  Plugins , ви опинитеся на сторінці плагінів. Вони згруповані – рекомендовані, популярні і встановлені.

Також можна подивитися всі плагіни, які є на даний момент, якщо натиснути на кнопку Browse all plugins .

установка плагінів

Філософія FIgma – в простоті, тому установка плагінів проста і зрозуміла для будь-якого користувача.

Встановити плагіни можна двома способами:

  • На сторінці всіх плагінів напроти потрібного натисніть на кнопку Install  – він буде автоматично встановлений, стан кнопки зміниться на  Installed , а плагін буде поміщений в список групи Installed .
Установка плагіна із загальною сторінки
  • На окремій сторінці плагіна виберіть потрібний, перейдіть на нього і натисніть на кнопку Install для установки.
Установка зі сторінки опису плагіна

Установка плагіна відбувається миттєво. Ще одне натискання на кнопку інсталяції призводить до його деактивації.

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

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

Огляд 15 плагінів для дизайнера

Я відібрав п’ятнадцять простих і функціональних плагінів, які будуть корисні більшості дизайнерів:

  • Unsplash – для швидкого автозаповнення блоків фотографіями.
  • Map Maker  – додає карти.
  • Charts – для візуалізації даних.
  • Iconify  – для іконок.
  • Autoflow  – візуалізує зв’язку між об’єктами.
  • Content Reel  – для наповнення макета сайту контентом.
  • Blobs  – робить симпатичні плями.
  • Image tracer  – вміє переводити растр в вектор.
  • Figmotion  – для анімації.
  • Find and Replace  – шукати і заміняти текст.
  • Nisa Text Splitter – для роботи з таблицями та списками.
  • Spellchecker  – перевіряє граматику.
  • Isometric  – для швидкого створення ізометрії.
  • Datavizer  – вміє створювати графіки та гістограми.
  • Icon Resizer – для швидкої зміни розмірів іконок.

Unsplash

Плагін для швидкого автозаповнення блоків фотографіями

Вікно плагіна Unsplash

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

Давайте подивимося на його роботу. Виберіть плагін – натисніть правою кнопкою миші в будь-якому місці полотна. Виберіть пункт Plugins – Unsplash .

Запускаємо Unsplash в Figma

З’явиться вікно плагіна.

Вікно плагіна Unsplash

Виділіть всі картки на полотні і виберіть будь-яку тематику (у нас в прикладі портрети).

Заповнюємо картки портретами

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

Замінюємо конкретний портрет на пейзаж в пару кліків