Как в Figma сделать анимированный глитч

Коротко и ясно рассказываем, как быстро добиться интересного эффекта для вашего проекта.

Иллюстрация: Оля Ежак для Skillbox Media

Вячеслав Лазарев

Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

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

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

Подготовка текста

Создайте любой текстовый слой, превратите его в компонент и сделайте копию этого компонента — все дальнейшие действия вы будете делать именно с ней.
На копию текстового компонента добавьте узкий прямоугольник и объедините получившуюся конструкцию в группу. Убедитесь, что на панели слоёв прямоугольник находится ниже текстового слоя.
Выделите прямоугольник и нажмите , чтобы сделать слой-маску. Сделайте копию получившейся группы и переместите слой-маску прямоугольника так, чтобы он точно встал под предыдущим. Так нужно сделать четыре раза, чтобы всего у вас получилось пять слоёв.
Выделите все получившиеся группы и для удобства сгруппируйте их — назовите получившуюся конструкцию Black.
Сделайте копию группы Black и переименуйте в Red. Выделите её и в боковой панели настроек в блоке Selection color вместо чёрного цвета укажите #FF0000. Затем сделайте ещё одну копию Black — переименуйте её в Blue и вместо чёрного цвета укажите 00FFFF.
В итоге у вас должно получиться три новых группы — Black, Red и Blue. Все они должны стоять на одном и том же месте. Выделите их все и нажмите .

Создание анимации

В компоненте сместите Red немного влево и Blue немного вправо.
Сделайте вариант компонента и внутри него сместите группы, в которых вы делали слой-маски. Важно сдвигать именно всю группу целиком — вместе с текстом и прямоугольником. Смещать можно куда угодно — вверх, вниз, влево или вправо.
Добавьте ещё один вариант и сделайте с группами то же самое — повторяйте это, пока у вас не будет 5–6 вариантов с разным смещением слоёв.
Выделите первый вариант текста и на правой панели настроек откройте Prototype. Затем наведите курсор на компонент, зажмите появившийся кружок и перетащите его на следующий слой — второй вариант текста. Должна появиться стрелка.
В появившемся окне в блоке Animation вместо On click укажите After delay и поменяйте продолжительность на 65 ms.
Сделайте то же самое с остальными вариантами — анимация у всех должна быть одинаковой. В итоге у вас должна появиться такая зацикленная связь: 1→2→3→4→5→1.
Добавьте на макет фрейм и скопируйте на него первый вариант текста. Нажмите кнопку Play в верхнем левом углу и проверьте результат.