Figma chat bubble animation tutorial using smart animate.

hello everyone welcome to the very first video of this channel my name is rajat and today we'll be looking at figma's smart animate feature as you can see we'll be going through the process of animating the chat bubble for a prototype so without wasting for the time let's dive deep into it [Music] first i'll quickly grab a frame for iphone 11 pro and let's rename it and then i'll make it a bit dark yeah that sounds nice now let's grab a rectangle for the type box adjusting it a little putting in this stroke and making it lighter color removing the fill yep that sounds looks great now i'll grab the icon from the plugin iconify which i have installed and i have a send button [Music] just let's just pick the first one here and grab it adjusting the size and aligning it to the middle now let's change the color of the icon here bit more lighter to match the type box now let's just round the corners of the tie box to have it a bit more circular yeah great time for messages bubble so i've made these into components and they all are made with auto layout if i can just grab two of them now they are made with auto layout so if i start typing in them they will move according to the text size so that's a brilliant feature from figma if you want to learn more about it then let me know in the comment section now i'll put everything into the frame and i'll tell you why just make sure it says click clip content on here and then i'll quickly grab those frame and slide them down so they are not in the view i'll duplicate the frame go to the second frame first message and slide it up over here now i will duplicate the frame and do the again do again the same thing grab the second message and drag it up a little yeah sounds great now let's go back to my components first let's just put them a little up so it has a nice sliding effect to it now let's just grab the quick suggestions button here also this is made with auto layout grabbing the second button here and changing the text of it can be better yeah so just aligning them so it looks nice not not really focusing much on the alignment here but still yep looks nice now let's just change the color real quickly bit on the yellowish side so it would be nice on the black background yeah now again i'll quickly just slide them away out of the frame so i have the effect of the quick suggestions coming in now go back again repeat the process pulling up the first quick suggestions up and yeah and these message stays right there and then i would drag the second one after duplicating the frame yeah perfect now now let's just test the prototype functionality how it looks like in the actual chat prototype now what i'll do is i'll do after delay smart animate 800 milliseconds is in and out and then i'll repeat the process for the other frames as well after delay yeah 400 milliseconds for the chat bubble connecting all the frames checking the connections in the same process after delay 400 milliseconds so i have to repeat the whole process for every frame for this to work and for this i would have 200 milliseconds because of the chat quick suggestions button now let's just select the prototype and flow and let's just go back to the flow itself so as you can see the messages are coming really nicely the whole flow is working sounds about good now let's just continue so the next step would be if i tap one of the quick suggestions button then the message would come from the user side so i'll quickly slide both of the message up and then i'm good towards the right section now this we can delete and then i'll quickly change this button to the user button again i have made all of this into components and you can select whichever component you feel like and you can replace so this sounds about right now just quickly go back and what i want to do is so when the message slides over there then it changes it its form rather than before itself yeah that looks good now i will quickly connect them and here i would not have [Music] 800 milliseconds but after one millisecond so it just appears to be instant and i would have it as smart not smart animate feature but instant and checking all the connections everything is fine so for this i will do again smart animate 500 milliseconds sounds good now let's go back to the prototype and check everything looks great yeah so that's it guys i hope you learned something from it and yeah if you want to learn anything else then just let me know in the comment section

Channel: Rajat Girhotra

Views: 16,392

Keywords:

Id: f3yQ9nqOZOo

Length: 8min 45sec (525 seconds)

Published: Fri Jul 30 2021