Корисні плагіни Figma для початківців: що встановити і як не загубитися

Крок 1

Навчіться знаходити й запускати плагіни

Усі плагіни лежать у Figma Community. Запустити плагін можна прямо з файлу: на лівій панелі відкрийте вкладку Tools, у фільтрі за ціною й типом оберіть Plugin, знайдіть потрібний через пошук, відкрийте його картку й натисніть Run. Ще два способи — клік правою кнопкою миші на об'єкті та пункт Plugins, або сторінка плагіна в Community і кнопка Open in.

• •на безкоштовному тарифі Starter плагіни працюють у Figma Design, FigJam, Figma Slides і Figma Buzz;
• •одночасно працює лише один плагін, і його треба запускати вручну;
• •повторити останній плагін: Cmd + Option + P (Mac) або Ctrl + Alt + P (Windows);
• •плагіни, якими користуєтеся часто, збережіть: вони прив'язуються до вашого акаунта й доступні в будь-якому файлі.

Крок 2

Перевірте плагін, перш ніж його запускати

Плагін — це сторонній код, і Figma прямо попереджає, що він може бачити дані: ваше ім'я користувача й аватар, позицію курсора, а також усі шари у файлі. Тому перед першим запуском відкрийте сторінку плагіна в Community і подивіться:

• •хто автор і чи є контакт підтримки — Figma не підтримує сторонні плагіни, з питаннями звертаються до розробника;
• •доступ до мережі: позначки Restricted network access чи No access to network безпечніші за Unrestricted або Unknown;
• •Data security info — розробник може добровільно описати, що робить із даними;
• •ціну: платні плагіни з позначкою In-app purchases мають безкоштовний пробний період за часом або кількістю використань.

💡 Не запускайте невідомі плагіни у файлах із клієнтськими чи конфіденційними макетами. Для експериментів тримайте окремий навчальний файл.

Крок 3

Фото й тексти: Unsplash і Content Reel

Макет із сірими прямокутниками й «Заголовок, заголовок» важко оцінити. Наповніть його реалістичним вмістом:

• •Unsplash вставляє фото з Unsplash просто в макет. За ліцензією Unsplash фото можна використовувати в комерційних і особистих проєктах; преміум-фото з підпискою Unsplash+ мають окрему ліцензію;
• •Content Reel підставляє в макет текстові рядки, зображення й іконки з однієї панелі: імена, адреси, електронні пошти тощо. Можна створити власні набори тексту й завантажити до 20 PNG чи JPEG;
• •плагіни Lorem ipsum швидко заповнюють блоки текстом-рибою, але для навчальних кейсів краще писати реальні тексти українською: так видно, чи вміщується справжня довжина слів.

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

Крок 4

Іконки й зображення: Iconify і Remove BG

Малювати кожну іконку самостійно на старті не потрібно. Iconify збирає в одному плагіні сотні наборів відкритих іконок і вставляє їх як вектор. Обирайте один набір на весь проєкт, щоб іконки мали однакову товщину ліній і стиль. Для комерційного проєкту перевірте ліцензію конкретного набору.

• •зробіть кожну іконку компонентом, щоб потім міняти її в кнопках і списках;
• •Remove BG прибирає фон із фото в один клік через сервіс remove.bg; для нього потрібен акаунт на remove.bg;
• •перш ніж прибирати фон, подумайте, чи не простіше знайти фото з чистим тлом.

Крок 5

Доступність і схеми: Stark та Autoflow

Коли макет готовий, його треба перевірити й презентувати. Stark — набір інструментів для доступності: перевірка контрасту (Contrast Checker), порядок фокусу (Focus Order), анотації альтернативного тексту (Alt-Text Annotations) і симуляція різних типів зору (Vision Simulator). Умови використання й ціну дивіться на сторінці плагіна. Autoflow малює стрілки між екранами, щоб показати сценарій користувача; у безкоштовній версії обмежено кількість стрілок у файлі.

• •базовий контраст можна перевірити й без плагіна: у палітрі кольорів Figma є кнопка Check color contrast з рівнями AA й AAA;
• •схему переходів для портфоліо можна намалювати й звичайними стрілками, а клікабельні переходи робляться в режимі Prototype;
• •вправа: зберіть один екран, де фото, іконки й тексти додано плагінами, перевірте контраст і покажіть результат у спільноті.

💡 Плагін пришвидшує те, що ви вже вмієте. Якщо не розумієте, що саме він зробив, — спершу зробіть те саме вручну.