Анимация эффекта волны в Figma
В этом уроке мы создадим эффект волны в Figma при помощи наложения нескольких теней.
Шаг 1
- Создаём новый фрейм с цветом #F1F3F6.
- Создаём эллипс с цветом #F1F3F6.
Шаг 2
Добавляем первый эффект Drop shadow эллипсу:
- X – 6
- Y – 6
- Blur – 18
- Color – #3754AA
- Opacity – 20%.
Шаг 3
Добавляем второй эффект Drop shadow эллипсу:
- X – -6
- Y – -6
- Blur – 18
- Color – #FFFFFF
- Opacity – 100%.
Шаг 4
Добавляем третий эффект Inner shadow эллипсу:
- X – 6
- Y – 6
- Blur – 13
- Color – #FFFFFF
- Opacity – 100%.
Шаг 5
Добавляем четвёртый эффект Inner shadow эллипсу:
- X – -6
- Y – -6
- Blur – 13
- Color – #3754AA
- Opacity – 15%.
Шаг 6
- Добавляем элементы дизайна.
- Дублируем фрейм и перекрашиваем кнопку.
Шаг 7
- Дублируем второй фрейм.
- Увеличиваем эллипс и меняем ему непрозрачность на 0%.
Связываем фреймы 1–2:
- On click
- Smart animate
- Linear — 1ms.
Шаг 8
Связываем фреймы 2–3 друг с другом:
- After delay — 1ms
- Smart animate
- Linear — 1000ms.
Готово!
Теперь ты умеешь создавать и анимировать эффект волны в Figma.
Рекомендуем ознакомиться:
Как вырезать объект в Photoshop
Изображения без фона очень часто нужны в работе дизайнера. В этом уроке мы разберёмся, как быстро вырезать объект с изображения.
Нажимая кнопку «Подписаться на рассылку», ты соглашаешься с
Политикой Конфиденциальности
и Правилами сайта
.
