Как сделать интерактивный прототип в Figma
Практика4 минРедакция Innovialabs
Коротко
Во вкладке Prototype вы связываете фреймы взаимодействиями (триггер, действие, анимация), задаёте стартовую точку флоу, добавляете оверлеи и скролл, а затем отправляете ссылку тестировщикам.
Коротко о главном
Интерактивный прототип в Figma — это набор фреймов, связанных взаимодействиями (interactions). У каждого взаимодействия три части: триггер (что делает пользователь), действие (что происходит) и анимация (как это выглядит). Всё настраивается во вкладке Prototype в правой панели, затем вы отмечаете начало флоу и нажимаете Present. Код не нужен.
Шаг 1. Подготовьте фреймы
- Каждый экран — это фрейм верхнего уровня, а не группа.
- Выберите единый размер фрейма под тестируемое устройство, например пресет телефона.
- Называйте фреймы понятно:
01 Главная,02 Каталог,03 Товар. Названия видны в прототипе и в ссылках. - Повторяющиеся элементы (шапка, таб-бар) делайте компонентами, чтобы правки применялись везде.
Шаг 2. Создайте флоу
Флоу — это путь по прототипу со стартовым экраном. Выделите первый фрейм и во вкладке Prototype добавьте flow starting point. В одном файле может быть несколько флоу, например «Регистрация» и «Оформление заказа», и каждый можно тестировать отдельно.
Шаг 3. Свяжите экраны
Перейдите во вкладку Prototype, выделите слой (кнопку, карточку) и протяните связь к целевому фрейму. Затем настройте детали:
| Часть | Основные варианты | Когда использовать |
|---|---|---|
| Триггер | On click / On tap, On drag, While hovering, While pressing, Mouse enter / leave, Key / Gamepad, After delay | Нажатие — для большинства действий, hover — для десктопа, задержка — для сплэш-экрана |
| Действие | Navigate to, Back, Scroll to, Open link, Open overlay, Swap overlay, Close overlay, Change to | Navigate — для экранов, Change to — для вариантов компонента |
| Анимация | Instant, Dissolve, Smart animate, Move in / out, Push, Slide in / out | Push и Slide — для смены экранов, Dissolve — для мягких замен |
Задайте также easing и длительность. Короткие анимации с ease-out ощущаются отзывчиво, длинные утомляют на тесте.
Совет: стрелке «назад» назначьте действие Back, а не ссылку на конкретный фрейм — так она сработает с любого пути.
Шаг 4. Используйте Smart Animate
Smart Animate находит в двух фреймах слои с одинаковыми именами и вложенностью и анимирует разницу в положении, размере, повороте, прозрачности и заливке.
Как добиться результата:
- Продублируйте фрейм.
- Измените слой в копии: сдвиньте, увеличьте, сделайте прозрачным.
- Сохраните одинаковые имена слоёв в обоих фреймах.
- Свяжите фреймы с анимацией Smart Animate.
Где это уместно: раскрывающиеся карточки, переключатели, индикатор активной вкладки, карусели онбординга. Если элемент «прыгает», а не движется, первым делом проверьте имена слоёв.
Для мелких изменений состояния внутри одного элемента используйте интерактивные компоненты: создайте варианты (Default, Hover, Pressed), свяжите их действием Change to, и все экземпляры станут интерактивными.
Шаг 5. Добавьте оверлеи
Оверлей показывает фрейм поверх текущего экрана: модальные окна, bottom sheet, выпадающие меню, уведомления.
- Действие Open overlay и выбор целевого фрейма.
- Позиция: по центру, сверху, снизу или вручную.
- Закрытие по клику снаружи — для модалок и меню.
- Затемнение фона, чтобы сфокусировать внимание.
- Swap overlay заменяет один оверлей другим, например шаг 1 модалки на шаг 2.
Шаг 6. Настройте скролл
Фрейм прокручивается в прототипе, если контент выше (или шире) самого фрейма и включено clip content.
- Во вкладке Prototype задайте overflow: вертикальный, горизонтальный или оба.
- Для длинной страницы сделайте фрейм высотой с экран устройства, а контент пусть уходит ниже.
- Для горизонтальной карусели поместите карточки во вложенный фрейм с горизонтальным overflow.
- Шапку и таб-бар сделайте фиксированными или sticky, чтобы они не уезжали при скролле.
- Scroll to подходит для якорных ссылок вроде «Наверх».
Шаг 7. Поделитесь и проведите тест
- Present запускает прототип; выберите рамку устройства и нужный флоу.
- Кнопка Share открывает доступ к прототипу; права на редактирование ревьюерам не нужны.
- Ссылку можно открыть в браузере или в мобильном приложении Figma, чтобы проверить на реальном телефоне.
- Во время юзабилити-теста отключите подсветку кликабельных зон, пусть участники ищут сами.
- Подготовьте сценарий заданий: «Найдите товар и добавьте его в корзину», а не «Нажмите синюю кнопку».
Частые ошибки
- Тупики: экран, с которого нельзя уйти. Пройдите каждый флоу сами до теста.
- Разные имена слоёв, из-за которых ломается Smart Animate.
- Прототипировать всё подряд: связывайте только те пути, которые реально тестируете.
- Неверный размер фрейма, из-за которого скролл и фиксированные элементы ведут себя непредсказуемо.