Як робити прототипи в Figma: кнопки, прокручування та поп-апи

Розповідаємо, як зробити прототип інтерфейсу Figma, щоб показати його клієнту, розробнику або арт-директору.

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

Розповідаємо, як перетворити ваші картинки з Figma на повноцінний прототип - з робочими кнопками, прокручуванням та перемикачами.

Інтерфейс для прототипування

На панелі налаштувань праворуч у верхній частині є три вкладки: Design , Prototype і Inspected . Усі параметри прототипів знаходяться в Prototype .

Основні налаштування прототипів

Device — Виберіть пристрій, у якому відображатиметься прототип. Від цього налаштування залежить не тільки те, як виглядатиме косметична рамка, а й плавність анімації прокручування:

Background – колір фону.

Flows - тут будуть ваші прототипи, на одному макеті їх може бути декілька.

Щоб відкрити налаштування конкретного екрана, потрібно просто натиснути будь-який кадр, який ви хочете перетворити на прототип. Про це ми поетапно розповімо нижче.

Кнопки та навігація

1. Перейдіть до вкладки Prototype .
2. Виділіть будь-який кадр на макеті. На одній із його сторін з'явиться кружечок з плюсиком — затисніть його та тягніть до іншого кадру.
3. Щоб зробити кнопку Назад , виберіть будь-який кадр і на вкладці Prototype натисніть на плюсик напроти слова Interactions . У першому полі вкажіть Tap , а у другому – Back .
4. Щоб запустити прототип, натисніть на синю кнопку .

Прокручування

1. Перейдіть до вкладки Prototype .
2. Виділіть кадр, у якому потрібно прокручувати дизайн. Щоб функція працювала, висота вашого кадру повинна бути більшою за висоту екрана пристрою.
3. На вкладці Prototype в Overflow scrolling виберіть потрібний формат прокручування — горизонтальний, вертикальний або загальний.
4. Щоб зафіксувати верхню та нижню панель програми, перейдіть на вкладку Design і в блоці Constraints натисніть галочку навпроти Fix position when scrolling .
5. Щоб запустити потрібний екран прототипу, натисніть кнопку та перетягніть її до потрібного екрана, а потім натисніть на неї.

Вспливаючі вікна

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

Як настроїти поп-ап

1. Перейдіть до вкладки Prototype .
2. Виділіть кадр, натиснувши на який повинен з'явитися поп-ап. На одній з його сторін з'явиться кружок - затисніть його і тягніть до іншого кадру, який виконуватиме функцію поп-апу.
3. У вікні Interaction details замість Navigate to виберіть Open overlay .
4. Виберіть ваш поп-ап, натисніть на плюсик навпроти слова Interaction , потім - на пункт і у вікні Interaction details замість None виберіть Swap overlay .
5. У полі в тому ж вікні замість None виберіть додатковий поп-ап.
6. Щоб перевірити прототип, перетягніть кнопку на потрібний кадр і натисніть на неї.

Готово. Тепер у вас є поп-ап, який відкривається після натискання кнопки. А якщо натиснути на нього, він зміниться.