Статті
Figma та її 15 плагінів для дизайнерів
Для чого вони потрібні та як ними користуватися
25 жовтня, 2019
Deep Joshi
Продуктовий дизайнер

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

Читайте також: Figma vs. Sketch

1. Autoflow

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

Як використовувати:

  1. Виділіть два об’єкти.
  2. Правим кліком викличте меню плагінів та знайдіть Autoflow.
  3. Зробіть це для всіх екранів: якщо натиснути комбінацію ⌥⌘P, вона запустить останній використаний плагін.

2. Able — доступність без проблем

Able допомагає дизайнерам подбати про доступність (accessibility) і потребує мінімум зусиль. Відкрийте плагін і він автоматично порівняє контраст між двома обраними шарами. Можна не закривати Able і за потреби порівнювати контраст між різними шарами, кожен раз його запускати не потрібно.

3. Remove BG

Remove BG (Remove background) автоматично видаляє тло із зображень в один клік — використовуючи remove.bg API. Увага: для цього вам потрібно зареєструватись на remove.bg.

4. Figmotion

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

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

5. Isometric

З Isometric можна створювати ізометричні шари автоматично, без налаштування вручну. Як використовувати: 1. Виберіть шар. 2. Натисніть ПКМ і знайдіть Isometric. 3. Оберіть потрібну перспективу. Проєкт має відкритий вихідний код і поширюється під ліцензією MIT (можна використовувати безкоштовно і без обмежень).

6. Content Reel

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

7. Rename It та Color Palettes

Rename It допомагає організувати файли у Figma, перейменовувати групи шарів та фреймів.

Color Palettes

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

8. Component Cloner

Хотіли коли-небудь повторно використати ті ж компоненти (не змінюючи оригінал) або зробити кілька їхніх варіантів? У Component Cloner можна обрати екземпляри, які хочете перевикористати, і вони будуть прив’язані до нової копії оригінального компонента. Або можна просто скопіювати компонент.

9. Unsplash

Додає красиві зображення з Unsplash одразу до вашого дизайн-проєкту. Можна знайти конкретне зображення або взяти випадкове — вони всі безкоштовні й доступні для комерційного або персонального використання.

10. Brands Colors

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

11. Datavizer

Створює графіки та діаграми з вашими даними. Можна взяти і випадковий набір даних, якщо треба показати просто будь-яку шкалу (наприклад, додати рандомний графік на мокап). Якщо завантажити свої дані (у форматі CSV або JSON), показники можна налаштувати вручну.

12. Iconscout та Icon Resizer

З Iconscout можна додавати у Figma якісні зображення. Серед функцій цього плагіну:

  1. Доступ до мільйонів іконок, ілюстрацій та стокових фото з Iconscout.
  2. Пошук, який знайде потрібні вам ресурси для роботи у Figma.
  3. Вибір формату файлу та розширення, щоб вставити іконку чи зображення.
  4. Доступ до завантажень і лайків для зареєстрованих користувачів.
  5. Режим Designer, з яким можна обрати улюбленого дизайнера чи фотографа й отримати доступ до всіх їхніх робіт (замість того, щоб шукати картинки в бібліотеці).
  6. Преміальний доступ за підпискою Iconscout.

Icon Resizer змінює і стандартизує розмір іконок, щоб вони відповідали вашому дизайну. Набагато зручніше працювати, коли всі іконки однакові за розміром і вписуються у квадрат. Виберіть один чи декілька фреймів, вкажіть розмір зображень та обмежувальної рамки. Готово!

13. Image Palette

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

14. Viewports

Перевірте, як адаптується ваш дизайн на мобільних пристроях. Viewports показує, як змінити розмір фрейму, щоб він правильно відображався на різних дисплеях. Зараз плагін підтримує пристрої Google та Apple iPhone, очікується підтримка Samsung та настільних версій.

15. Interplay

Interplay прив’язується до репозиторію вашої дизайн-системи, щоб у Figma ви могли використовувати код компонентів. З плагіну ви можете завантажити код, редагувати властивості (properties), змінювати контент та імпортувати компоненти у макет Figma. Interplay працює на льоту і зберігає зв’язки, тож елементи вашого дизайну будуть завжди синхронізуватись з робочим кодом.

avatar
Deep Joshi
Продуктовий дизайнер
Колонка

У нас є ще дещо для вас