Как сделать необычную анимацию загрузки страницы в Figma

Шаг 1

• Создаём фрейм (F).
• Добавляем элементы дизайна, которые будут появляться после загрузки нашей страницы.

Шаг 2

• Группируем элементы (Ctrl + G) в несколько отдельных групп, и выносим их за пределы фрейма.
• Пишем текст, который будет закрашиваться.

Шаг 3

• Дублируем слой с текстом (Ctrl + D).
• На копии слоя меняем цвет текста на более тусклый.
• Слой с закрашенным текстом переносим на передний план и оборачиваем его во фрейм (Ctrl + Alt + G).
• Поставьте галочку Clip content в меню справа.

Шаг 4

• Уменьшаем ширину нашего фрейма.
• Дублируем фрейм.
• На копии фрейма разворачиваем наш фрейм с закрашенным текстом, чтобы он полностью закрывал текст под ним.
• Сдвигаем края фрейма с закрашенным текстом так, чтобы он не перекрывал текст под ним.

Шаг 5

• Дублируем фрейм.
• На копии фрейма разворачиваем наш фрейм с закрашенным текстом, чтобы он полностью закрывал текст под ним.

Шаг 6

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

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

Шаг 7

• Дублируем фрейм.
• Выделяем фрейм с текстом и текст, который не закрашен, уменьшаем (K) и перемещаем в верхнюю часть страницы.
• Достаём наши элементы дизайна во фрейм.

Шаг 8

Создаём анимацию между нашими фреймами, со следующими настройками:

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

Готово!

Необычная анимация для твоих будущих проектов готова. Экспериментируйте со шрифтами, размером и цветом, а также настройками этой анимации для создания интересных прелоадеров для своих проектов.