Создание космической анимации в Figma

Шаг 1

• Создаём фрейм с цветом #000000.
• Добавляем текст, картинку космоса и планету.
• Выносим планету за пределы фрейма.

Шаг 2

• Дублируем фрейм.
• На скопированном фрейме поднимаем планету, увеличиваем её и поворачиваем на 90°.
• Увеличиваем изображение на заднем фоне.
• Добавляем кнопку.

Шаг 3

Связываем слои:

• After delay — 1ms
• Smart animate
• Slow — 2000ms.

Шаг 4

• Дублируем фрейм.
• Переносим планету вправо, увеличиваем и поворачиваем ещё на 90°
• Добавляем новый текст, поворачиваем и переносим кнопку.

Шаг 5

Создаём анимацию от кнопки к фрейму:

• On click
• Smart animate
• Slow — 1500ms.

Шаг 6

• Дублируем фрейм.
• Изменяем кнопку.

Связываем слои от кнопки к фрейму:

• While hovering
• Smart animate
• Slow — 1500ms.

Шаг 7

• Дублируем фрейм.
• Переносим планету влево и поворачиваем ещё на 90°.
• Добавляем текст.

Шаг 8

Создаём анимацию от кнопки к фрейму:

• On click
• Smart animate
• Slow — 1500ms.

Готово!

Теперь ты знаешь, как создавать необычную космическую анимацию в Figma. Интересная анимация, которая не даст заскучать пользователю на вашем сайте. Меняйте тематику, используйте другие объекты и совершенствуйте данную анимацию.