Как в 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 в верхнем левом углу и проверьте результат.

Результат:

В самом начале вы сделали фрейм с текстом — если поменять в нём надпись, то она автоматически появится во всех вариантах с эффектом.

Самоучитель по Figma

Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.