Триггеры прототипа в Figma: клик, наведение, задержка и клавиши
Прототип из двух экранов собирается за минуту.
Дальше начинается главное: чем именно вызывать переход, чтобы прототип вёл себя как продукт, а не как слайд-шоу.
Что такое триггер
Документация: триггер — это событие, после которого Figma запускает действие.
Действий несколько: Navigate to, Back, Open overlay, Swap overlay, Close overlay, Scroll to, Change to. Триггер отвечает на вопрос «когда», действие — «что».
Практика: разберитесь с этой парой до выбора настроек: большинство ошибок — это неверный триггер при верном действии.
On click
Практика: базовый вариант.
Щелчок или тап по объекту запускает действие. Подходит для кнопок, карточек, вкладок.
Практика: если прототип показывает клиенту на телефоне, On click — почти всегда правильный выбор: нажатие там естественно.
On drag
Документация: триггер срабатывает при протяжке.
Есть настройки для обоих направлений и возврат к исходному состоянию при движении в обратную сторону.
Практика: для карусели, свайпа и шторки. Для кнопки «Далее» это плохая идея: никто не догадается тянуть.
While hovering
Документация: действие выполняется, пока курсор находится над объектом.
Когда курсор уходит, прототип возвращается в исходное состояние.
Практика: выпадающие меню, подсказки, подсветка. На тач-устройствах ничего не сработает: наведения там нет.
While pressing
Практика: удержание.
Действие запускается, пока кнопка мыши или палец удерживается. Когда отпускаете — возврат.
Практика: аккуратно: на тач-устройствах долгое нажатие часто вызывает системное меню.
Mouse enter и Mouse leave
Документация: два отдельных триггера срабатывают при входе курсора в область и при выходе из неё.
Практика: ими заменяют While hovering, когда нужен переход в другое состояние, а не возврат. Например, меню открывается при входе и остаётся открытым.
After delay
Документация: триггер срабатывает через заданное количество миллисекунд.
Практика: заставки, тосты, автосохранение. Время задавайте с запасом: тост, который исчезает через 300 мс, никто не прочитает.
Клавиши и контроллер
Документация: триггеры для нажатия клавиши и для игрового контроллера.
Практика: для клавиатурных сценариев и демонстраций с пультом. В обычном кликабельном прототипе они нужны редко.
Videos
Документация: для видео-слоёв доступны триггеры, привязанные к воспроизведению: когда видео начинается или когда заканчивается.
Практика: удобно для интро и для перехода по окончании ролика.
Back
Документация: действие Back запускается без указания цели.
Оно возвращает на предыдущий экран по истории переходов.
Практика: это спокойнее, чем «Back на конкретный кадр»: если историю прохождения ещё не определили, ручная цель легко ломает сценарий.
Анимации
Документация: доступны Instant, Dissolve, Smart Animate, Move in, Push, Slide in.
Длительность настраивается в пределах от 1 до 10000 мс, по умолчанию 300 мс.
Практика: 300 мс — рабочий ориентир. Всё, что медленнее, начинает казаться тормозным интерфейсом.
Easing
Практика: кривая важна не меньше длительности.
Линейная анимация выглядит механической, а с резким стартом и плавным финалом — естественной. В Figma есть готовые наборы и пользовательская кривая Безье.
Практика: для появления элемента подходит мягкий старт, для исчезновения — быстрый.
Smart Animate
Документация: анимация ищет совпадающие по имени слои на двух кадрах и плавно переводит их параметры.
Есть параметр «Animate matching layers».
Практика: это же и главная ловушка: переименованный слой перестаёт совпадать, и переход «скачет».
Порядок работы
- Выделите объект.
- Откройте вкладку Prototype.
- Выберите действие.
- Выберите триггер под сценарий.
- Задайте анимацию и длительность.
- Проверьте в Presentation.
- Проверьте на тач-устройстве.
Практика: шаг 7 отсеет половину проблем с наведением.
Где ломается
Наведение не работает на телефоне. Триггер While hovering требует курсора.
Переход мгновенный. Выбран Instant вместо анимации.
Меню закрывается само. Используется While hovering там, где нужно Mouse enter.
Smart Animate «дёргается». Слои не совпадают по имени.
Клик не срабатывает. Поверх кнопки лежит прозрачный слой.
FAQ
Сколько триггеров в Figma?
Больше десяти: клик, протяжка, наведение, удержание, вход и выход курсора, задержка, клавиши и другие.
Какой триггер по умолчанию?
Обычно On click — он задаётся для нового соединения.
Можно ли совместить клик и наведение?
Нет, на одном объекте выбирается один триггер на соединение.
Какая длительность анимации по умолчанию?
300 мс, диапазон от 1 до 10000 мс.
Как вернуться назад?
Действием Back без указания цели.
Один сценарий — один триггер
Практика: не вешайте на один объект всё сразу.
Если кнопка и открывает меню, и запускает анимацию, и меняет состояние, вы запутаетесь при первой же правке.
Практика: разносите: одно соединение — одно действие.
Область нажатия
Практика: триггер срабатывает по области объекта, а не по видимой иконке.
Если кнопка — это группа из текста и рамки, триггер ловит всю группу. Если нужна маленькая зона, вложите прозрачный прямоугольник.
Практика: прозрачные слои поверх интерактива — самая частая причина «клик не работает».
Состояния компонентов
Практика: для прототипа часто хватает вариантов компонента вместо десятка кадров.
Переключение варианта задаётся действием Change to, а триггер — клик или наведение.
Практика: так прототип остаётся компактным, а не превращается в карту экранов.
Навигация и оверлеи
Практика: не всё решается переходом на новый кадр.
Оверлей открывается поверх текущего экрана и не теряет контекст. Для меню, попапов и селектов это ближе к реальному поведению.
Практика: оверлей можно закрыть кликом по фону — для этого нужен отдельный слой подложки.
Проверка на чужом устройстве
Практика: прототип, который отлично работает на десктопе, часто разваливается на телефоне.
Причина — курсорные триггеры и размеры областей нажатия. Откройте ссылку на телефоне и пройдите сценарий целиком.
Практика: если после этого что-то перестало работать, значит, триггер был не тот.
Итог
Триггер выбирается по сценарию, а не по вкусу.
Практика: клик для явных действий, наведение для подсказок, вход курсора для меню, задержка для автоматики, клавиши для демонстраций. Дальше — действие, анимация и проверка на телефоне.