Создаём куб в Figma и анимируем его
Для создания куба с текстурой нам понадобиться плагин Easometric и изображение, которое мы будем накладывать на куб. Давайте поэтапно разберём, как создать куб со своим изображением и анимировать его.
Шаг 1
- Создаём 3 фрейма с размером 500х500.
- Подписываем фреймы «Top», «Right», «Left».
- Создаём компонент из каждого фрейма (Ctrl+Alt+K).
Шаг 2
- Добавляем изображение в каждый из фреймов таким образом, чтобы получилась цельная картинка.
- Для поиска изображений используем плагин Unsplash.
Шаг 3
- Дублируем фрейм «Right» и группируем его (Ctrl+G).
- Поворачиваем фрейм внутри группы на — 90°.
- Выделяем группу и запускаем плагин Easometric.
- Выбираем пункт «Right».
Шаг 4
- Так же дублируем, группируем и прогоняем через плагин фреймы «Left» и «Top».
- Собираем кубик из получившихся частей.
Шаг 5
- Переносим наш кубик во фрейм с дизайном.
- Дублируем фрейм и прячем элементы дизайна и кубик за пределы фрейма.
Шаг 6
- Дублируем фрейм с кубиком.
- На копии фрейма разбираем кубик по частям и выносим за пределы фрейма, непрозрачность меняем на 0.
- Добавляем текст.
- Меняем непрозрачность у кнопки на 0.
Шаг 7
Связываем фреймы 1–2:
- After delay — 1ms
- Smart animate
- Slow — 600ms.
Шаг 8
Связываем фреймы 2–3 (от кнопки к фрейму):
- On click
- Smart animate
- Slow — 600ms.
Готово!
Теперь ты умеешь создавать кубики с текстурами и анимировать их. Подобные 3D объекты могут служить отличным графическим элементом, как для блоков на сайте, так и для графических работ, например, баннеров, постов или постеров.
Рекомендуем ознакомиться:
Анимация первого экрана в Figma
В этом уроке мы создадим и заанимируем первый экран веб-сайта.
Пожалуйста, поделись этим материалом!
Мы потратили много часов на его создание, а тебе нужно всего 10 секунд, чтобы поделиться им!
