Чтобы сделать активное меню на сайте в Figma, можно следовать таким шагам: 2
- Создать фрейм для окна меню. 2
- Создать кнопку, которая будет открывать меню. 2 Сделать её повторяющимся компонентом, чтобы легко повторно использовать на макете. 2 Добавить действие «Нажмите» для кнопки, чтобы она открывала меню. 2
- Создать элементы меню (кнопки, разделители и т. д.). 2 Для каждого элемента использовать повторяющиеся компоненты. 2 Расположить элементы внутри фрейма, где они будут отображаться при открытии меню. 2
- Добавить действия «Нажмите» для каждого элемента меню, чтобы они выполняли нужную функцию при нажатии пользователя. 2 Например, если это кнопка «Выход», можно добавить действие «Перейти к ссылке» на страницу выхода из аккаунта. 2
- Добавить функцию закрытия меню, когда пользователь кликает где-то вне фрейма меню или на кнопку закрытия. 2 Для кнопки закрытия использовать действие «Нажмите», а для свойства «Отображать» фрейма добавить функцию «Установить значения», чтобы он стал скрытым. 2
Также можно создать всплывающее меню с умной анимацией: 1
- Создать пункты меню. 1 Для этого нужно белый фрейм с текстом внутри. 1 По желанию можно добавить иконку. 1
- Скопировать фрейм и перекрасить в нём текст и фон в более контрастный цвет. 1 Например, фон можно сделать лиловым, а текст — фиолетовым. 1
- Создать из получившихся фреймов компоненты и объединить их в комбайн. 1
- Перейти во вкладку Prototype и связать белый фрейм с цветным. 1 В параметрах анимации указать While hovering. 1
- Выставить в ряд несколько копий белых, неактивных пунктов меню. 1 Объединить их во фрейм и снизу добавить кнопку «Меню» в стиле «бургера». 1
- Скопировать фрейм с меню. 1 Уменьшить в нём фрейм с пунктами меню и указать его непрозрачность 0%. 1 Саму кнопку с «бургером» менять не нужно. 1
- Сделать из получившихся фреймов компоненты и объединить их в комбайн. 1
- Перейти во вкладку Prototype и связать «бургер» из фрейма с меню с фреймом без меню. 1 В параметрах анимации указать On click и Smart animate. 1
- Теперь связать «бургер» из фрейма без меню с фреймом с меню. 1 В параметрах анимации указать On click и Smart animate. 1
- Добавить своё меню на прототип и проверить результат. 1
Также из меню можно сделать ссылку на внешний фрейм прототипа. 1 Для этого связать любой из пунктов меню прямо из комбайна с внешним фреймом. 1