Пошук

Як налаштувати інтерактивні компоненти у Figma на прикладі перемикача, кнопки та дропдауна

·

Архівний матеріал: розбір публікації від 2021-07-07. Назви функцій, інтерфейс, можливості плагінів і умови доступу наведені в контексті того часу.

У статті розбирається підхід дизайнера Emiliano Cicero до побудови інтерактивних компонентів у Figma: від простого перемикача до складніших кнопок, дропдаунів, лоадерів та 3D-переглядів. Нижче — практичний конспект, пристосований під самостійне освоєння.

1. З чого складається інтерактивний компонент у Figma

Щоб повторити приклади автора, потрібно розуміти три базові сутності Figma:

  • Component — «оригінал», від якого робляться копії (інстанси). Змінивши компонент, ви змінюєте всі інстанси, якщо ті не мають оверрайдів.
  • Instance — копія компонента. Може отримувати оверрайди (змінені стилі, тексти, стани).
  • Variants — різні стани одного компонента (розмір, колір, стан кнопки, тощо), об'єднані в одну групу.

Інтерактивні компоненти додають до цього ще один шар — логіку: взаємодії прописуються усередині варіантів, і кожен інстанс автоматично успадковує цю поведінку.

Для глибшого занурення автор радить офіційну документацію:

Панель Interaction Details

Взаємодія налаштовується в Prototype-режимі через панель Interaction Details.

The Figma interaction details panel with notes to identify the triggers, actions, destination and animations.
Interaction Details panel (annotated).

  • Hotspot — елемент, по якому користувач взаємодіє (у прикладах це цілі варіанти компонента).
  • Trigger — подія, яка запускає взаємодію (On Click, While Hovering, Mouse Down, After Delay тощо). Деталі: Prototype triggers.
  • Action — що відбувається після тригера. Для інтерактивних компонентів ключова дія — Change To (перемкнутися на інший варіант).
  • Destination — ціль дії: інший варіант, інший фрейм, оверлей тощо.
  • Animation — як відбувається перехід (Smart Animate, Move In, Instant тощо). Для гнучких анімацій автор використовує Smart Animate та налаштовує шари й назви. Більше: Transitions та Smart Animate.
  • Easing — як анімація прискорюється / сповільнюється. У прикладах застосовуються Ease In and Out для перемикача та Linear для циклів. Деталі: Easing.

2. Перший інтерактивний компонент: перемикач Off/On

Автор починає з простого, але показового кейса: створення перемикача з двома станами Off/On.

Крок 1. Створення базового компонента

  • За допомогою Rectangle tool (R) створіть прямокутник 56×32 px з радіусом кутів 16 px і сірим фоном #A7A9BC.
  • Ellipse tool (O): коло 24×24 px, білий колір #FFF, розташуйте зліва, залишивши по 4 px відступу.

A simple switch component in the off state.
The switch component.

  • Виділіть обидва елементи та створіть компонент: Ctrl/Cmd + Alt + K або кнопка Component у верхній панелі.

Крок 2. Додання варіантів

  • Виділіть компонент і в правій панелі в блоці Variants натисніть «+».

Two switch components with the off state inside a variant group.
The group of variants.

Figma обгорне варіанти в фіолетову рамку — це група варіантів. Перший варіант використовується як стан Off, другий — як On:

  • Для On-стану встановіть фон, наприклад #0B5FFF, і перемістіть коло праворуч.

Two switch components inside the variant group, one turned on and the other one turned off.
Now the two styles are defined for the Off and On states.

Альтернативний варіант, який згадує автор: якщо у вас вже є готові компоненти, їх можна вибрати й натиснути «Combine as variants» — Figma сама сформує варіантну групу.

Two separated switch components at the left with an arrow pointing to the right, to a button with the action combine as variants. Next to the button there is another arrow pointing at the right to a variant box with the two switch components inside it.
Select the components and combine them as variants.

Крок 3. Іменування варіантів

Імена впорядковують бібліотеку і полегшують роботу команді:

  • Для всієї групи замініть назву «Property 1» на «State».
  • Для окремих варіантів замініть «Default» на «Off» і «Variant 2» на «On».

У результаті самі варіанти матимуть імена виду «State=Off» і «State=On». Автор звертає увагу на деталь: якщо варіантів рівно два й вони названі Off/On, у деяких місцях Figma показує зручний перемикач замість дропдауна.

Крок 4. Налаштування інтерактивності

  1. Перейдіть у вкладку Prototype.
  2. Виділіть варіант Off і перетягніть синю точку з нього на варіант On (важливо тягнути з усього варіанта, а не фону).

Two switch components inside a variant group, the first one is turned off and connected to the second one that is turned on.
The On state connected to the Off state.

У Interaction Details задайте:

  • Trigger: On Click
  • Action: Change To
  • Destination: варіант On
  • Animation: Smart Animate, easing Ease In and Out, тривалість 300 ms

Текстом це читається як: «On Click на State=Off — Change To State=On з Smart Animate, Ease In and Out, 300 ms».

Тепер зробіть дзеркальну взаємодію для On → Off:

  • Для варіанта On налаштуйте On Click → Change To → Off з тими ж параметрами.

Two switch components connected to each other.
Both states are now connected.

Щоб протестувати, помістіть компонент у фрейм і натисніть кнопку Present (іконка Play над вкладками).

Part of the Figma interface with focus on the Play icon used for prototypes
The 'Play' icon.

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

The switch interactive components in action.

3. Більше станів: поведінка кнопки та вкладені компоненти

Шість станів кнопки

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

Six different dropdown buttons showing the color changes for each state.
A dropdown button with six different states as variants.

Станів шість:

  1. Default — звичайний стан.
  2. Hover — тригер While Hovering.
  3. Pressed — тригер Mouse Down.
  4. Active — тригер Mouse Up (або On Click, якщо так зручніше).
  5. Hover while Active — тригер While Hovering, коли кнопка вже активна.
  6. Pressed while Active — тригер Mouse Down у активному стані.

Ключова ідея: Mouse Down використовується для імітації моменту натиску (кнопка «втоплюється»), Mouse Up — для фінальної дії (активації). Це створює більш реалістичне відчуття взаємодії.

Use the MouseDown trigger before the Click trigger.

Вкладені інтерактивні компоненти на прикладі дропдауна

Далі Emiliano переходить до вкладеності. Приклад — компонент Dropdown, який складається з двох інтерактивних компонентів усередині:

  • Dropdown Button — змінює стан при hover/press/active.
  • Dropdown Menu — відкривається/ховається та містить опції.

Це дозволяє:

  • окремо прописати логіку для кнопки та меню;
  • контролювати, у яких станах кнопки меню показується (наприклад, лише On Click і While Hover);
  • перевикористовувати Dropdown Menu незалежно від кнопки.

A variant group with six variants composed by a dropdown button and a dropdown menu, the image is showing that it is possible to hide the menu in some states of the button.
The same dropdown button with a dropdown menu that only appears in the On Click and While Hover variants.

Той самий Dropdown Menu можна вставляти в інші компоненти (картки, панелі тощо), не налаштовуючи кожного разу взаємодії з нуля. У прототипі це виглядає як повноцінна поведінка hover/click.

It’s possible to simulate real Hover and Click effects.

Навігація з варіанта на фрейм

Ще один важливий прийом — поєднати стани компонентів із повноцінною навігацією між фреймами:

  • у варіанті дропдаун-меню для кожної опції задати Trigger On Click і Action Navigate To на відповідний фрейм;
  • на самих фреймах, наприклад, поставити панель у тій же позиції, що й меню (Right, Top, Left, Bottom).

A diagram showing a group of five variants of a dropdown menu with four options: right, top, left, bottom. Each option is connected to an external artboard using the OnClick trigger.
Prototype destinations can be connected outside the variant frame.

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

This dropdown menu is a great example of how real an interactive component can get.

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

4. Спецефекти на варіантах: цикли, лоадери, мікровзаємодії

Безкінечні цикли (loops)

Інтерактивні компоненти дозволяють створювати нескінченні анімації — спіннери, лоадери, каруселі — без складних налаштувань.

Elements can be resized to create infinite loops.

Схема:

  • Створіть щонайменше два варіанти з невеликими відмінностями (наприклад, розмір або позиція прямокутників).
  • Для кожного варіанта задайте Trigger After Delay з мінімальним значенням 1 ms.
  • Підключіть варіанти по колу: 1 → 2, 2 → 3, 3 → 1 тощо.

A diagram with instructions to create a loop. There are three variants and arrows, the first variant is connected to the second variant, the second variant to the third, and the third variant to the first variant to create an infinite loop.
Use the After Delay trigger set to 1 ms and connect the variants.

Пояснення автора: 1 ms — мінімальна затримка в Figma, що дає майже миттєве перемикання. Якщо потрібно додати «паузу», можна збільшити значення.

Анімація обертання: обмеження Figma і обхід

Автор звертає увагу на особливість Figma: обертання обмежується діапазоном від -179º до 180º, і неможливо задати напрямок (за чи проти годинникової стрілки). Якщо просто анімувати з 0º до 180º й назад, отримаємо ефект «гойдалки», а не повне коло.

Щоб отримати квазірівномірний спіннер, Emiliano використовує мінімум три варіанти:

  • VariantA: елемент усередині має rotation 0º, Interaction → After Delay (1 ms) → Change To VariantB.
  • VariantB: rotation -120º, Interaction → After Delay (1 ms) → VariantC.
  • VariantC: rotation 120º, Interaction → After Delay (1 ms) → VariantA.
  • Усі взаємодії з easing Linear.

Результат — спіннер із трьома мікрозупинками по 1 ms через зміну варіантів. З формальної точки зору анімація не ідеально плавна, але в прототипі це здебільшого непомітно.

The rotation is the same but the animation times are different.

Автор додатково радить гратися з тривалістю анімації між варіантами, щоб наблизити відчуття до кривої безперервного прискорення / сповільнення, хоча з технічного боку це все одно послідовність відрізків.

Коли варто зупинитися і взяти GIF

Emiliano прямо зазначає: для складних спіннерів краще зробити анімацію в окремому інструменті (наприклад, After Effects) та імпортувати її в прототип як GIF. Інтерактивні компоненти підходять для простих, контрольованих рухів, але не замінюють інструменти для повноцінної анімації.

Мікровзаємодія для перемикача з MouseDown + Click

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

Do you want to turn a simple switch into an amazing switch?

Зміни в структурі компонента

  • Скопіюйте Off-стан перемикача.
  • Створіть другу еліпсоподібну форму 16×24 px і накладіть її на перше коло.
  • Об'єднайте дві фігури як Boolean Union (див. Boolean groups).

A diagram showing how a boolean union works using two ellipses, one big and another one small.
The boolean group will combine these two shapes into a single circle.

  • Застосуйте 32 px border-radius до отриманого Union — так виникає деформація.
  • Створіть новий компонент із цим оновленим колом.

Чотири варіанти і логіка

Потрібно чотири варіанти:

  • OffState
  • OffStatePressed
  • OnState
  • OnStatePressed

Далі налаштовується ланцюжок:

  • Mouse Down: з OffState → OffStatePressed (ellipse деформується й зсувається на 8 px у протилежний бік).
  • On Click: з OffStatePressed → OnState.
  • Mouse Down: з OnState → OnStatePressed.
  • On Click: з OnStatePressed → OffState.

A diagram showing how to connect four variants to recreate the micro interaction. The first one uses MouseDown to activate the second variant, the second variant uses OnClick to activate the third variant, the third variant uses MouseDown to activate the fourth variant, and the fourth variant uses OnClick to activate the first variant.
Here’s another fun diagram showing how to construct the interactive component!

Цей прийом показує, як комбінувати декілька тригерів для однієї сутності (Mouse Down для «натискання», On Click для зміни стану) і як за допомогою варіантів і Smart Animate додати виразну мікровзаємодію.

3D-анімація з послідовності зображень

Наостанок автор демонструє «хак» для інтеграції 3D-обертання: послідовність статичних зображень, об'єднана в інтерактивний компонент із навігацією вперед-назад. Приклад 3D-сцени наданий Andrea Cau.

Imagine an e-commerce website with a 3D model that you can turn around.

Суть методу:

  • Підготувати N кадрів об'єкта (Emiliano використовує 9), наприклад, обертання на рівні кути.
  • Створити компонент з N варіантами, кожен містить один кадр із послідовності.
  • Додати кнопки-стрілки ліворуч/праворуч, які будуть hotspot-ами.
  • У кожному варіанті: права стрілка веде на наступний варіант, ліва — на попередній.
  • Анімація: Instant, щоб уникнути будь-якого fade-ефекту й створити ілюзію суцільного руху.

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

5. Що можна взяти в роботу з підходу автора

  • Прості інтерактивні компоненти (перемикачі, кнопки, дропдауни) варто одразу будувати як варіантні інтерактивні компоненти, а не як окремі фрейми прототипу — це зменшує кількість екранів та зв'язків.
  • Налаштування на рівні Mouse Down / Mouse Up / While Hovering дозволяють швидко додати «фізичні» відчуття без складної анімації.
  • Вкладені інтерактивні компоненти (кнопка + меню) корисні для бібліотек: один раз задаєте логіку — далі просто вставляєте блок у будь-яке місце.
  • Для нескладних лоадерів, циклів і простих обертань достатньо кількох варіантів з After Delay (1 ms). Для складної графіки автор рекомендує окремі анімаційні інструменти та GIF.
  • Послідовність зображень + Instant-анімація дає контрольований 3D-"перегляд" без використання відео або складних інтеграцій.

Для детального розбору прикладів Emiliano Cicero виклав файл у Figma Community з усіма описаними експериментами:

Також Figma має власний playground для інтерактивних компонентів:

Джерело: Emiliano Cicero – Smashing Magazine. Дата оригіналу: 2021-07-07.

Пошук

Закрити