Привіт друзі! Сьогодні зосередимося на другій вкладці панелі справа, яка називається “Prototype”. Я дуже коротко згадувала про неї у першому відео курсу, тож раджу дивитися курс по порядку.
Для прототипування нам потрібен невеличкий проєкт, я вже підготувала його для вас. Прототипування - це створення взаємодії між об’єктами. Ми можемо працювати на двох рівнях: між екранами (фреймами), наприклад, між цим і цим, або між компонентами, які по суті теж є фреймами, але працюють трохи інакше.
Взаємодії поділяються на дві основні частини: тригер (те, що запускає взаємодію) і екшен (те, що відбувається або показується після цього).
Зараз я видалю всі взаємодії, всі стрілки в цьому проєкті і покажу вам, як налаштувати їх з нуля. Почнемо з того, що виберемо об’єкт і перетягнемо кружок, що з’являється на його краю, до фрейму, який ми хочемо показати після взаємодії з цим об’єктом.
Це може бути класичний клік, дотик на сенсорному екрані, перетяговування або утримування, а також інші варіанти, наприклад, наведення. Також ми можемо встановити затримку, після якої щось відбудеться автоматично.
Наприклад, ми можемо перейти на інший екран. Він може бути зовсім іншою сторінкою, як у цьому випадку, або тим самим екраном, але з іншим розташуванням елементів. Можемо додати анімацію цих елементів, наприклад, щоб вони переміщувались після кліку. У мене є кілька різних типів анімації, але найцікавішою є Smart Animate. Вона бере об’єкти з однаковою назвою (важливо, щоб назви збігалися) і плавно анімує перехід між їхніми властивостями, наприклад, положенням, розміром, кольором чи формою.
Давайте додамо ще кілька взаємодій, щоб було більше можливостей для тестування прототипу. Наприклад, якщо я перетягну стрілку до першого екрану, то вона дозволить повернутися на попередній екран.
Тепер протестуємо прототип, натиснувши кнопку Play на верхній панелі. Після короткого завантаження ми можемо протестувати наші анімації. Натискаю на “Зареєструйтесь тут” і ми переходимо на екран реєстрації. Нажимаю на “Увійти” і ми переходимо на екран входу. Якщо я хочу, щоб анімація була іншою, наприклад, easy-in, просто повертаюся до режиму редагування і змінюю тип анімації. Після цього елементи можуть, наприклад, зʼявлятися знизу.
Щоб повернутися до початку прототипу, натискаємо клавішу “R” на клавіатурі. Це поверне нас до початкового стану прототипу незалежно від того, де ми зараз перебуваємо.
Якщо ви хочете, щоб щось відбулося автоматично, наприклад, якийсь перехід або анімація, використовуйте функцію “After Delay”. Для цього потрібно вибрати верхній фрейм, той, що на самому краю списку шарів. Наприклад, зараз ми налаштуємо автоматичний перехід з фрейму 1 до фрейму 2. Встановлюю затримку в 400 мс, анімацію “Push” і напрямок анімації з правого боку на лівий. Давайте подивимось, як це виглядає. Нажимаємо “Play”.
Ще одна важлива річ - інтерактивні компоненти. Найчастіше їх використовують для демонстрації того, як щось виглядатиме під час наведення миші. Я зараз зроблю так, щоб при наведенні наша кнопка ставала темнішою. Додаємо варіант кнопки, змінюємо колір, переходимо на вкладку “Prototype”, додаємо взаємодію, обираємо “While Hovering” і встановлюємо “Smart Animate”. І тепер, коли я запускаю прототип, наша кнопка змінює колір при наведенні. Це простий приклад, але показує принцип роботи.
Якщо ви хочете відредагувати взаємодію, натисніть на стрілку або виберіть об’єкт, що вже має взаємодії. І праворуч у панелі Prototype з’явиться опція для редагування. Ви також можете видалити взаємодії, натиснувши на мінус. Кожен об’єкт може мати кілька різних взаємодій. Наприклад, одна дія відбувається при наведенні мишки, а інша - при кліку. Але будьте обережні, бо деякі взаємодії можуть конфліктувати між собою. У такому випадку з’явиться попередження.
Пам’ятайте, що взаємодії відображаються тільки на вкладці Prototype. Якщо ви не бачите стрілок одразу, це не означає, що у файлі немає взаємодій.
На цьому все. Створіть свій прототип, навіть якщо він буде простим. Дуже важливо застосувати знання, які ви щойно отримали. Якщо у вас є питання, пишіть в коментарях. А це була остання частина курсу “Figma 101”. Зі своєї сторони хочу сказати, що я дуже пишаюсь тим, що ви взялися за вивчення Figma і дійшли до останнього уроку. Бажаю успіхів у ваших майбутніх проєктах і тримаю за вас кулачки. Не забудьте поставити лайк, якщо ці відео вам сподобались, та підпишіться на канал, бо попереду ще багато корисного контенту про дизайн.