3D Animations in Figma using smart animate

[Music] hi everyone welcome back in this video we are going to see how to create 3D animations in pigma very easily yes it is easy if you consider these three simple steps of course you'll get a great outcome let's not waste the time and start getting into the [Music] video [Music] he [Music] three important simple things the first one is images let's start with a brief so I'm going to create a landing page for Sparrow's Pizza they have various types of pizza but few of them are their classic ones so we are going to highlight these pizzas in 3D animations and pigma so uh so that it will be highlighted a bit in that side as well so that's what we're going to do now let's get started so for that I have collected few pizza images from the website and few from few from the outside and which is related to the pizzas like whatever cheese pepperoni uh Supreme vegetarian meat lovers White and the next is I've collected few more images to give it in the background which is not going to be so visible but still we need it so I've collected them and I have chosen few colors so colors are based on the pizzas so whatever M let's say cheese pizza is aell low and meat pizza is in this vegetarian pizza is this supreme pizza is this and this is pepperoni pizzas is in Black so it depends on white piz in white and gray so yeah that's how I have selected the colors and uh I have also made out the basic layout that we need for animation so yeah let's get started so I told you we need three important things to start with it number one is images images are very much important when it comes to things so that's what we have collect already so background is bit noisy so I'm going to remove them using the background plugin removing background plugin that is uh Magic cut uh remove background so you just need to select your magic cut remove background and automatically it removes it then you say okay and your background is gone so yeah that's how I'm going to remove it forever [Music] time if you see we have all real pizzas here it looks like 3D images we just need to add the Shadows to it now let's do the same for all [Music] this okay now I'm going to create each sizes that is uh each slices into a different pizzas so let's try this out [Music] first [Music] he [Music] he [Music] he [Music] he [Music] a [Music] ah hey [Music] he [Music] a [Music] now what I'm going to do is place okay so this is my pizza if I select my flavor so's say if I'm this pizza cheese pizza then the cheese pizza will be highlighted here so the colors one I'm going to change it [Music] now the background color I'm going to change to this and these two colors as this okay now in the circle I'm going to have all this [Music] pizzas equal portion then [Music] only so in the size [Music] 480 [Music] he [Music] he [Music] and the second one is colors and shadows [Music] he [Music] he [Music] he [Music] he [Music] he [Music] he [Music] okay now it's done we need to this give it as a [Music] background let's take few cheeses and add it to the [Music] background [Music] ah [Music] he [Music] and the third one is interactions and timings yes it is very much important to consider while prototyping what kind of animations that you're going to give so I have used here the smart animation and also um the ye out option in there so yeah let's see what's there interactions good it's very important to know timing and the type of interaction that you're going to give you're going to give the smart animator so let me make sure that everything is in frame every images are inside the frame and then only you can be able to connect so I'm going to connect this sorry this one this is this piz right so I'm going to connect this with the screen so this is SM animate e out 600 milliseconds and same repeat the process for the rest of the screen as well so this is this same here and for this is this and for this this and for this with this and one this repeat the [Music] process [Music] a [Music] he [Music] a [Music] he [Music] [Music] he [Music] yes that's all thank you so much for watching I think this video will be helpful for you to learn and explore more about 3D designs and figma and I'll meet you all in the next video till then [Music] bye-bye [Music] n

Channel: Tharani Subramanian

Views: 10,155

Keywords: What is UX, How to do UX Case study, UX Case Study, ux design, UI Design Tutorial, UX Design Tutorial, ui design, ux design process steps, ux design process interview, ux ui design tutorial, ux ui designer, learn ui ux design, learn ui ux design online free, Learn ux ui in tamil, ux ui in tamil, User Experience Design, What Does A UX Designer Do, Secondary Research, User research, ui ux design course, ui ux design, ui ux design tutorial in tamil, ui ux design tamil

Id: zNpZF9273ho

Length: 20min 37sec (1237 seconds)

Published: Tue Nov 28 2023