UXPUB

UXPUB - спільнота з 4,109 дизайнерів та креативних фахівців

Місце для обміну досвідом та дискусій навколо індустрії

Зареєструватися Увійти
Cover image for Функція інтерактивних компонентів Figma
Андрій Кот
Андрій Кот

Опубліковано • Оновлено

Функція інтерактивних компонентів Figma

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

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

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

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

Image description

Джерело: Figma.com

Як ви бачите вище, щоб продемонструвати взаємодію з трьома чекбоксами, нам раніше було потрібно 8 екранів, які були б однаковими, за винятком вибору чекбоксу. Нам також знадобиться 24 взаємодії, визначені між цими вісьмома екранами.
Функція «Інтерактивні компоненти» заснована на функції «Варіанти», що дозволяє нам створювати взаємодію між варіантами всередині компонента.

Ці взаємодії можна налаштувати на роботу на основі різноманітних тригерів, найчастіше «При натисканні», а також «При перетягуванні», «Під час наведення курсора», «Під час натискання» та інших. «Після затримки» — це корисний варіант, про який я розповім пізніше. Це дозволяє нам створювати анімацію після попередньо визначеної затримки, тобто без будь-якої взаємодії користувача.

Джерело: Figma.com

Повторіть приклад із чекбоксом, за допомогою функції інтерактивних компонентів: 8 екранів і 24 взаємодії замінюються визначенням взаємодії на рівні компонента. Так ми отримуємо лише 1 екран та 2 взаємодії.

Як це працює

У якості приклада я буду використовувати стан наведення курсору на кнопку.

Для початку створіть компонент кнопки з варіантами «default» і «hover». Якщо ви недостатньо знайомі з варіантами, спершу перегляньте цей посібник від Figma.

Image description

Додавання інтерактивності

  1. Перейдіть у режим прототипу.
  2. Виберіть варіант «default» всередині компонента. Ви побачите ті самі сині вузли прототипування на варіантах компонентів, які ви бачите під час створення прототипів за допомогою фреймів. Перетягніть цей вузол до варіанту «hover» в компоненті.
  3. Виберіть «While hovering», щоб створити стан наведення.
  4. Figma розпізнає, що ви працюєте з варіантом, і запропонує нову опцію «Change to». Це дозволяє переходити від одного варіанта до іншого. Це варіант, який буде доступний лише під час створення прототипу з варіантами.

Image description

Цей компонент тепер налаштовано за допомогою взаємодії стану наведення курсору. Кожен екземпляр компонента тепер успадкує ці нові властивості.

Щоб переконатися, що ця взаємодія працює, додайте свій компонент до фрейму, виділіть фрейм і натисніть кнопку «Present».

Ви також можете вкладати інтерактивні компоненти так само, як і звичайні компоненти. У наведеному нижче прикладі компоненти кнопки та елемента меню, показані ліворуч, взаємодіють при наведенні курсора.

Image description

Джерело: Figma.com

Ці компоненти вкладені в компонент «Dropdown Menu» праворуч. До компонента розкривного списку додаються додаткові дії кліків.

Джерело: Figma.com

Ви можете побачити, наскільки цей підхід ефективніший, коли вам потрібно щось змінити. Наприклад, якщо змінити колір стану наведення курсора один раз у компоненті «Menu Item», він зміниться у всіх трьох його екземплярах у компоненті «Dropdown Menu».

Прототипування анімації

Інтерактивні компоненти – це чудова функція для відображення взаємодії стандартних компонентів інтерфейсу, таких як кнопки, перемикачі та розкривне меню. Його також можна використовувати разом із функціями анімації Figma для налаштування кількох анімацій в одному фреймі у вашому прототипі. Наприклад, я налаштував компонент анімованої кнопки з варіантами для різних етапів її анімації, використовуючи функцію «Smart animate» та тригер «After delay». Я також налаштував текст заголовка в окремому компоненті для анімації після затримки.

Це було зроблено шляхом налаштування компонента для кнопки з сімома варіантами для кожного кроку анімації кнопки. Потім я додав взаємодію між кожним варіантом.

Image description

Тригер «After delay» та функцію «Smart Animate» можна використовувати для імітації м’яча, який підстрибує та стає кнопкою.

Image description

Текст заголовка було налаштовано в іншому компоненті для анімації після окремої затримки.

Image description

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

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

Висновок

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


Переклад статті uxdesign.cc

Обговорення (6)

Згорнути/розгорнути
btnko profile image
Oleg Butenko

Дякую за дуже інформативну статтю українською мовою!

Згорнути/розгорнути
jevhen_kyselyov profile image
Jevhen Kyselov

Дякую за статтю :)

Згорнути/розгорнути
alex_nosach profile image
Alex Nosach

Ці функції вже рік, як з'явилися) Я думав щось новеньке)

Згорнути/розгорнути
neodis profile image
Sergey A

Ця функція грузить прототипи?

Згорнути/розгорнути
alex_nosach profile image
Alex Nosach • Змінено on

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