Как сделать анимацию navbar в Figma

Шаг 1

• Создаём новый фрейм.
• Добавляем элементы дизайна.

Шаг 2

• Выносим наше меню за пределы фрейма.
• Создаём эллипс с цветом фона и меняем его форму.
• Создаём ещё один эллипс с цветом меню.

Шаг 3

• Переносим иконку внутрь нашего эллипса и меняем ей цвет.
• Выделяем все элементы и оборачиваем их во фрейм (Ctrl+Alt+G).
• Дублируем фрейм.

Шаг 4

• Сдвигаем наши эллипсы на следующую иконку.
• Опускаем первую иконку и возвращаем ей цвет.
• Переносим вторую иконку внутрь эллипса и меняем ей цвет.

Шаг 5

• Дублируем фрейм.
• Повторяем те же действия для третьей иконке.

Шаг 6

• Выделяем все фреймы и создаём Component set.

Связываем вариант (от иконки к фрейму):

• On click
• Smart animate
• Gentle — 800ms.

Шаг 7

• Создаём ещё несколько фреймов с контентом.
• Копируем и вставляем в них наше меню.

Шаг 8

Связываем элементы меню с соответствующими фреймами:

• On click
• Smart animate

• Gentle — 800ms.

Готово!

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