Прототипы: связи и переходы

Прототип превращает статичные экраны в кликабельный макет, по которому можно «походить» как по настоящему приложению.

Картинка экрана не отвечает на вопрос «а что будет, если нажать?». Прототип отвечает — и это бесценно для тестов и презентаций.

Прототипирование связывает фреймы в сценарии: нажал кнопку — открылся следующий экран. Всё это настраивается на вкладке Prototype правой панели, без единой строчки кода.

Создаём первую связь

Переключитесь на вкладку Prototype в правой панели.
Выделите элемент-триггер, например кнопку «Далее».
На правом краю элемента появится синий кружок — потяните из него стрелку к целевому фрейму.
Откроется панель связи: триггер On click, действие Navigate to, анимация.

Триггеры и действия

Триггер — это что запускает переход. Действие — что происходит. Основные:

Триггер	Когда срабатывает
On click / On tap	клик или тап по элементу
While hovering	пока курсор наведён
While pressing	пока зажата кнопка
After delay	через заданное время

Поток прототипа: онбординг

  [Экран 1] --on click--> [Экран 2] --on click--> [Главная]
       ^                                              |
       +-------------- on click «назад» --------------+

Запуск: режим Play

Чтобы протестировать прототип, нажмите кнопку Play (треугольник) в правом верхнем углу или Cmd/Ctrl+Alt+Enter. Откроется окно презентации, где макет кликабелен. Нажимайте на связанные элементы — экраны будут переключаться.

Стартовая точка и Overlay

У прототипа есть стартовый фрейм (Starting frame) — с него начинается показ. Действие Open overlay открывает фрейм поверх текущего (модалки, тултипы), а Back возвращает на предыдущий экран.

Настройки перехода: анимация и направление

В панели связи, помимо триггера и действия, настраивается анимация перехода: Instant (мгновенно), Dissolve (растворение), Move in/out и Push (выезд экрана), Slide и, конечно, Smart animate из следующего урока. У движущихся переходов задаётся направление (влево/вправо/вверх/вниз), кривая ускорения (Ease) и длительность в миллисекундах. Эти параметры задают «характер» интерфейса.

Для мобильных макетов полезны жесты: триггер On drag позволяет сделать свайп-переходы, а While pressing — реакцию на удержание. Так прототип становится похож на настоящее приложение, где экраны выезжают и реагируют на жесты.

Scroll, Sticky и фиксированные элементы

Если содержимое фрейма выше экрана, в прототипе оно прокручивается автоматически — Figma включает скролл, когда контент не помещается. Элемент можно зафиксировать: в свойствах position выберите Fixed (или включите Scroll behavior → Fixed), и хедер или нижнее меню останутся на месте при прокрутке. Так делают «липкие» панели навигации. Эти настройки превращают статичный длинный экран в реалистичную прокручиваемую страницу.

Горячие клавиши

Действие	Клавиша
Запустить прототип (Play)	`Cmd/Ctrl+Alt+Enter`
Вкладка Prototype	клик на панели справа
Удалить связь	выделить связь + `Delete`

Частые ошибки

Тянут связь не из того места. Синий кружок появляется при наведении на правый край выделенного элемента именно во вкладке Prototype.
Забывают про стартовый фрейм. Если Play открывает не тот экран — проверьте стартовую точку.
Связывают слои вместо фреймов для перехода. Navigate ведёт к фрейму-экрану; убедитесь, что цель — фрейм.

Совет профи: прототип проверяет идею, а не украшает

Главная ценность прототипа — не «вау-эффект», а возможность проверить сценарий до того, как написан код. Соберите кликабельный поток ключевого пути (например, регистрация или оформление заказа) и пройдите по нему сами, а лучше — дайте пройти живому человеку. Вы мгновенно увидите, где пользователь путается, какой кнопки не хватает, какой переход неочевиден. Это в разы дешевле, чем находить те же проблемы после разработки. Поэтому не стремитесь связать вообще все экраны и кнопки — сфокусируйтесь на сценариях, которые хотите протестировать. Чистый, осмысленный прототип ключевого пути полезнее, чем огромная паутина связей, в которой запутаетесь вы сами. Прототипирование — это инструмент мышления и проверки гипотез, а не самоцель.

Чек-лист

Переключился на вкладку Prototype.
Создал связь On click → Navigate to.
Запустил прототип в режиме Play.
Понимаю триггеры и действия.

Итоги. Прототип строится из связей между фреймами: триггер запускает действие-переход. Режим Play делает макет кликабельным. Это база интерактива. Дальше добавим плавность — smart animate и интерактивные компоненты.