Прототип у Figma: як зробити клікабельний прототип

Крок 1

Сплануйте сценарій і підготуйте фрейми

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

• •назвіть фрейми зрозуміло: Home, Product, Cart — так легше з'єднувати й шукати їх;
• •розташуйте екрани на полотні в порядку сценарію, зліва направо;
• •перевірте, що кнопки, за якими людина має клікати, — окремі шари або компоненти, а не частина картинки.

💡 Ще не впевнено почуваєтеся з фреймами й автолейаутом? Почніть із гайду Figma для початківців.

Крок 2

Створіть перші з'єднання

Перейдіть на вкладку Prototype у правій панелі (Shift + E перемикає між Design і Prototype). Виділіть кнопку, наведіть на неї курсор і потягніть синій «плюс» до фрейму, куди має вести клік. Figma одразу підставить тригер On click і дію Navigate to, а на першому фреймі з'явиться мітка Flow 1 — це початкова точка сценарію.

• •хотспот — об'єкт, на якому відбувається взаємодія: кнопка, іконка, картка;
• •з'єднання — синя стрілка від хотспота до цільового фрейму; на ній налаштовують тригер, дію й анімацію;
• •Back — дія для кнопки «Назад»: повертає на попередній екран, тож не треба тягнути стрілку назад вручну;
• •Open link — відкриває зовнішнє посилання в новій вкладці.

💡 Перейменуйте Flow 1 на назву задачі, наприклад «Оформлення замовлення», і додайте опис: він показується в режимі презентації й підходить для інструкції учасникам тесту.

Крок 3

Додайте переходи, оверлеї й скрол

Коли сценарій клікається, зробіть його схожим на справжній застосунок. На з'єднанні оберіть анімацію: Instant, Dissolve, Move In / Move Out, Push, Slide In або Smart Animate. Smart Animate шукає однакові шари на двох фреймах (за назвою та місцем в ієрархії) і плавно анімує різницю між ними — так роблять перемикачі, слайдери чи розгортання тексту.

• •Open overlay — показує фрейм поверх поточного екрана: спливні вікна, меню, підказки, екранну клавіатуру;
• •скрол — якщо вміст виходить за межі фрейму, задайте фрейму вертикальну чи горизонтальну прокрутку; шапку чи навігацію можна закріпити, щоб вона не прокручувалася;
• •Scroll to — прокручує до потрібного об'єкта в межах фрейму, як якірне посилання на лендингу.

💡 Smart Animate працює, лише коли шари на обох фреймах називаються однаково й лежать на тих самих місцях в ієрархії. Якщо анімація «стрибає», спершу перевірте назви шарів.

Крок 4

Зробіть інтерактивні компоненти

Якщо у вас є компонент із варіантами — наприклад, кнопка у станах Default, Hover і Pressed чи чекбокс увімкнений і вимкнений, — з'єднайте варіанти між собою прямо в наборі компонентів. Тоді кожна копія компонента в макеті вже буде інтерактивною. Figma наводить приклад: щоб без цього прототипувати всі комбінації п'яти чекбоксів, знадобилося б 32 копії фрейму і 160 з'єднань; з інтерактивними компонентами достатньо вставити чекбокс.

💡 Змінні, умови й кілька дій на одному тригері доступні лише на платних тарифах Figma. Для першого прототипу вистачить з'єднань, оверлеїв та інтерактивних компонентів.

Крок 5

Перегляньте, протестуйте й поділіться

Preview (Shift + Space) відкриває прототип просто в редакторі, і правки одразу видно в перегляді. Present запускає прототип у новій вкладці в режимі презентації. У налаштуваннях прототипу задайте пристрій, початковий фрейм і колір фону. Клавіша R у перегляді перезапускає прототип.

• •на телефоні — відкрийте файл у мобільному застосунку Figma й оберіть View prototypes або скористайтеся режимом Mirror;
• •поширення — натисніть Share і скопіюйте посилання; окреме посилання лише на прототип доступне на платних тарифах, а на Starter глядач може відкрити з перегляду сам файл;
• •тест — дайте людині задачу з опису сценарію й не підказуйте; де вона зупиняється чи клікає не туди, там і правки.

💡 Скиньте посилання на прототип у спільноту й попросіть пройти конкретний сценарій. Так ви отримаєте фідбек про логіку, а не лише про кольори.