How to Create Chat Interactions with Prototype on Figma

hi guys so today I'm going to be teaching you how I created this chat interaction using the Prototype feature on figma so stay tuned for that so guys this is the first screen right and what you want to do now is that you're going to take these two down you're just going to take it down while still inside the frame so this is what I'm going to do because it's an interaction so there has to be a delay before any of the charts pops up so you're going to take it down have to make sure that it's actually like still on this screen if you look very closely you will see that it's actually obvious that something is there so what we're going to do is um just highlight your frame the chat frame and reduce your pass through to 0% then you do same for the second one reduce it to 0% all you need to do is just duplicate command D duplicate this second screen so right now we really have to be realistic about this right cuz just imagine a real life chart the two charts don't pop up so what we're going to do on this second screen is that we're going to bring up the first chart so um which is this one so we're just going to bring it up and make it really visible I'm not going to use this whole Space right right now because like I said this is an interaction and not like um aesthetic screen and you're going to find out why I'm not going to exhaust this screen or like put this all up so just drag it up a little I think this is fine right then you have to duplicate your screen again command d where you want to bring up the second one which is this on this same screen you're just going to add your auto suggestion texts so I'm just going to paste them and then bring it here so while is inside the screen you have to like make it invisible you have to make both of them them invisible by taking it down and this is what is going to give us that effect of the auto suggestion text popping up so just take it down you're going to duplicate the next screen so that the first Auto suggestion text will come up make it visible so that on the next screen you're going to make the second Auto suggestion text visible as well duplicate again text pop up right duplicate your screen again for this screen I'm just going to take this one out then then this is where what I explained about like leaving this negative um space comes in because you're trying to like click on and fine and it's obviously going to like push the other text up to have to go to this place so you're going to just um take this thing up just reposition it right to this place duplicate another screen so what I'm just going to do is to paste and replace just to maintain that same position so I just did paste to replace so it's now time to prototype our screens I'm going to change on top going to the next screen to after delay and I'm using 1,500 and we're going to use Smart animate of eing an out um I'm just going to put it to 500 going to put the after delay after delay as well so that the second screen can actually like pop up the same thing but I'm just going to reduce this to 700 this screen use after delay of 500 after delay going to use 600 here for this one so you're just going to take this to this on top Navigator I'm just going to reduce this to 400 milliseconds and then on this same screen I'm just going to take the screen itself you can zoom in to be sure of where your um where you're directing it to instant remember I said everything is happening on the same screen and this is obviously transforming from here to here so you need to maintain that it's same like you need to prototype it in such a way that is on same screen like everything is happening on same screen like what the users see but this is you behind the scene what you're doing exactly so you take this to this since this is here already all we need is for this for this particular one to change to this so the only thing you need to do here is just take this and give it an after delay of 1 m/ second just like it never happened right like you're trying to prototype this in such a way that it happened on the same screen you get and another way you can also do it is using components probably when you're working like when you're working on a very complex project right but if you're just like having a tutorial or you're just exploring and everything you can just do it this way now that we're done with the Prototype let's preview our interaction [Music] so guys we've come to the end of this video and I really hope that you learned something today and I've just shown you how to create a chat interaction using the Prototype feature on figma so if you have questions you can let me know in the comment section and also if there's something else you would like me to teach or to make a video of or a tutorial on you could just let me know in the comment section

Channel: Nwajuo Sophia

Views: 3,050

Keywords: #figma, #prototype, #chatanimation

Id: FT0G7KvA92U

Length: 8min 39sec (519 seconds)

Published: Tue Oct 24 2023