Создаём анимацию карточек в Figma
В этом уроке мы научимся создавать анимацию карточек, которые накладываются друг на друга.
Шаг 1
- Создаём фрейм (F).
- Добавляем текст (T) и прямоугольник (R).
Шаг 2
- Добавляем элементы дизайна.
- Используем шрифт Kharkiv Tone.
- Шум на фоне создаём при помощи плагина Noise.
- Внутри прямоугольника размещаем контент. Для добавления фотографий можете воспользоваться плагином Unsplash.
- Выделяем прямоугольник и контент внутри, и оборачиваем во фрейм (Ctrl + Alt + G).
Шаг 3
- Дублируем фрейм с карточкой (Ctrl + D).
- На копии меняем цвет прямоугольника и контент внутри.
Шаг 4
Снова дублируем фрейм с карточкой (Сtrl + D), меняем цвет и контент.
Шаг 5
- Выбираем верхнюю карточку.
- Нажимаем галочку в меню справа Clip content.
- Тянем за левую сторону фрейма вправо, до того момента, чтобы осталась видна только цифра.
- Также сворачиваем и 2-ю карточку.
Шаг 6
- Дублируем фрейм.
- Разворачиваем карточку с цифрой 2.
Шаг 7
- Дублируем фрейм.
- Разворачиваем карточку с цифрой 3.
Шаг 8
Создаём анимацию от карточки к соответствующему фрейму, на котором она открыта. Настройки анимации:
- On click
- Smart animate
- Ease out — 300ms.
Готово!
- Создаём фрейм (F).
- Добавляем текст (T) и прямоугольник (R).
Рекомендуем ознакомиться:
Как сделать эффект фонарика в Figma
В этом уроке мы поэтапно разберёмся, как создать свечение от фонарика у текста при ховере.
Пожалуйста, поделись этим материалом!
Мы потратили много часов на его создание, а тебе нужно всего 10 секунд, чтобы поделиться им!
