Как сделать анимацию navbar в Figma
В этом уроке мы пошагово разберём, как сделать анимацию навигационной панели для мобильного интерфейса в 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. Такая анимация отлично подойдёт для мобильных интерфейсов. Экспериментируйте с настройками анимации и формами, для достижения различных результатов.
Рекомендуем ознакомиться:
Создаем 3D анимацию вращения в Figma
Иногда смотришь на свою работу и понимаешь, что хочется не то что добавить, а именно насыпать изюма в дизайн. Так почему бы не сделать эффектную анимацию вращения?
Нажимая кнопку «Подписаться на рассылку», ты соглашаешься с
Политикой Конфиденциальности
и Правилами сайта
.
