Оверлеи в прототипе Figma: как открыть модальное окно и закрыть его кликом мимо
Обычный переход заменяет экран. Оверлей — накладывается сверху.
Разница кажется косметической, пока не понадобится меню, всплывающая подсказка или модальное окно.
Что такое оверлей
Документация: в соединении прототипа действие обычно ведёт из точки A в точку B. Если действие — оверлей, Figma показывает его поверх текущего экрана.
Практика: экран под оверлеем остаётся, с него никуда не уходят.
Как создать
Документация описывает короткий путь: вкладка Prototype, затем перетаскивание соединения от объекта к кадру, который должен стать оверлеем.
Практика: кадр должен быть отдельным фреймом, а не группой внутри экрана.
Действие
Документация: в списке действий выбирается Open overlay.
Смысл: целевой кадр открывается над текущим. Документация приводит примеры использования — модальное окно, подсказка, уведомление.
Настройки оверлея
Документация перечисляет три настройки:
- Position — положение относительно исходного экрана, семь готовых вариантов или ручное;
- Close when clicking outside — закрытие по клику вне границ оверлея;
- Add background behind overlay — фон между оверлеем и текущим экраном, с выбором цвета и прозрачности.
Практика: третий пункт — то, что делает модальное окно модальным визуально.
Важная особенность
Документация отмечает: Figma обычно применяет настройки взаимодействия к конкретному соединению. Для оверлея настройки применяются к самому оверлею, а не к соединению.
Практика: поэтому их можно задать один раз и переиспользовать оверлей в разных местах прототипа.
Закрытие
Документация: действие Close overlay закрывает оверлеи, появившиеся над исходным экраном.
Практика: его назначают на кнопку закрытия внутри оверлея или на кнопку «Отмена».
Клик вне окна
Практика: отдельная настройка для закрытия по клику мимо.
Документация: она выключается по умолчанию, и её надо включить осознанно.
Практика: для модальных окон это почти обязательный пункт: пользователь ждёт, что клик по затемнённому фону закроет окно.
Замена одного оверлея другим
Документация: между оверлеями можно создать взаимодействие действием Swap overlay.
Практика: это нужно, когда из одного меню открывается второе. Простое «открыть новый» оставит первый висеть сверху.
Порядок сборки
- Нарисуйте оверлей отдельным фреймом.
- Выделите объект-триггер.
- Перетащите соединение на фрейм оверлея.
- Выберите Open overlay.
- Задайте положение.
- Включите закрытие кликом вне окна.
- Добавьте фон с прозрачностью.
- Проверьте в прототипе.
Практика: шаг 8 покажет то, чего не видно на холсте: как ведёт себя клик.
Анимация
Практика: у оверлея настраивается появление.
Простое появление без анимации выглядит резко, особенно для модальных окон. Мягкое появление и затемнение фона читаются лучше.
Практика: не увлекайтесь: длинная анимация в прототипе замедляет показ.
Что ломается
Оверлей как группа. Соединение не создаётся.
Забыт Close overlay. Из окна нельзя выйти.
Клик вне окна выключен. Пользователь в тупике.
Нет фона. Оверлей не читается как модальный.
Два оверлея подряд без Swap. Они накладываются друг на друга.
FAQ
Какое действие открывает оверлей?
Open overlay.
Как закрыть окно кликом мимо?
Включить Close when clicking outside.
Что делает Add background?
Добавляет цвет и прозрачность между оверлеем и экраном.
Как заменить один оверлей другим?
Действием Swap overlay.
Где настраивается закрытие кнопкой?
Действием Close overlay на элементе внутри оверлея.
Размер оверлея
Практика: оверлей — это фрейм со своими размерами.
Если фрейм меньше содержимого, часть просто не попадёт в кадр. Если больше, клик мимо окна перестанет срабатывать, потому что «мимо» окажется внутри прозрачной области.
Практика: подгоняйте фрейм по содержимому с небольшим отступом.
Меню и выпадающие списки
Практика: для меню оверлей удобнее перехода между экранами.
Экран не меняется, меню появляется рядом с кнопкой. Пользователь видит контекст, а не потерянную страницу.
Практика: положение задаётся вручную, иначе меню может уехать в угол экрана.
Модальное окно с полями
Практика: внутри оверлея может быть своя интерактивность.
Кнопки, поля и даже компоненты с вариантами работают так же, как на обычном экране. Ограничение одно: всё это живёт в рамках фрейма оверлея.
Практика: не пытайтесь связать поля оверлея с экраном под ним — они существуют отдельно.
Переиспользование
Практика: один и тот же оверлей можно вызвать из разных мест.
Настройки привязаны к оверлею, а не к соединению — значит, поведение будет одинаковым, где бы вы его ни открыли.
Практика: это экономит время при сборке прототипа с десятком карточек: меню одно, триггеров десять.
Что видит пользователь
Практика: оверлей не должен требовать объяснений.
Если человек не понимает, как закрыть окно, прототип провалился. Крестик, кнопка «Отмена» и клик по фону — три привычных способа, и хотя бы один должен быть.
Практика: в тестировании это первое, на что спотыкаются.
Проверка сценария
Практика: пройдите сценарий целиком, а не отдельное окно.
Открыть, заполнить, закрыть, открыть снова — если на втором круге что-то ломается, значит настройки не сохраняются или оверлей остаётся в памяти.
Практика: повторное открытие — самый частый источник странностей в прототипах.
Связь с компонентами
Практика: оверлей можно сделать компонентом.
Тогда его состояния собираются вариантами, а открытие — обычной реакцией. Это удобно для меню, у которого есть активный пункт.
Практика: но для простого окна компонент не нужен — достаточно фрейма.
Итог
Оверлей — это кадр, который показывается поверх текущего экрана.
Практика: действие Open overlay, положение относительно экрана, фон с прозрачностью, выход через Close overlay или клик мимо, а для цепочки окон — Swap overlay. Проверять обязательно в запущенном прототипе.
Мобильные и десктопные различия
Практика: у оверлея нет адаптивности.
На десктопе окно может занимать треть экрана, на телефоне — почти весь. В прототипе обычно делают два кадра под разные платформы, а не один универсальный.
Практика: если прототип показывают на телефоне, проверяйте именно в этом размере. Ручное положение может съехать.
Что показать на защите макета
Практика: прототип с оверлеями отвечает на вопросы, которые не задаёт статичный макет.
Где закрывается окно, что происходит с фоном, можно ли открыть второе. Три клика объясняют больше, чем страница пояснений.
Практика: держите под рукой сценарий из пяти шагов и не отвлекайтесь на другие экраны.