Как сделать наложение в фигме?

1. Откройте вкладку Prototype у макета. Найдите кнопку, которая должна открывать диалог, и убедитесь, что рядом существует отдельный фрейм с содержимым окна. В его границы должны входить текст, фон и кнопки самого диалога.

2. Протяните связь от кнопки открытия к этому фрейму. В настройках взаимодействия выберите On click, затем Open overlay. Проверьте название назначения: случайная связь с большим экраном даст совсем другой размер наложения.

3. Выберите положение диалога. Начните с центра, если это обычное окно подтверждения. Ручное размещение пригодится, когда окно должно появляться около определённого элемента, но сначала удобнее проверить сам принцип работы.

4. Включите Add background behind overlay. Настройте цвет и непрозрачность затемнения. Например, для светлого интерфейса полупрозрачный тёмный фон помогает отделить диалог от основного экрана. Смотрите, чтобы текст подложки не спорил с содержимым окна по заметности.

5. Решите, как окно закрывается. Для учебного диалога можно включить Close when clicking outside. Если есть крестик или кнопка Отмена, назначьте ей действие Close overlay. Само изображение крестика без взаимодействия ничего не закрывает.

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

7. Если вместо наложения происходит полная смена экрана, проверьте тип действия. Для этого случая требуется Open overlay. При работе с общим диалогом учитывайте, что настройки наложения относятся к самому оверлею и используются при его повторном открытии из разных мест.

Крестику тоже назначил Close overlay.

Открытие поверх экрана В Prototype протяните связь от кнопки к отдельному фрейму диалога. Для триггера On click выберите Open overlay. Назначение связи должно указывать именно на маленький диалог, а не на копию всего экрана.

Вид наложения Настройте Position, например центр. Для затемнения включите Add background behind overlay и подберите цвет с непрозрачностью. Сам диалог должен оставаться хорошо читаемым поверх фона.

Закрытие Можно включить Close when clicking outside. Если в диалоге есть крестик, назначьте ему Close overlay. В показе последовательно проверьте открытие, нажатие внутри диалога и закрытие. Обычный переход Navigate to заменяет экран, поэтому для описанной задачи нужен другой тип действия.

Было Navigate to, поэтому заменялся весь экран.