Mesh gradient effect animated in figma

hi everybody in this video I will show you how to create an animated mesh gradient effect in figma before that I have prepared several color palettes that we will later use to create the gradient background you can use the same color as mine or make your own first we create a rectangle here which will be used as the main background and choose a slightly darker background color okay after that we can use the blobs plugin to create a random pattern that we will use as the gradient color pattern later this time I only added four patterns arrange the patterns a little randomly to make the arrangement effect more natural then we add color to the shape that we have made select all shapes and make a group choose blur effect 400 or more then select the rectangle that we made as the background and also the group shape then select use mask duplicate the background and select on mask and we can give it a name which is shape then give group name become gradient next we will make it a component and we will add some variations here which we will later use for the animation click this plus icon to create a new variation from the second variation onwards change the position of the shape with a different position do the same thing okay now it's done next we will create a frame to try the animation that we have made I will make the frame size the same as the radiation frame then you just drag like into the frame if you can't find it you can choose assets like this okay all our preparations are complete now let's preview look at her movement it's so beautiful and soft okay now let's try to implement it into a real application design this is the design I have made before you can try using your own design I'm just trying to show you how the final result of this mesh gradient animation blend wow look at that so pretty thanks for watching see you in the next video

Channel: Design with arifin

Views: 47,320

Keywords: figma tutorial, mesh gradients, animated mesh gradients, smart animate, how to create animated mesh gradient backgrounds in figma, how to create mesh gradients in figma, creating mesh gradient backgrounds, how to create aurora gradient backgrounds, multi gradient backgrounds, colorful gradient backgrounds, aurora like backgrounds in figma, animating gradient backgrounds, animated gradients using interactive components, landing page, figma, web design, prototype, designwitharifin

Id: jl4d6hJCovk

Length: 6min 51sec (411 seconds)

Published: Sun Aug 07 2022