Анимация первого экрана в Figma
В этом уроке мы создадим и заанимируем первый экран веб-сайта.
Шаг 1
- Создаём фрейм.
- Это будет фрейм номер 2.
- Добавляем элементы дизайна и текст.
Шаг 2
- Дублируем фрейм. Это будет фрейм номер 1.
- Увеличиваем текст и меняем непрозрачность на 0%.
Шаг 3
- Создаём эллипс (O).
- Копируем эллипс и вставляем его во второй фрейм.
- Увеличиваем его и меняем непрозрачность на 0%.
Шаг 4
- Дублируем второй фрейм. Это будет фрейм номер 3.
- Добавляем фотографии, уменьшаем и немного поднимаем текст.
Шаг 5
- Копируем фотографии и вставляем их во второй фрейм.
- Сдвигаем фотографии, так, как хотим чтобы они появлялись.
- Меняем непрозрачность у фотографий на 0%.
Шаг 6
Связываем фреймы 1–2:
- After delay — 100ms
- Smart animate
- Slow — 900ms.
Шаг 7
Связываем фреймы 2–3:
- After delay — 1ms
- Smart animate
- Slow — 500ms.
Готово!
Анимация первого экрана для твоих проектов готова.
Рекомендуем ознакомиться:
Как сделать слайдер реакций в Figma
Для создания слайдера реакций нам понадобятся различные смайлики, их можно найти на сторонних сервисах или в Figma Community.
Нажимая кнопку «Подписаться на рассылку», ты соглашаешься с
Политикой Конфиденциальности
и Правилами сайта
.
