Фоновые градиенты – тренд, который пришел в веб-дизайн и графический дизайн в 2021 г. и остается актуальным до сих пор.
В данной статье я покажу, как создать анимированный градиент в Figma.
Шаг первый. Создаем фрейм
Создаем фрейм под наш градиент, размер выбирайте по желанию. Ставим галочку в пункт “Clip content”, чтобы объекты не выходили за пределы области.
Далее задайте фоновый цвет, созданному фрейму.
Шаг второй. Рисуем формы
Можно нарисовать как произвольные формы, так и геометрически правильные формы (круг, квадрат, треугольник и т.п.)
Далее задаём им цвета
Шаг третий. Добавляем размытие и эффекты наложения
Размываем наши фигуры через "Effects"->"Layer Blur", меняем режимы наложения, чтобы фон смотрелся интересней.
Шаг четвертый. Дублируем наш фрейм
Создаем копии нашего фрема и в них перемещаем слои, чтобы в будущем создать эффект анимации. В целом 4-ех копий будет достаточно, конечно можно сделать и больше.
Шаг пятый. Анимация
Открываем вкладку "Prototype" и добавляем связи:
- от 1 к 2;
- от 2 к 3;
- от 3 к 4;
- от 4 к 1.
Параметры анимации следующие "After delay" - "1ms". Тип "Smart Animate", "Ease out", "4000ms".
Шаг шестой. Смотрим результат
Продублируем созданный фрейм два раза. После чего в каждой новой копии изменим параметры фигур, то есть позицию, размер, форму и т.д.
Автор статьи: Данил Долганов
Читайте также:
Быстрая загрузка сайта: создаём скелетный экран
Видеокарта для Blender 3D. Сравнение. Тесты. Графики
СЕКРЕТЫ WEB-ДИЗАЙНЕРА: Подборка 5-и полезных, бесплатных плагинов для Figma