Анимация появления элементов в Figma
В этом уроке мы научимся создавать анимацию появления элементов, используя только функции Figma.
Шаг 1
- Создаём новый фрейм.
- Добавляем элементы дизайна, которые будем анимировать.
Шаг 2
- Оборачиваем каждый элемент во фрейм (Ctrl+Alt+G).
- Поставьте галочку Clip content.
Шаг 3
- Дублируем фрейм.
- Прячем текст за границы фрейма (вниз).
- Хедер выносим за границы общего фрейма.
Шаг 4
- Дублируем фрейм.
- Прячем изображения за границы фрейма (вверх).
Шаг 5
- Дублируем фрейм.
- Уменьшаем линии до 1 px.
Шаг 6
Связываем фреймы:
- After delay — 1ms
- Smart animate
- Ease out — 1000ms.
Готово!
Необычная анимация появления элементов готова.
Рекомендуем ознакомиться:
Делаем интерактивный слайдер в Figma
Для создания интерактивного слайдера нам понадобятся фото, которые мы будем использовать в карточках слайдера
Нажимая кнопку «Подписаться на рассылку», ты соглашаешься с
Политикой Конфиденциальности
и Правилами сайта
.
