Фоновые градиенты – тренд, который пришел в веб-дизайн и графический дизайн в 2021 г. и остается актуальным до сих пор. В данной статье я покажу, как создать анимированный градиент в Figma.
Шаг первый. Создаем фрейм
Создаем фрейм под наш градиент, размер выбирайте по желанию. Ставим галочку в пункт “Clip content”, чтобы объекты не выходили за пределы области.
![1.jpg 1.jpg](/upload/medialibrary/776/7k6lw37wlw1aakuah76vlk83axse6hkv/1.jpg)
Далее задайте фоновый цвет, созданному фрейму.
![2.jpg 2.jpg](/upload/medialibrary/534/ahovap4xul5n4rjy216eq30boccvph02/2.jpg)
Шаг второй. Рисуем формы
Можно нарисовать как произвольные формы, так и геометрически правильные формы (круг, квадрат, треугольник и т.п.).
![3.jpg 3.jpg](/upload/medialibrary/cb3/oguglmfbfspv2sragmmanudkm7xi606a/3.jpg)
Далее задаём им цвета
![4.jpg 4.jpg](/upload/medialibrary/eee/8e69n771r9vjo5119xerd31keckcu8dv/4.jpg)
Шаг третий. Добавляем размытие и эффекты наложения
Размываем наши фигуры через "Effects"->"Layer Blur", меняем режимы наложения, чтобы фон смотрелся интересней.
![5.jpg 5.jpg](/upload/medialibrary/963/yjdjn6iro9mkhizsevqhdo5qzr0fv47j/5.jpg)
Шаг четвертый. Дублируем наш фрейм
Создаем копии нашего фрема и в них перемещаем слои, чтобы в будущем создать эффект анимации. В целом 4-ех копий будет достаточно, конечно можно сделать и больше.
![6.jpg 6.jpg](/upload/medialibrary/96f/ybxtgm1wxa4v60gqqi9fm0bvesnsg773/6.jpg)
Шаг пятый. Анимация
Открываем вкладку "Prototype" и добавляем связи:
- от 1 к 2;
- от 2 к 3;
- от 3 к 4;
- от 4 к 1.
Параметры анимации следующие "After delay" - "1ms". Тип "Smart Animate", "Ease out", "4000ms"
![7.jpg 7.jpg](/upload/medialibrary/3e6/mxtsc3n9xtt8zzymatleoy8mbifz7wgt/7.jpg)