Как связать экраны в Figma
Сделай макет, в котором можно нажимать кнопки и переходить между экранами. Так ты проверишь будущий сайт до разработки.
01Что такое прототип
Прототип — это пробная версия сайта. Например, ты нажимаешь «Выбрать курс» и видишь экран с описанием. Покупка ещё не работает: мы проверяем, понятен ли человеку путь.
02Как попробовать
Собери два экрана в Figma: главную и описание курса. Выдели кнопку на главной. Открой вкладку Prototype — так называется раздел для связей между экранами. Перетащи соединение от кнопки ко второму экрану. Выбери переход по нажатию: On click → Navigate to.
03Как проверить
Открой просмотр кнопкой Present. Нажми кнопку и убедись, что открывается нужный экран. Добавь путь обратно. Попроси другого человека найти описание курса без подсказок. Если он застрял, уточни подпись кнопки или её расположение. Код и плагины для этого не нужны.
04Что такая проверка показывает, а что ещё не работает
Представь два экрана: выбор занятия и подтверждение записи. Ты связал их кнопкой, и человек может пройти этот путь в просмотре. Он видит, какие сведения идут друг за другом, но настоящая запись никуда не отправляется. Это пробная версия поведения, а не готовый сайт.
Начни с одного короткого пути. Проверь, понятна ли подпись кнопки, открывается ли нужный экран и можно ли вернуться назад. Не нужно связывать каждую деталь большого проекта до обсуждения основной задачи. Даже несколько экранов помогут заметить, где посетителю не хватает объяснения.
05Зачем проверять путь до готового сайта
На отдельных экранах всё может выглядеть убедительно, но при переходе человек внезапно теряет контекст. Например, после выбора занятия не видит, какую дату выбрал, и сомневается, верно ли продолжает запись. В связанном макете такую проблему проще заметить заранее.
Во время просмотра дай человеку задачу и не веди его за руку. Если он нажимает не туда, спроси, какой результат ожидал. Иногда нужно изменить подпись, иногда — добавить пояснение на следующем экране. Сам переход не делает сайт удобным: он помогает проверить порядок информации. Сохрани заметку о затруднении и повтори тот же путь после изменения.
