Как сделать прозрачную бегущую строку в Figma

Шаг 1

• Создаём текстовое поле (горячая клавиша T) и пишем фразу будущей бегущей строки из 4-х слов. Первое и последнее слово должно повторяться.
• Между словами нажимаем пробел (Space) 4 раза.

Шаг 2

• Добавляем 3 фотографии. Для добавления фотографий можно воспользоваться плагином Unsplash.
• Дублируем одну из фотографий, которая должна быть первой. Располагаем фотографии друг под другом «стопочкой», первая и последняя фотографии должны быть одинаковыми.
• Сдвигаем верхнее фото влево, рядом с остальными.

Шаг 3

• Группируем все наши фотографии (Ctrl+G).
• Располагаем группу с фотографиями над текстом, выделяем группу и текст, и используем маску (Ctrl+Alt+M).
• Выделяем группу с маской и оборачиваем её во фрейм (Ctrl+Alt+G).
• Поставьте галочку Clip content в меню справа.

Шаг 4

• Подгоняем размеры нашего фрейма под размеры первой фотографии, должно остаться одно слово строки и одна фотография, всё остальное должно быть за пределами фрейма.
• В меню Fill добавляем цвет нашему фрейму.

Шаг 5

• Выбираем наш фрейм и создаём из него компонент (Ctrl+Alt+K).
• Создаём вариант нашего компонента при помощи кнопки в верхнем меню компонентов (Add Variant).
• В варианте сдвигаем фотографию влево за пределы фрейма. Достаём следующую фотографию из нашей «стопочки» справа.
• Также сдвигаем строку текста на следующее слово. И меняем цвет у всего фрейма.

Шаг 6

• Дублируем наш вариант (Ctrl+D).
• Сдвигаем фотографию влево, достаём следующую фотографию и двигаем строку текста на следующее слово.
• Меняем цвет фрейма.

Шаг 7

• Связываем фреймы в следующем порядке: 1–2–3–4.

Настройки анимации:


• After Delay — 1 ms;
• Smart animate;
• Linear — 3000ms.

Шаг 8

• Связываем фреймы в следующем порядке: 4–1.

Настройки анимации:


• After Delay — 1 ms;
• Instant.

Готово!

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