Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#Руководства</a>

2 <ul><li>23 сен 2019</li>

3 <li>0</li>

4 </ul>Современные интерфейсы - это не просто статические экраны. Рассказываем, какие эффекты можно создать с помощью Figma Overlays.

5 vlada_maestro / shutterstock

6 Автор статей по дизайну. В веб-дизайн пришёл в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил вёрстку. Время от времени публикую переводы на Habr.

7 Overlay(дословно "перекрытие")- один из вариантов действий, которые можно назначить любому элементу.

8 Существует 3 варианта анимации для элементов на сайте:

9 <ul><li>Navigate - при взаимодействии с элементом пользователь переходит на другой экран. Например, вы нажали на Каталог - открылась страница каталога.</li>

10 <li>Swap - заменяет один элемент другим. Например, вы кликаете на иконку помощи внизу экрана - выпадает контекстное меню. В нем вы выбираете Чат, и контекстное меню заменяется на окно чата, которое будет находиться на том же месте, что и контекстное меню.</li>

11 <li>Overlay - выводит новый элемент поверх всех остальных элементов интерфейса. Например, вы кликаете на кнопку, и появляется диалоговое окно с выбором действий.</li>

12 </ul>Оверлей подходит для прототипирования бургер-меню, всплывающих модальных окон, системных сообщений, а также для всплывающих подсказок и экранной клавиатуры.

13 Пример оверлеев с официального сайта Figma, который отлично демонстрирует работу этого параметраРазберем на примере одного проекта, как использовать параметрOverlayи какие преимущества он дает.

14 Чтобы активировать оверлей, нужно перейти в режим прототипа.

15 Режим PrototypeВыберите элемент, по нажатию на который должен срабатывать оверлей. В нашем примере клик по элементу будет вызывать бургер-меню.

16 Выбираем элемент, по нажатию на который будет активироваться оверлейЧтобы создать связку бургер-меню с оверлеем, перетащите круглый маркер, который появился при выделении бургер-меню, на фрейм оверлея (я назвал егоOverlaysMenu).

17 Делаем привязку главной страницы к бургер-менюВыберите тип триггера - событие, которое будет запускать действие. Я выбралOn Tap - то есть при нажатии.

18 Посмотрите, что получилось: нажмите в правом верхнем углу иконкуPresent.

19 Запускаем режим просмотра прототипаБургер-меню теперь открывается в новом окне по клику на иконку менюМеню открылось, но не так, как было нужно: интерфейс появился на новой странице. Так произошло, потому что по умолчанию включен параметр Navigate, то есть клик по иконке меню запустил переход между экранами.

20 Давайте поменяем его на Overlay. Выделите бургер-меню и в разделеActionвключите параметрOpen Overlay.

21 Настраиваем переход между экранами, чтобы бургер-меню выводилось поверх всех остальных элементовНо это не все настройки, нужно задатьPositionи Overlay Background.

22 В Figma есть готовые варианты расположения оверлеев, но вы можете задать позицию вручную. Для этого выберитеManualи переместите элемент (в нашем случае это бургер-меню) в нужное вам место.

23 В Manual можно задать свое расположение оверлеяПросто перемещайте элемент курсором или стрелками и не забывайте проверять в режиме предпросмотра. У меня получилось так:

24 Двигаем расположение меню в режиме ManualОбратите внимание: когда выбираете параметрOpen Overlay,рядом с фреймом появляется иконка-подсказка, она показывает, что за параметр выбран.

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

26 Меню теперь открывается поверх главного экранаЧасто всплывающие окна делают более контрастными с фоном. Такой эффект можно сделать, например, с помощью подложки. Выставим черный фон с прозрачностью 40% - на примере выше видно, как при появлении меню главная страница немного затемняется.

27 Настраиваем затемнение главного окнаЕще одна интересная опция -Close when clicking outside. Она позволяет пользователю вернуться в предыдущее состояние экрана по щелчку за пределами оверлея. Включается очень просто:

28 Активируем опцию закрытия окна по щелчку за границей окнаТеперь поведение меню еще больше похоже на реальное на сайте.

29 Анимация закрытия окна по щелчку мыши за границами окнаЕсли вы не хотите давать пользователю возможность выходить из режима оверлея подобным образом, есть смысл создать свой вариант навигации. Например, на фрейме оверлея есть иконкаClose - она и должна закрывать окно. Настроим логику работы.

30 Настраиваем закрытие фрейма с блоком меню по крестикуВыберите нужный элемент и перетяните за круглый маркер в сторону, появится значокClose Overlay. Теперь окно можно закрыть по нажатию на крестик.

31 Анимация закрытия окна по крестикуОчень крутая опция -Transition, она помогает сделать плавные переходы между состояниями интерфейса.

32 Настройка переходовВыберитеDissolveи Move Inи посмотрите, что произойдет.

33 Dissolve - меню плавно проявляется и так же плавно исчезаетMove In - меню плавно выезжает сбокуТакже для переходов можно задавать параметры:

34 <ul><li>Направление - позволяет выбрать, в какую сторону будет двигаться оверлей.</li>

35 <li>Длительность- дает выставить время перехода в миллисекундах (ms).</li>

36 <li>Смягчение - позволяет замедлить часть перехода в начале, конце, или как в начале, так и в конце.</li>

37 </ul>Под настройками есть окно предварительного просмотра анимации, что крайне удобно.

38 Окошко предварительного просмотра анимацииПри работе с оверлеем на нескольких экранах вам нет необходимости менять настройки для каждого из них. Нужно всего лишь внести изменения в настройках оверлея - и они отразятся на всех экранах.

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

40 При клике на выделенные иконки можно изменить настройки оверлеяУбрать подключение оверлея можно тремя способами:

41 1. Зажать курсором стрелку связи и перетащить ее в пустую часть холста.

42 Убираем связь между элементами - и удаляем оверлей2. Выбрать синий значок в левом верхнем углу оверлея и нажать клавишуDelete.

43 Убираем оверлей через Delete3. Щелкнуть по значку оверлея правой кнопкой мыши и выбратьRemove All Connections. Это удалит все подключения.

44 Удаляем все подключения с оверлеем сразуФинальный этап работы - установить связи между всеми экранами. Я создал связи между пунктами выпадающего меню и страницами, на которые они позволяют перейти.

45 Связи между объектами прототипаАнимация прототипа: все кликается, открывается и закрываетсяВы наверняка видели, что на мобильных версиях сайтов выпадающее меню занимает весь экран. Сделаем такую версию. Создайте еще один оверлей.

46 Второй вариант фрейма с меню на весь экранИ поменяйте настройки перехода, например,Dissolve 500 ms.

47 Анимация прототипа оверлея меню на весь экранНапоследок расскажу еще об одной важной вещи: Figma может выводить оверлей поверх другого оверлея. Для этого я создал еще один фрейм и подключил все необходимые связи.

48 Создание фрейма, который будет отображаться поверх другого оверлея Настройка связей между объектамиТеперь, когда мы нажмем на пункт менюHistory, для которого экран не отрисован, будет показан еще один оверлей поверх меню.

49 Анимация прототипа меню с двумя оверлеямиЗдесь я немного сильнее затемнил фон и выбрал позицию для красного диалогового окнаBottom Center. Тип перехода -Move In, появление снизу.

50 Создание прототипов у многих отнимает много времени, особенно если нужно не просто нарисовать структуру, но и настроить связи, переходы и эффекты. Но такой навык необходим, если вы собираетесь проводить тестирование прототипа на пользователях.<a>На курсе Figma</a>вы сможете узнать обо всех подводных камнях и возможностях Figma, а также собрать свой рабочий прототип.

51 <a>Научитесь: Figma с нуля до PRO Узнать больше</a>