Figma стає все більш корисною платформою для спільної роботи. Так вважає продуктовий дизайнер Deep Joshi, який регулярно користується плагінами інструменту. Він створив список тих, що стали для нього найбільш ефективними, а ми публікуємо переклад рекомендацій дизайнера з доданими посиланнями.
Читайте також: Figma vs. Sketch
1. Autoflow
Autoflow полегшує малювання схем і зв’язків. Просто виберіть два об’єкти, натисніть гарячу клавішу і чарівна лінія одразу з’явиться між ними.
Як використовувати:
- Виділіть два об’єкти.
- Правим кліком викличте меню плагінів та знайдіть Autoflow.
- Зробіть це для всіх екранів: якщо натиснути комбінацію ⌥⌘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 якісні зображення. Серед функцій цього плагіну:
- Доступ до мільйонів іконок, ілюстрацій та стокових фото з Iconscout.
- Пошук, який знайде потрібні вам ресурси для роботи у Figma.
- Вибір формату файлу та розширення, щоб вставити іконку чи зображення.
- Доступ до завантажень і лайків для зареєстрованих користувачів.
- Режим Designer, з яким можна обрати улюбленого дизайнера чи фотографа й отримати доступ до всіх їхніх робіт (замість того, щоб шукати картинки в бібліотеці).
- Преміальний доступ за підпискою Iconscout.
Icon Resizer змінює і стандартизує розмір іконок, щоб вони відповідали вашому дизайну. Набагато зручніше працювати, коли всі іконки однакові за розміром і вписуються у квадрат. Виберіть один чи декілька фреймів, вкажіть розмір зображень та обмежувальної рамки. Готово!
13. Image Palette
Показує палітру з 5 кольорів на обраному зображенні. Увага: плагін використовує алгоритм медіанного зрізу, він виокремлює найбільш відмінні кольори на картинці. Працює швидко, але може видавати неідеальні результати, особливо для малоколірних зображень, векторної графіки тощо. Отримані кольори не завжди відповідатимуть коду кольорів на картинці.
14. Viewports
Перевірте, як адаптується ваш дизайн на мобільних пристроях. Viewports показує, як змінити розмір фрейму, щоб він правильно відображався на різних дисплеях. Зараз плагін підтримує пристрої Google та Apple iPhone, очікується підтримка Samsung та настільних версій.
15. Interplay
Interplay прив’язується до репозиторію вашої дизайн-системи, щоб у Figma ви могли використовувати код компонентів. З плагіну ви можете завантажити код, редагувати властивості (properties), змінювати контент та імпортувати компоненти у макет Figma. Interplay працює на льоту і зберігає зв’язки, тож елементи вашого дизайну будуть завжди синхронізуватись з робочим кодом.