How to Prototype The Bottom Navigation Bar #Prototyping

hello folks Marcus again bringing to you one more tutorial this time we are going to learn how to create animated um navigation uh bar so come with me and see we are going to learn how to make those interactions and also the micro interactions the animations that each icon has so for example here we have the um alarm selected one and here this is the clock one and going ahead the stopwatch and finally the last one is going to be the timer selected but most probably you didn't realize the interaction between them so come with me again and I'm gonna go and show you for example here um this alarm it has a little animation a little difference between there for example here this little bell this small part over here it's like connected in here it's separate in here in case of these world clock here these pointers they are in different position and here I change it then here the same thing the stopwatch which has a different format let's say this way and finally this timer here here we can see this um I don't remember in English the right way to call that but it's a a kind of um clock let's say this way glass clock something like this and then the the sand is over here it's put here and then it goes like dripping not dripping but it goes down down and then uh the sand will be here in this uh bottom part so let's see in pretzi I am going to run this prototype so let me show my UI now I can select here I don't know if you know but figma it got some um some differences some updates since they config so I'm gonna I'm going to play this prototype and then we can hear uh we can see here so come with me and see keep attention in this one alarm when I go to the uh second icon second screen we can see these uh pointers they are changed and also these alarm one so see we go back and forth back and forth and also this a little indicator this little separator this little divider this little smaller bar and going ahead the stopwatch as well and the timer too so all of them they have Micro interactions so I consider interactions the way to go to other part of the application and of course that we have jeeper um explanation but here just for a matter of understanding interaction is when I click and I interact with the interface but Micro interactions micro animations it is when we have this little Pleasant moments just like this okay and now we are going to learn how to create them and also here we have just this uh subtitle over here so Farm just to identify where we are but we don't have content here yet but in the future who knows but the matter of this tutorial is just to show you how to create those animations and then we can create your own projects okay so let's do that together from the very beginning uh so first things first let me jump back to things we did before so we can speed up our process I'm quite sure that you remember I'm sorry that you remember this last tutorial I'm quite sure about that because I checked here all the tutorials that I do here on this channel I have this check just to remember what I did before since it has been I think almost two weeks that I I haven't have time to to record tutorials so and this one here uh it has this timer just sure remember things that I'm working on so we did this uh prototyping switch buttons I don't know if you did that but if you didn't I really like to recommend you so you can see what we did before like switch on and switch up okay pretty cool and also the rest if you didn't see what I have done so far I recommend you to watch uh this playlist name it prototyping on YouTube So yeah so we are going to copy um some of those screens over here let me just see let me switch to this prototype tab I don't want to have any interaction but I think that I can copy this one so Ctrl C um jumping to this page in your case I recommend you to create a new one I will place it here it's going to be enough that's right I will switch back to design tab I want to delete this component because I don't need it here I'm going to delete those two components as well and then let me see what I have here this alarm one let me try to find if I have some text that I can use so I don't need to um type I can copy this title from here Ctrl C I come back here so I can select the frame control v i can align like this I can measure like I I don't like to have broken numbers like this whenever you remove so 24 27 let me go with 24 here too then I will increase its size the width then I will go like minus 24 so I can have this right uh spacing these words is going to be alarmed for the uh first screen I'm gonna go with uh Poppins medium 16 it's going to be pretty well so the first part we already have now what we can do is play with this little indicator so here I didn't name it correctly but in our case we are going to do this so there are many ways to have this indicator I'm going to call indicator [Applause] I'm showing you just one way of doing this so in the future you can do the way you want you to cover your own way you can create new ones you can follow what I do so this first screen I'm gonna call menu alarm just for a matter of facilitate our way of locating things I'm gonna press Ctrl d so we can duplicate clock I'm copying and pasting in my case because I did that before I have this um reference you don't so you need to type [Music] and now we are going to have the last screen Ctrl dgd a b c d okay timer is going to be the last one and also it's important to change his subtitle so this one it is timer now we have stopwatch we also have world clock in the first one oops I'm sorry the first one is going to be alarmed just like this so we have the the base is structure so now it's time to work on the icons so I can press and hold out so I can move like this making a copy and then we will click twice here just once actually I click once press and hold alt so I can make a copy like this so I got this first icon right then I will duplicate Ctrl D so I will have exactly the same thing this one here will click twice then twice as you can see I am in the vector um deep in the vector element I will zoom in I will click and drag like this and then I will move not possible yet I will cut Ctrl X now I will paste Ctrl V didn't work right yes we we got to figure out the best way to do that so let's see okay we got this Vector let me try to move like this selecting and moving no not working let me try to remember what I did let's see how you press P for pin then I will as you can see I can keep moving and having things like this let me try to connect these two points press ask click twice I will try to cut again Ctrl X I will click out Ctrl v c Now it worked so I have two separate parts okay now I will move like this those separate parts and here I can let it just like this I can also delete ask or click twice out Ctrl V so see we got this part here but I don't want to have this little uh element here so Ctrl X I want to have inside of this bell inside of this Vector so I can go to the layer panel select the vector1 Ctrl V here inside of the vector so we have this possibility of moving things around so when I click out this is the same elements you can drag around and when I click twice I have this freedom of moving things because even they are separate but they are part of the same thing okay okay the other thing I did we have two different states this one is like 32 opacity and this one 100 opacity okay so let's go this way I select not only this Bell but this um Auto layout and then I change this layer opacity very true so I have all that I need for this icon and the logic it can be applied to the other icons too so I'm gonna play this way and then we can change we have the freedom to change the way we want I select this first one component then the second one component select both of them combine as variant so I have this icon over here I can come here click twice and then I will name things properly the nomenclature is important so icon alarm go now I want to have a switch on off actually off and on so property I'm gonna call let's see exactly what I did here and selected on off okay so I'm gonna click twice here I'm gonna type select like that that's like that so this left hand is going to be called off you can go capital letter or not and this one on so we got on and off and now I click twice in whatever one press and hold alt drag out so I have this instance this one is the master component this one here is the instance and I can switch on off on off and as you can see this little element is being modified see exactly the way that we did in the logic key can be applied to all the icons we can do little changes and we are going to do them right now so the alarm is done can delete this instance now I will drag the world clock one then I press Ctrl d and I come here and I can make the change that I want clicking twice twice twice twice this let's see if I can how I can move things it's a little tricky because see we do this way but the shape it it gets not the way that we want so what we can do let's think a little well see come with me I will um first then I will select here press and hold shift so I can select like these and then like this so now I have all those ink or selected I can cut click twice out paste and as you can see it's not working properly that happens sometimes so I will just leave like this and I will draw little elements so I will make something like this let me zoom in a little to see this shape then I will press P for pin oops I I can't be so closer so something like these in these yes we don't need to go like exactly the same way now we need to increase this thickness something like this now I open it here I want to have this round one and this one is going to be round two so the two ends will be round then I can come here and make this part a little round so now yeah I have what I need so this first position to be the same and then it's easier to for example I select this shape press hit enter and then I have the freedom to change the way that that I want so I can do many kinds of adjustments yeah you decide the position that you want to have right now we need to to bring things inside we can apply some color just to see what we are doing in the limitations that we have and shape and so yeah so I'm gonna go with this one okay it has to be white I will transform it into a not line but I want to press shift Ctrl o all right now I don't have this line anymore I have a a shape is true so I got my pointers but I still have the freedom so if I need to change something I can click twice and I can enter the edit mode and something okay cool now I have to place it inside so like I will cut like I showed you before I select this clock select vector and it paste in and as you can see we just have our pointers just like this if that's needed I can like I showed you before you can select we can do adjustments you can work really um carefully to get things done the way that they should be normally I like to say that we are doing this tutorial we don't have a lot of time because the matter here is to speed up so uh it's possible to enjoy more the time that we have together but in your case after you finish all the things that I'm showing you you have time to do tricks here tweaks there and then get things done the best way Okay cool so we got the next one this word clock now we need to change we can hide this color not even remove but just hide itself and then this pass through with storage we can we should go with 100 percent we can select both of them make sure to select all the elements and then we can click here open this drop down and rather than creating one by one we can go here and then just to select the multiple components so multiple multiple components and now we did the truth then we select and we combine as variance so exactly the way we did with the first one let's increase just a little bit just for a matter of organization and we can oops can move things like these it's not necessary but yeah all right so now we need to name properly so let's go with forward slash in world [Music] clock all right and then we can um already replace because here those icons they aren't components they are just elements so I will press and hold out then I will drag and drop like this and as you can see it's purple and I can switch in this case I will drag out so see it's not a component it's just Element Auto layout with things inside so I don't want to use this anymore so I can delete and I will just move and place it here and remove this one now if I select just once I can change like this in we can see our animation working like this okay and the world clock as well can move in remove this one and I can test what I did but see we didn't finish yet we need to to work a little more so property we called here selected so we are going to go exactly the same select that and we got off and on so off on and then when we come here to the instance we can change on off as you can see it's not well working so we can come back to the master component we can select all the elements and move them a little and now we can jump back to the instance and tests and it's a little better now can work even more but but like I told you um you alone in your room in your corner offices whatever you have a lot of time to get things done to do whatever you want you need this is just some explanation so you can do better with your time and I'll stop watch let's see what I did I diminished this central part and also this part here less width less height and this little part here so let's do exactly the same we are about to finish this tutorial we just will oops be a little more here yeah just like this and then Ctrl D to duplicate okay cool here 100 percent another two I zoom in it twice here twice again don't eat a little more I select and I hit my um right arrow on my keyboard twice twice here too it's my down arrow like this and I select it here and I move carefully can president hold shift to help me so I can go to the right position in this 45 angle yeah now it's pretty okay to test so I can select both of them and then create multiple components combine as variant I will use this slash stop small caps watch [Music] selected here and then first one it's gonna be off and this one on press and hold out and move and drop it here remove the older one and tests select on off on off see it's pretty cool yeah like it okay the last one let's see what we need so the sand is up here and now it has to be down here top bottle okay select this one which is not a component yet duplicate zoom in 100 opacity click twice twice again so we got this little element I will cut zoom out click twice out Ctrl v i paste inside they are now separate elements so I will um flip upside down 90 percent so it will move down yeah and I got what I need so component one opponent combine as variant icon small caps that's so the conflict select test off [Music] on code just finish it you can drag and replace now we are all set we can even for example select both of them let's see um select and select this one yeah on select okay we when they are in the same variant same States they are mixed timer stopwatch I was about to say anything about not going to work no matter timer yeah no matter okay so now we got what we need right exactly like this in the second part we we can join all the components we did and combine as a new uh variant so come with me we have this it's not necessary but we can do that I just want to show you how we can make nested components not going so deep but we can work a little more I will duplicate like this and then Ctrl D and D again now this one will be selected the first one unselected the third world selected first one selected last one selected the first one unselected right they aren't component yet but I will transform all of them into components so create multiple components and now combine has variance and now I can go like let me see what I need here I called menu I have one thing here that is not being used but I I called menu [Music] that gave me small caps so this one I can call rather than calling default I can call alarm for example uh clock or world clock you'll decide stopwatch in timer because [Music] that can be easier to change so let me um show you what I want to do for example if I had this component like this this instance I can just come here and switch like I want to have alarm selected clock selected stop what selected and I can also come back to the master component you can go to settings and I can change the order for example the alarm should be the first one so I have this dreadable icon I can move like this second one world clock or this clock as we name it then we got stopwatch and finally timer so when I go to the instance right now I have the right order so alarm clock stopwatch and finally timer it can work this way or I can for example have my own set so um I will make a auto layout only icons for example so yeah let's see this space between then don't remember but whatever yeah I can increase just for a matter of testing then here we will type Auto so they will be accommodated using the the right space okay and now I can replace so the importance of naming things properly so stopwatch actually word clock this one is going to be um stopwatch and the last one is going to be a timer okay in the states the variants all of them will be off just the first one it's going to be on so you can work like this like switching this way that can be faster or even you can go one by one and change oh I want to activate this one I want to enable this one I want to make enable this one you decide the way you prefer I'm gonna go with this one because it's easier have no wrong way of setting things I'm constraining what the designers that they are going to use this design system they will have constraints it's important so in this case it's possible to select just one state per screen so there is no wrong possibility of selecting things that they want to yeah this is the way okay so now we got all that we need they can copy this I can even correct delete this one I can then replace here so I will delete select this rectangle I'm going to call Background just for a matter of organization it's around and then I'm gonna copy inside not the way I expected I will select both of them centralized like these and like these and I I can even group and I can call menu yeah aligned by the bottom in this little element is indicator right it should record space inside of this group shh in a line it is a bottom part and I can replace so I got this group I can remove all the other elements they aren't components yet select this framing paste now I want to have a little animation here for this reason I didn't Design This indicator inside of these components because I want to have a separate animation yeah you will see in a few minutes but see what I did you know the constraints I told you before I entered on the menu but I don't don't have this I just want to select like this I have the possibility but I can select like these and just switch just change cool now I will paste here click once or twice to enter this group and then I go to stopwatch in my move this little indicator like this okay can copy from here for instance based in this part and finally moving the indicator to the last icon so as you can see we got this now and we need to change the state selected so we got all that we need okay I'm gonna create a frame here I have this sandbox this is the area of test so I can test things like these you can create two just like I did I'm gonna make a auto layout I'm gonna call uh icons example this one I will select click in once a few container for all of them because if we increase the size of the auto layout things are going to be accommodated inside here it doesn't work yeah just just like this it's okay and and yeah I will press a or F so we have this frame the color I recommend you to use some darker color core components [Music] and now you got all the components well aligned well documented so all designers can see what was done easy to understand and like I told you before we can have some section to to promote to [Music] extremulate our sandbox place where the team designers developers they can play in this sandbox so they are allow it to drag and drop things and to test them right so many people they like to organize for me organization is like a it's like golds a awesome rule a golden rule [Music] okay so sandbox oh I want to test something I can like drag and drop here and it's like a little bit to play around I can for example I want to detach from the master component and now I can like move things around like these like these I can't play the way I want I have no restrictions yeah yeah see I can mess you around [Music] playing with things that can change names that's the opponency how things work and so yeah then I can reset if needed see reset all changes I can come here reset all changes can increase the size if I want then I can reset size see reset all changes true for example if that's needed I can organize in different ways like let's suppose that it's a better idea to have the icons with a different order cards I can create a new auto layout let's suppose that um the application will will need to have different order so yeah we can have this section to play around let's suppose that we are creating two larger screen you can come here and we have this flexibility thinking about responsiveness yeah why not see so this sandbox let me replace this name sandbox yeah a lot of flexibility right cool so I think that's you got the points now it's time to do the interactions okay so what we need we need to go to from this alarm um frame page to the next one so yeah you select this component here and then just connect then as you can see I did the connection in uh like I told you before Sigma got some updates so I I'm not seeing any more this configuration panel over here so like it's straight in the points that I was connecting so it's easier right it's more contextual smart animate just like this and let's connect this top stopwatch one smart animate timer one smart animate this page I want to come back to alarm smart animate because figma understands what I want just connect things it's not a big deal not a rocket science it's pretty easier to do and you know that maybe better than I do okay connect here and then timer here let me scroll you know horizontally first screen second thirds yeah okay now it's time to test what we did I'm gonna call uh menu [Music] and let's play another um change like I was telling you Sigma got this update so it's possible now while I see my design it's my prototype I can see also this uh screen so let's test see all the icons they have their interaction and also this little indicator like I told you I designed it it separate and I'm using smart animate so when I go from timer to alarm page the indicator will follow me see where I click the indicator follows me okay so this is our tutorial I really appreciated your companion and I enjoyed doing this tutorial hope to see you in the next one I took a little longer to record this new one I was in a rhythm like recording in each three days four days at most one week but I I change it uh my work I'm working a new company and doing some freelance freelance and I don't have more a little of time I'm not complaining or crying here like a baby I'm just telling you stay tuned because I didn't stop producing tutorials I just needed to organize a little better my uh calendar but I'm planning on to do even more tutorials I was doing before so thank you for watching and I see you in the next one bye bye

Channel: Hands-On Design

Views: 195

Keywords:

Id: vtMmq2bO4Fw

Length: 43min 10sec (2590 seconds)

Published: Fri Jul 07 2023