Как сделать интерактивный прототип сайта в Figma: переходы, кликабельные зоны и сценарии

Набор красивых экранов ещё не показывает, что произойдёт после нажатия кнопки. Интерактивный прототип связывает действия пользователя с переходами и состояниями: открыть карточку, вызвать окно, закрыть его, вернуться назад. В Figma это можно собрать до разработки и проверить на конкретном маршруте.

Разберём авторский пример сайта аренды переговорных: посетитель выбирает комнату и отправляет запрос. Это учебный сценарий проектирования, не готовый подключённый сервис. Прототип показывает поведение интерфейса; реальное бронирование и отправка данных в этом примере не реализуются.

Определите вопрос, ради которого нужен прототип

Если требуется обсудить только расположение блоков и содержание страницы, может хватить wireframe — упрощённого макета. Если нужно проверить, понятен ли путь от списка комнат до подтверждения запроса, добавляйте интерактивность именно этому пути. Не обязательно связывать все декоративные элементы сайта.

В нашем примере вопрос звучит так: «Сможет ли человек выбрать переговорную на шесть человек и понять, что запрос отправлен, а бронь ещё не подтверждена?» Такая формулировка определяет и нужные экраны, и текст финального состояния.

Figma описывает flow как сеть фреймов и связей на одной странице, со своей начальной точкой. Поэтому сначала нарисуйте маршрут на бумаге: список → карточка комнаты → форма запроса → сообщение о принятом запросе. Отдельная ветка — закрытие формы без отправки.

Подготовьте макет и названия состояний

Создайте верхнеуровневые фреймы списка, карточки и финального сообщения. Окно формы подготовьте отдельным фреймом для overlay. В авторской системе названий это Rooms, Room-detail, Request-dialog и Request-sent. Имена помогают отличать назначение экрана от его цвета или порядкового номера.

В Design задайте единые отступы и сетку, затем подготовьте повторяющиеся компоненты кнопок и карточек. Это авторская организация макета: одинаковое действие должно иметь одинаковую подпись и заметную кликабельную область. На разных экранах не меняйте «Отправить запрос» на «Забронировать», если смысл действия остаётся прежним.

Для формы запланируйте состояния заполнения и ошибки. В простом учебном варианте они показаны отдельными макетами с заранее подготовленными данными. Не обещайте демонстрацию настоящего ввода и серверной проверки, если построили только переход на нарисованное состояние.

Создайте первую связь в Prototype

Выделите объект, который станет hotspot: например, кнопку «Подробнее» внутри карточки комнаты. Перейдите в Prototype и протяните связь к верхнеуровневому фрейму Room-detail. По документации Figma взаимодействие состоит из trigger — причины запуска — и action — результата.

Для учебной кнопки выберите нажатие On click и действие Navigate to. Затем проверьте назначение в панели взаимодействия. Если случайно связали кнопку с декоративной группой вместо нужного фрейма, переход не выражает задуманный маршрут.

Hotspot может быть кнопкой, иконкой, изображением или другим объектом. В авторском примере ссылка занимает всю видимую кнопку, а не только узкую надпись. Рядом расположенные разные действия не должны перекрываться невидимыми прямоугольниками.

При первой связи Figma может создать начальную точку потока. Проверьте её явно и назовите поток «Запрос переговорной». Это позволит начинать показ со списка, а не с того экрана, который случайно оказался выделен последним.

Выберите переход по смыслу действия

Документация Figma описывает overlays как фреймы поверх текущего экрана, подходящие для меню, подсказок, предупреждений и подтверждений. В настройках overlay задайте положение и нужный фон; проверьте, как окно закрывается. Не полагайтесь на возможность закрытия, которую вы не настроили и не проверили.

Анимацию выбирайте после того, как маршрут работает. Для первого показа автор оставляет простые переходы без сложных перемещений. Анимация не должна маскировать отсутствие обратного пути или заставлять зрителя ждать ради декоративного эффекта.

Меню, длинная страница и возврат

Если меню открывается поверх страницы, его удобно представить отдельным overlay и дать каждому рабочему пункту понятное назначение. Пункт текущего раздела и кнопка закрытия не должны случайно отправлять человека в начало сценария.

Для длинной карточки комнаты задайте видимую высоту фрейма, оставив содержимое за его границами, и настройте вертикальное overflow scrolling. Figma требует, чтобы содержимое действительно выходило за размеры фрейма: одного переключателя недостаточно, если прокручивать нечего.

На Room-detail добавьте явный возврат к списку. В этом авторском сценарии он ведёт к известному экрану Rooms. Если используете другое поведение возврата, проверяйте его с разных входов: «назад» после прямого открытия карточки и после навигации из списка может восприниматься по-разному.

Покажите ошибку формы и честное подтверждение

В учебной ветке пустой запрос ведёт к состоянию с подсказкой у обязательного поля. Заполненный пример ведёт к сообщению: «Запрос принят. Менеджер подтвердит доступность комнаты отдельно». Это важно: отправка заявки не равна гарантированной брони.

Нарисуйте обе ветки до презентации и объясните, какие данные в демонстрации заготовлены заранее. Не делайте всю форму одним огромным hotspot: иначе человек не поймёт, что именно отправляет и где ожидается действие.

Для тестового просмотра предложите задачу, а не инструкцию по кнопкам: «Найдите комнату на шесть человек и запросите её на встречу». Наблюдайте, где пользователь ищет вместимость, понимает ли разницу между запросом и бронью и может ли отменить действие. Это авторский способ проверки сценария, а не полноценное исследование на репрезентативной выборке.

Preview, Present и обратная связь

Figma предлагает Preview внутри редактора и Present в отдельной вкладке. Перед показом проверьте стартовую точку, основной путь, закрытие каждого окна и возврат. Затем откройте режим представления, чтобы оценить сценарий так, как его увидит зритель.

Для комментариев в представлении участнику нужно войти в Figma и иметь как минимум доступ на просмотр. Документация также предупреждает: при скрытых панели инструментов и нижней панели комментарии не отображаются. Это стоит проверить, если клиент говорит, что не видит обсуждение.

Вместе со ссылкой на прототип передайте задачу просмотра, начальный поток и границы демонстрации: например, «проверяем выбор комнаты и запрос; оплата пока вне сценария». Убедитесь, что адресат имеет доступ. Согласование содержания отличается от простого факта, что ссылка открылась.

Что исправить до презентации

Проверьте четыре типичных сбоя: незаметная область нажатия, переход не на тот фрейм, окно без закрытия и финал без понятного следующего шага. Отдельно проверьте длинные страницы: нужная кнопка может оказаться вне видимой области без работающей прокрутки.

После исправления повторите весь маршрут с начальной точки. Рабочий интерактивный прототип ценен не количеством синих стрелок, а тем, что позволяет пройти понятный путь, увидеть результат действия и дать предметную обратную связь до разработки.