Pathway повторяет логику Figma, отображая прототипы так же, как в Figma. У нас есть 2 опции импорта прототипа к нам: по ссылке или через плагин. У каждого из них есть свои особенности, которые мы сравниваем в отдельной статье.
Например, в отличие от импорта по ссылке, плагин оптимизирует прототип, чтобы он мог запуститься на любом устройстве, но у него есть некоторые ограничения по функционалу.
Вот несколько важных советов, чтобы убедиться, что ваш прототип соответствует нашим возможностям импорта через плагин:
1. Проверьте прототип в режиме отображения Fit Width:
Все прототипы в Pathway отображаются в режиме Fit Width. Используйте такую настройку отображения, чтобы проверить прототип перед импортом.
2. Совместимость с триггерами и действиями:
В настоящее время Pathway поддерживает триггеры On Click и While Hovering, а также действия Navigate to и Show overlay. При импорте через плагин анимации пока не поддерживаются, поэтому все переходы будут конвертированы в формат Instant.
Как импортировать прототип из Figma?
1. В Figma откройте файл с прототипом, который нужно импортировать в Pathway.
2. Установите/выберите стартовую точку.
Укажите начальный шаг в вашем прототипе. Если его нет, добавить его на экран можно с помощью кнопки “+” возле Flow Starting Point в разделе Prototype в меню справа.
3. Убедитесь в наличии более одного экрана и переходов между экранами.
Если в прототипе нет кликабельных элементов и есть только один экран, для блока с прототипом в Pathway не получится задать целевой экран. Целевые экраны — это экраны, которые считаются конечной целью пользовательского пути в прототипе; они позволяют определить, достигли ли пользователи заданной цели или выполнили поставленную задачу.
4. Проверьте прототип в режиме отображения Fit Width.
Убедитесь, что ваш прототип настроен на отображение в режиме Fit Width. Для этого перейдите в режим просмотра прототипа, кликнув на Flow (стартовую точку), который был создан на предыдущем шаге, затем в правом верхнем углу клините на Options и выберите Fit Width. Если все отображается корректно, можно приступать к следующему шагу.
5. Используйте плагин Pathway в Figma.
Запустите плагин Pathway для Figma. Откройте manage plugins, кликнув правой кнопкой на экране в Figma, где есть прототип, который нужно импортировать.
Перейдите в Плагины, в открывшемся окне введите Pathway и кликните на наш плагин.
6. Выберите стартовый экран.
После открытия плагина, выберите нужный флоу для импорта, кликнув на стартовый экран. Если обнаружены неподдерживаемые триггеры или взаимодействия, плагин обратит на это внимание и поможет внести необходимые изменения.
7. Нажмите Import.
После выбора стартового Flow нажмите Import. Это действие сгенерирует код, который можно скопировать, просто кликнув на него.
8. Вставьте код.
Добавьте блок Figma в тест, нажмите Добавить прототип, а затем выберите Из плагина в открывшемся окне. Вставьте сгенерированный код в блок Figma внутри вашего теста в Pathway, затем нажмите Импортировать.
Всё готово! Ваш прототип теперь импортирован в Pathway.
Что делать с блоком Figma после импорта прототипа через плагин?
Обязательно:
1. Пропишите задание для респондентов в поле Инструкция.
Это задание высветится прежде чем респонденты приступят к блоку с прототипом. С формулировкой заданий может помочь наш большой гайд по немодерируемым исследованиям!
2. Настройте целевые экраны.
Целевые экраны — это экраны, которые считаются конечной целью пользовательского пути в прототипе; они позволяют определить, достигли ли пользователи заданной цели или выполнили поставленную задачу — при переходе на них наша система отмечает задание как успешно пройденное.
Дополнительно:
3. Можно настроить логику на целевые экраны. При завершении интеракции с прототипом на различных экранах, вы можете задать респондентам вопросы или попросить оставить комментарии в зависимости от их действий в прототипе.
Для этого рекомендуем создать ветвление в логике прототипа — в зависимости от действий респондента, он будет направлен на определенный финальный экран — а затем настроить логику отображения вопросов в зависимости от финального экрана.
Например, если респондент попадает на финальный экран 1, его перенаправит на вопрос 2, где можно попросить комментарий и уточнить, почему он совершил именно это действие, если на финальный экран 2 — на вопрос 3, и так далее.
4. Запись видео для блока Figma.
Тоггл записи экрана респондента позволяет записать взаимодействия респондентов с экранами прототипа.
5. Показывать только стандартный курсор.
Эта настройка отключает превращение курсора в указатель при наведении, чтобы респонденты не могли догадаться, какие из элементов прототипа являются кликабельными.
Если у вас возникнут трудности или вопросы в процессе, наша поддержка на связи!