Анимация появления элементов в Figma

Шаг 1

• Создаём новый фрейм.
• Добавляем элементы дизайна, которые будем анимировать.

Шаг 2

• Оборачиваем каждый элемент во фрейм (Ctrl+Alt+G).
• Поставьте галочку Clip content.

Шаг 3

• Дублируем фрейм.
• Прячем текст за границы фрейма (вниз).
• Хедер выносим за границы общего фрейма.

Шаг 4

• Дублируем фрейм.
• Прячем изображения за границы фрейма (вверх).

Шаг 5

• Дублируем фрейм.
• Уменьшаем линии до 1 px.

Шаг 6

Связываем фреймы:

• After delay — 1ms
• Smart animate
• Ease out — 1000ms.

Готово!

Необычная анимация появления элементов готова.

Рекомендуем ознакомиться:

Анимация появления строк текста по очереди в Figma

В этом уроке мы поэтапно разберём, как сделать анимацию текста, чтобы строки появлялись по очереди.