Фоновые градиенты – тренд, который пришел в веб-дизайн и графический дизайн в 2021 г. и остается актуальным до сих пор. Статичный градиент уже “приелся” пользователям, а анимированным можно добиться эффекта “вау” на сайте.
В данной статье я расскажу, как создать анимированный градиент в Figma.
Шаг первый. Область под градиент
Создаем фрейм под наш градиент. Ставим галочку в пункт “Clip content”, чтобы объекты не выходили за пределы области.
Также сделаем ещё две вещи:
- ставим скругление углов на 30°;
- выбираем цвет фоновой заливки #232324.
Шаг второй. Создаем случайные формы
Нажимаем “P” для того, чтобы нарисовать контур фигуры, затем “Shift+X”, чтобы задать цвет заливки. После кликаем кнопку “Done”. Таким же образом создаём ещё две формы.
Шаг третий. Добавляем размытие
Сгруппируем недавно созданные формы и задаём им параметр “Layer Blur”. Со значением можно поиграться самостоятельно, я же поставил его на 135.
Шаг четвертый. Добавляем шум
Нажимаем комбинацию клавиш “Shift+I” и в поиске ищем плагин под названием Noise. Создаём шум, размер которого будет равен размеру вашего фрейма. Настройки плагина выставляются на глаз.
После того как шум был добавлен, меняем параметр наложения на “Soft Light” и регулируем параметр прозрачности. Я установил его на значении в 50%.
Шаг пятый. Дублирование
Продублируем созданный фрейм два раза. После чего в каждой новой копии изменим параметры фигур, то есть позицию, размер, форму и т.д.
Шаг шестой. Параметры анимации
Перейдём во вкладку “Prototype” и добавим анимации со следующими свойствами, показанными ниже:
Шаг седьмой. Цикл анимации
Цикл должен получится следующим Frame1 -> Frame2-> Frame3> Frame1
Шаг восьмой. Готовый результат
Если всё сделано правильно, то должно получится примерно следующее:
