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

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

Figma

Анимация

Никита Пырх

Автор публикации

04.02.2024

1 минута на чтение

Шаг 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.

Готово!

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