Создаём куб в Figma и анимируем его

Шаг 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 объекты могут служить отличным графическим элементом, как для блоков на сайте, так и для графических работ, например, баннеров, постов или постеров.