Интерактивный прототип в Figma: переходы, оверлеи и анимация

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

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

В 2026 году важно различать два инструмента. Режим Prototype в Figma Design связывает экраны и имитирует действия пользователя. Новый Figma Motion находится в открытой бете и предназначен для более точной production-анимации с таймлайном и ключевыми кадрами. Для кликабельного пользовательского сценария Motion не обязателен.

Из чего состоит взаимодействие в прототипе

Любая связь строится по одной формуле: объект запускает событие, Figma выполняет действие и при необходимости показывает переход. Термины проще запомнить на одном примере: пользователь нажимает кнопку «В корзину», открывается мини-корзина, а панель плавно выезжает справа.

Это соответствует логике из официальной справки Figma: у каждого взаимодействия есть триггер и действие. Если прототип не работает, проверяйте цепочку слева направо: выбран ли hotspot, назначено ли событие, задано ли действие и существует ли корректная цель.

Как подготовить макет к прототипированию

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

Перед настройкой связей:

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

Как сделать переход между экранами в Figma

Шаг 1. Выберите активный элемент

Откройте вкладку Prototype в правой панели и выделите кнопку, ссылку, карточку или другой слой. На границе объекта появится узел связи. Если кликабельной должна быть большая область, можно добавить поверх неё прозрачный прямоугольник и использовать его как hotspot, но не закрывайте им соседние элементы.

Шаг 2. Соедините объект с целевым фреймом

Перетащите узел к экрану назначения. Появится connection — линия, которую иногда называют noodle. Figma откроет параметры Interaction. Цель лучше выбирать осознанно: для перехода на новый экран нужен Navigate to, а для контента поверх текущего экрана — Open overlay.

Шаг 3. Выберите триггер

Триггер должен соответствовать устройству и поведению элемента.

Триггеры Mouse enter и While hovering похожи, но ведут себя по-разному. While hovering возвращает пользователя к исходному состоянию после ухода курсора. Mouse enter показывает целевое состояние до следующего настроенного действия; его часто дополняют Mouse leave.

Шаг 4. Назначьте действие

Для большинства учебных и клиентских прототипов хватает нескольких действий.

• Navigate to — перейти к другому экрану.
• Back — вернуться к предыдущему экрану в истории прототипа.
• Scroll to — прокрутить экран к объекту, как по якорной ссылке.
• Open overlay / Close overlay — открыть или закрыть слой поверх текущего экрана.
• Swap overlay — заменить один оверлей другим с сохранением его позиции и настроек.
• Change to — переключить вариант интерактивного компонента.
• Open link — открыть внешний адрес.

В более сложных сценариях можно использовать Set variable, несколько действий на одном триггере и Conditional с условием if/else. По официальной документации Figma, переменные в прототипах доступны на платных планах; базовые переходы, оверлеи и Smart Animate доступны на любом плане.

Шаг 5. Настройте анимацию

После выбора действия задайте Transition, Direction, Easing и Duration. Длительность указывается в миллисекундах. Не существует одного значения для всех интерфейсов: короткая обратная связь должна ощущаться быстрее, чем переход между крупными экранами.

Диапазоны в таблице — практическая отправная точка, а не ограничение Figma. Сравнивайте варианты в контексте: важнее, чтобы движение объясняло смену состояния, не задерживало пользователя и было одинаковым в похожих ситуациях. Официальные различия между переходами собраны в справке Prototype animations.

Как выбрать easing

Easing задаёт ускорение и замедление. Linear сохраняет постоянную скорость и подходит для редких технических индикаторов, но в навигации часто выглядит механически. Ease out быстро запускает движение и мягко останавливает его — это удобная отправная точка для появления панели. Ease in ускоряет объект к концу и чаще уместен при уходе элемента. Ease in and out подходит для симметричного перемещения между равнозначными состояниями. Пружинные кривые добавляют инерцию и могут подчеркнуть жест, но сильный bounce быстро утомляет. Сохраняйте одинаковые кривые у одинаковых компонентов; параметры и spring-настройки описаны в справке Figma по easing.

Шаг 6. Задайте начало сценария и запустите проверку

Выберите стартовый экран и назначьте Flow starting point. Затем откройте Presentation view кнопкой Play, пройдите путь без подсказок и вернитесь назад. Если в файле несколько сценариев — например, регистрация и покупка, — создайте отдельный Flow для каждого. Так заказчик или респондент сможет запустить нужную ветку по прямой ссылке.

Как сделать оверлей и всплывающее окно

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

1. Создайте отдельный фрейм с содержимым окна.
2. Выделите элемент, который должен его открыть.
3. В Prototype соедините элемент с фреймом оверлея.
4. Выберите On click / On tap → Open overlay.
5. Задайте позицию: одну из семи стандартных или вручную.
6. При необходимости включите Close when clicking outside.
7. Добавьте фон за оверлеем и настройте его цвет и прозрачность.
8. Выберите анимацию появления и проверьте закрытие по крестику, клику снаружи и кнопке Back — если эти способы предусмотрены сценарием.

Настройки сохраняются у самого оверлея, поэтому одно модальное окно можно переиспользовать в нескольких местах. Swap overlay заменяет открытый слой другим, но не добавляет эту замену в историю: действие Back вернёт пользователя к предыдущему экрану, а не к предыдущему оверлею. Это поведение описано в официальной инструкции Figma по оверлеям.

Как работает Smart Animate

Smart Animate ищет совпадающие слои в исходном и целевом фреймах, сравнивает их свойства и строит промежуточное движение. Figma учитывает название слоя и его место в иерархии. Поэтому самый надёжный способ получить совпадения — дублировать готовый фрейм, а затем изменить нужные свойства во второй копии.

Пошагово:

1. Дублируйте исходный фрейм.
2. Не переименовывайте слои, которые должны плавно трансформироваться, и не переносите их в другую группу без необходимости.
3. Во втором фрейме измените положение, размер, поворот, прозрачность или заливку объекта.
4. Соедините состояния через нужный триггер и действие Navigate to либо Change to.
5. В поле Animation выберите Smart Animate, настройте easing и duration.
6. Запустите прототип и при отладке временно увеличьте длительность: так проще заметить неправильное сопоставление.

Smart Animate поддерживает, в частности, изменение масштаба, позиции, прозрачности, поворота и заливки. Для появления объекта лучше оставить слой в обоих состояниях и установить opacity 0% в начальном, а не скрывать его. Тени и переход между разными типами фигур могут не интерполироваться — тогда Figma использует Dissolve. Полный список ограничений есть в справке Smart animate layers between frames.

Почему Smart Animate не работает

Чаще всего проблема не в самой анимации, а в структуре файла.

• Названия отличаются. Слой `Icon/Search` в одном фрейме и `Search icon` в другом не совпадут.
• Изменилась иерархия. Объект находился внутри карточки, а затем оказался на верхнем уровне.
• Совпали лишние слои. Одинаковые имена у разных карточек заставляют Figma анимировать не тот объект.
• Слой отсутствует. Новый объект по умолчанию проявится через Dissolve.
• Изменилось неподдерживаемое свойство. Тень или одна фигура, превращающаяся в другую, не всегда дадут ожидаемый результат.
• Слишком короткая длительность. Ошибка есть, но её не успевают заметить при просмотре.

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

Интерактивные компоненты, hover и переменные

Для кнопки не стоит создавать отдельный экран на каждое состояние. Соберите component set с вариантами Default, Hover, Pressed и Disabled, а затем соедините их действием Change to. Интерактивность будет работать во всех экземплярах компонента и не превратит основной Flow в сеть повторяющихся стрелок.

Короткие реакции элемента на действие пользователя называют микровзаимодействиями: кнопка меняет состояние, переключатель сдвигается, форма подтверждает ввод. Их смысл — дать обратную связь, а не украсить каждый клик.

Для десктопной кнопки можно настроить While hovering → Change to → Hover, а для нажатия — While pressing → Pressed. На мобильных устройствах hover отсутствует, поэтому важная информация не должна быть доступна только при наведении. Тултипу нужен альтернативный запуск по нажатию или явная кнопка справки.

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

Как настроить прокрутку, Fixed и Sticky

Чтобы экран прокручивался, контент должен выходить за границы фрейма. Выберите фрейм, откройте Prototype → Scroll behavior → Overflow и задайте Vertical, Horizontal или Both directions. Для длинной страницы обычно нужна вертикальная прокрутка, для карусели — горизонтальная.

У дочерних объектов есть три поведения:

• Scroll with parent — элемент движется вместе с содержимым;
• Fixed — остаётся на месте, например нижняя навигация;
• Sticky — сначала прокручивается, а после достижения верхней границы закрепляется.

В Auto Layout фиксированному объекту может понадобиться Absolute position. При переходе между похожими экранами отдельно решите, сохранять позицию прокрутки или сбрасывать её. Эти настройки и ограничения перечислены в справке Figma о Scroll behavior.

Как проверить интерактивный прототип перед показом

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

Проверьте:

• запускается ли правильный Flow;
• работают ли все основные кнопки и большие активные зоны;
• есть ли путь назад, отмена и закрытие каждого оверлея;
• не зациклены ли переходы After delay;
• совпадает ли направление анимации с пространственной логикой интерфейса;
• не зависит ли мобильный сценарий от hover;
• сохраняются ли выбранные значения и позиция прокрутки там, где это ожидается;
• видны ли состояния загрузки, ошибки и успешного действия;
• можно ли пройти ключевую задачу без комментариев автора;
• не мешает ли анимация чтению и управлению.

Движение должно помогать понять причинно-следственную связь. Рекомендации W3C по анимации от взаимодействий советуют исключать необязательное движение и учитывать пользовательскую настройку reduced motion. Даже если Figma-прототип не реализует системную медианастройку автоматически, покажите команде упрощённый вариант: Instant или Dissolve вместо сильного масштабирования, параллакса и длинных перемещений.

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

Главное

Хороший интерактивный прототип — не набор эффектов, а проверяемая модель поведения продукта. Сначала соберите один ясный Flow, затем назначьте осмысленные триггеры и действия. Используйте Navigate to для навигации, Open overlay для контента поверх экрана, Change to для состояний компонента, а Smart Animate — только там, где совпадающие слои действительно должны плавно измениться.

Если хочется не просто повторять настройки, а уверенно проектировать пользовательские пути, тестировать гипотезы и собирать интерфейсы для портфолио, посмотрите программу курса UX/UI-дизайнера Yudaev School. На практике интерактивность всегда работает в связке с композицией, структурой и UX-логикой — именно это превращает аккуратный макет в убедительный продуктовый кейс.

FAQ: частые вопросы об интерактивных прототипах в Figma

Как сделать интерактивный прототип в Figma?

Подготовьте фреймы экранов, откройте Prototype, протяните связь от кнопки или другого hotspot к целевому фрейму, выберите trigger, action и animation. Затем назначьте Starting point и проверьте Flow в Presentation view.

Как настроить переход между экранами?

Соедините активный элемент с целевым фреймом и выберите Navigate to. После этого задайте анимацию: Instant, Dissolve, Smart Animate, Move, Push или Slide, а также направление, easing и длительность, если они поддерживаются выбранным типом.

Как сделать всплывающее окно в Figma?

Создайте отдельный фрейм окна и соедините с ним кнопку через Open overlay. Укажите позицию, затемнение фона, закрытие по клику снаружи и анимацию. Для крестика внутри окна назначьте Close overlay.

Почему Smart Animate не работает?

Figma сопоставляет слои по имени и месту в иерархии. Проверьте одинаковые названия, группы и порядок вложенности в обоих состояниях. Если свойство не поддерживается или слой появился только в одном фрейме, Figma может заменить движение на Dissolve.

Можно ли сделать hover-анимацию?

Да. Для компонента создайте варианты Default и Hover и настройте While hovering → Change to. Но не помещайте критически важную функцию только в hover: на сенсорных устройствах наведению нужна альтернатива по нажатию.

Можно ли пользоваться прототипированием бесплатно?

Базовые триггеры, переходы, оверлеи и Smart Animate доступны на любом плане Figma. Продвинутые сценарии с переменными и условиями зависят от тарифа; согласно справке Figma, variables in prototypes доступны на платных планах.

Авторитетные источники и полезные материалы

• Figma Help Center: Prototype triggers
• Figma Help Center: Prototype actions
• Figma Help Center: Prototype animations
• Figma Help Center: Create overlays in your prototypes
• Figma Help Center: Smart animate layers between frames
• Figma Help Center: Prototype scroll and overflow behavior
• W3C WAI: Animation from Interactions, WCAG 2.2