Как делать прототипы в Figma: кнопки, прокрутка и поп-апы

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

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. Чтобы проверить прототип, перетащите кнопку на нужный фрейм и нажмите на неё.

Готово. Теперь у вас есть поп-ап, который открывается после нажатия на кнопку. А если нажать на него, он поменяется.

Внутренние ссылки

Часто в навигационной панели может понадобиться ссылаться на внутренние модули, например на блок «О компании». В прототип можно добавить и это по примеру простых кнопок.

Как сделать внутренние ссылки

1. Перейдите во вкладку Prototype.
2. В основном фрейме с экраном приложения выделите другой, по нажатии на который нужно прокрутить страницу. На одной из его сторон появится кружок — зажмите его и тяните к другому фрейму внутри основного.
3. В появившемся окне укажите отступ сверху, чтобы экран не прокручивался «впритык».
4. Чтобы проверить прототип, перетащите кнопку на нужный фрейм и нажмите на неё.