Design Animated Logo Splash Screen in Figma

let's create this animated logo splash screen in figma make sure to subscribe for more awesome content like this and if you enjoyed the video give it a thumbs up let's begin let's start by adding a mobile frame and give it our dark green color we have our logo here let's break it inside the frame and let's pull some tides to see the center of the frame now let's move this icon to the center and scale it down a little press o to select the ellipse tool and draw a flat circle like this one put it right in the center like this select the circle and press command D or Ctrl D on Windows to duplicate the circle now let's draw a rectangle and adjust it like this perfect now select this rectangle and one Circle and make it a union selection like this bring this Union below the second Circle select both layers and right click and choose use as mask now select the circle from the Mast group and give it a darker green shade [Music] now very important part put the logo layer inside the Mast group on the top will achieve this effect now let's move on bring the circle down a little like this so this becomes not visible duplicate this Frame and from the duplicated frame select the logo like this and bring it above so it becomes visible I'm using keyboard arrow keys to move it press K to select the scale tool and scale the logo a bit now by scale tool selected click on the circle and scale it down from bottom to zero PX just like this duplicate this Frame again select the logo and bring it down to the center and let's scale it down a bit again duplicate the frame select the logo and move it to the left like this we have the company name text here let's bring it inside this Frame but let's make it a frame first pull it inside the frame now just like this and make them both centered if you see this cutting issue it means it is going outside the mask that we created so we can just select this Union mask and resize it [Music] just like this from both sides now select the text frame that we created by holding the command key or Ctrl key on Windows crop the frame like this [Music] and make sure to clip the content now let's duplicate this Frame to make our last frame select the cropped text frame hold command key or Ctrl key on Windows and resize it so that it becomes visible let's resize this Union mask because this might cut off our logo animation as well oops sorry wrong where Union mask and resize it like this we are done now go to prototype to add animation add interaction from frame 1 to frame 2. set it to after delay of 500 MS animation will be smart animate and the transition will be custom basier and these points here adjust them by dragging it so it looks like an s and give it 1500 milliseconds and second interaction from Frame 2 to frame 3 again after delay but this time only one millisecond and transition will be custom spring put the time something like 1750 stiffness will be 100 and damping will be seven leave the mass one now add interaction from third frame to the fourth frame again after delay of 1 ms but the transition will be quick with 800 milliseconds and finally last interaction from fourth frame to the last frame after the delay of 1 ms but for this transition will be gentle with 1200 MS awesome let's preview and there you go we have successfully created animated logo splash screen in just 6 minutes you can add these kinds of animations to your portfolio to impress your viewers if you enjoyed the video please give it a thumbs up and for more tips and tricks about figma subscribe to my channel thank you for watching see you in the next video

Channel: Average Design Dude

Views: 30,687

Keywords: Figma, FIgma Animation, Logo Animation Figma, Splash Screen in Figma, Animated Logo Splash Screen, Design Animated Splash screen figma, learn figma hindi, Figma animations in hindi, prototype, animation in figma, interaction in figma, How to, Learn Figma, Figma Tutorial, Figma Interactions, Web design, Ui, ui design, ui ux, learn ui design, smart animate figma, Figma Smart Animation, Transitions in figma, figma transition animation, How to create Logo animation in figma

Id: O6CgPB1CIr0

Length: 6min 19sec (379 seconds)

Published: Fri May 26 2023