Как делать прототипы в Figma: кнопки, прокрутка и поп-апы
Рассказываем, как сделать прототип интерфейса в Figma, чтобы показать его клиенту, разработчику или арт-директору.
OlyaSnow для Skillbox Media
Кажется, что без программистов собрать из макета рабочий прототип невозможно. На самом деле это не так — в Figma предусмотрена функция прототипирования, которая поможет вам «завести» приложение и отловить все ошибки в сценариях до передачи макетов в разработку.
Рассказываем, как превратить ваши картинки из Figma в полноценный прототип — с рабочими кнопками, прокруткой и переключателями.
Интерфейс для прототипирования
На панели настроек справа в самом верху есть три вкладки: Design, Prototype и Inspected. Все настройки прототипов находятся в Prototype.
Основные настройки прототипов
Device — выбор устройства, внутри которого будет отображаться прототип. От этой настройки зависит не только то, как будет выглядеть косметическая рамка, но и плавность анимации прокрутки:
Background — цвет фона.
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 выберите дополнительный поп-ап.
- Чтобы проверить прототип, перетащите кнопку
на нужный фрейм и нажмите на неё.
Готово. Теперь у вас есть поп-ап, который открывается после нажатия на кнопку. А если нажать на него, он поменяется.
Внутренние ссылки
Часто в навигационной панели может понадобиться ссылаться на внутренние модули, например на блок «О компании». В прототип можно добавить и это по примеру простых кнопок.
Как сделать внутренние ссылки
- Перейдите во вкладку Prototype.
- В основном фрейме с экраном приложения выделите другой, по нажатии на который нужно прокрутить страницу. На одной из его сторон появится кружок — зажмите его и тяните к другому фрейму внутри основного.
- В появившемся окне укажите отступ сверху, чтобы экран не прокручивался «впритык».
- Чтобы проверить прототип, перетащите кнопку
на нужный фрейм и нажмите на неё.
Источник
Figma не работает prototype
Добрый день, а вы не подскажите почему так тормозит Тестирование прототипа в телефоне и на компе?
Там нет ничего тяжелого ни картинок ни много фреймов. Но тормозит при тестировании прототипа.
Коллеги, кто имеет реальный опыт взаимодействия с программистами! Подстраиваетесь ли вы под используемый в проекте фреймворк (библиотеку) и т.п.?
В Figma много замечательных плюшек, штучек, даже анимаций, но не случаются ли такие ситуации, когда вы отрисовывали, например, менюшку, делали скругления и т.д., а «из коробки» у фреймворка программиста идёт чуть-чуть но другая менюшка, которая, скажем, не хуже вашей. А программист сидит и затачивает все ваши скругления и размеры, потому что «это пришло от дизайнера»
Очень надеюсь, что я адекватно задал вопрос и суть ясна. Буду благодарен любым ответам!
Владимир, вообще не тормозит! Я тут уже затроллил всех с вопросами по тормозам прототипов фигмы, но ваш прототип в сравнении с моими просто «летает»!
И да, мой прототип тормозил, по всей видимости, по причине того, что кто-то сделал «подложку» в виде еле-видного рисунка. Ну и ещё пара картинок было. Других объяснений не нахожу. Сделал прототип «с нуля», и картинок добавляю минимум
Источник