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

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

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

• Сделайте текстовый слой и напишите на нём что-нибудь. Вместо текста может быть что угодно — например, фигура или фрейм.
• Нажмите по слою правой кнопкой мыши и выберите Frame selection.
• На верхней панели инструментов нажмите , чтобы сделать из фрейма с текстом компонент.
• Выделите текст внутри компонента и в правой панели настроек в блоке Fill добавьте на него линейный градиент. Чтобы не тратить на это много времени, советуем использовать плагин Webgradients.
• В верхней панели нажмите , чтобы сделать вариант вашего компонента.
• В варианте поменяйте градиент — первый цвет перенесите в конец, а на его месте добавьте другой.
• Сделайте ещё несколько вариантов текста с разными градиентами. Четырёх будет достаточно, но можно и больше.
  

Создание прототипа

• Выделите первый вариант компонента и на правой панели настроек откройте Prototype. Затем наведите курсор на компонент, зажмите появившийся кружок и перетащите его на следующий слой, чтобы появилась стрелка.
• В появившемся окне в блоке Interaction details вместо On click укажите After delay и поменяйте задержку на 1 ms. В блоке Animation вместо Instant укажите Smart animation и поменяйте продолжительность на 800 ms.
• Сделайте то же самое с остальными вариантами текста. Последний вариант должен быть связан с самым первым.
• Добавьте на макет фрейм, залейте его чёрным и добавьте в него копию любого варианта текста.
• Нажмите кнопку Play в верхнем левом углу и проверьте результат.

Результат:

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

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