Як робити прототипи в Figma: кнопки, прокручування та поп-апи
Розповідаємо, як зробити прототип інтерфейсу Figma, щоб показати його клієнту, розробнику або арт-директору.
Здається, без програмістів зібрати з макета робочий прототип неможливо. Насправді це не так – у Figma передбачена функція прототипування, яка допоможе вам «завести» додаток та відловити всі помилки у сценаріях до передачі макетів у розробку.
Розповідаємо, як перетворити ваші картинки з Figma на повноцінний прототип - з робочими кнопками, прокручуванням та перемикачами.
Інтерфейс для прототипування
На панелі налаштувань праворуч у верхній частині є три вкладки: Design , Prototype і Inspected . Усі параметри прототипів знаходяться в Prototype .
Основні налаштування прототипів
Device — Виберіть пристрій, у якому відображатиметься прототип. Від цього налаштування залежить не тільки те, як виглядатиме косметична рамка, а й плавність анімації прокручування:
Flows - тут будуть ваші прототипи, на одному макеті їх може бути декілька.
Щоб відкрити налаштування конкретного екрана, потрібно просто натиснути будь-який кадр, який ви хочете перетворити на прототип. Про це ми поетапно розповімо нижче.
Кнопки та навігація
- Перейдіть до вкладки Prototype .
- Виділіть будь-який кадр на макеті. На одній із його сторін з'явиться кружечок з плюсиком — затисніть його та тягніть до іншого кадру.
- Щоб зробити кнопку Назад , виберіть будь-який кадр і на вкладці Prototype натисніть на плюсик напроти слова Interactions . У першому полі вкажіть Tap , а у другому – Back .
- Щоб запустити прототип, натисніть на синю кнопку .
Прокручування
- Перейдіть до вкладки Prototype .
- Виділіть кадр, у якому потрібно прокручувати дизайн. Щоб функція працювала, висота вашого кадру повинна бути більшою за висоту екрана пристрою.
- На вкладці Prototype в Overflow scrolling виберіть потрібний формат прокручування — горизонтальний, вертикальний або загальний.
- Щоб зафіксувати верхню та нижню панель програми, перейдіть на вкладку Design і в блоці Constraints натисніть галочку навпроти Fix position when scrolling .
- Щоб запустити потрібний екран прототипу, натисніть кнопку та перетягніть її до потрібного екрана, а потім натисніть на неї.
Вспливаючі вікна
Такі вікна нерідко зустрічаються в інтерфейсах - зазвичай вони допомагають користувачеві зрозуміти яку інформацію від них хоче програма. Щоб трохи ускладнити завдання, зробіть спливаюче вікно, яке змінюється по кліку.
- Перейдіть до вкладки Prototype .
- Виділіть кадр, натиснувши на який повинен з'явитися поп-ап. На одній з його сторін з'явиться кружок - затисніть його і тягніть до іншого кадру, який виконуватиме функцію поп-апу.
- У вікні Interaction details замість Navigate to виберіть Open overlay .
- Виберіть ваш поп-ап, натисніть на плюсик навпроти слова Interaction , потім - на пункт і у вікні Interaction details замість None виберіть Swap overlay .
- У полі в тому ж вікні замість None виберіть додатковий поп-ап.
- Щоб перевірити прототип, перетягніть кнопку на потрібний кадр і натисніть на неї.
Готово. Тепер у вас є поп-ап, який відкривається після натискання кнопки. А якщо натиснути на нього, він зміниться.