Работа с масками
Как с помощью Figma мы сможем увеличить
функционал анимации.
Выжимка
Домашка
Сделайте маску из текста
Используйте все инструменты, что были в данном уроке. Сделайте свою первую маску и сохраните ее в формате SVG.

Если у вас все еще нет Figma, то быстрее регистрируйтесь и скачивайте ее.
Она полностью бесплатна.
В форме ниже отправьте ссылку на ваш инстаграм и ссылку на проект в Figma. После чего вы смело можете перейти к следующему уроку :)
Куда присылать?
Как из текста сделать кривые
Если мы хотим вырезать маску из текста, то нам необходимо перевести этот текст в кривые, т.е. в векторное изображение.

В Figma это делается очень просто:
Ctrl + E
Мы выделяем текст, нажимаем это сочетание клавиш и все. Наш текст превращается в SVG.
Как сделать свою маску
1. Добавляем прямоугольник
2. Поверх него ставим элемент, который ходим в нем вырезать
3. Выделяем эти 2 объекта и в верхнем меню объединения нажимаем SUBTRACT SELECTION

После этого красим маску в нужный нам цвет и сохраняем как SVG.
Как добавить пустое место в маске
Иногда нам требуется, чтобы какой-то элемент двигался плавно, допустим по кругу. Для этого нам поможет инструмент FRAME.
Frame
Добавляем бесцветный frame, делаем его нужной формы, после чего добавляем туда наш анимированный объект.

Анимируем нужным нам образом, а пример вы можете наблюдать ниже.