How To Animate Time Pickers in Figma #Prototyping

hello guys this is Marcus again bringing to you one more tutorial this time we are learning how to create um time picker in figma how to prototype that let's suppose that we are creating some applications some alarm application so we have for example timer stopwatch let me see which more um yes alarm timer stop watching perhaps let me think about something here some time zones like the time in some countries okay but here let me explain that before and we are going to learn how to create time picker no more than that so uh let's suppose that we are here in this page and the user wants to pick up some timer like scrolling like this and then let's scroll a little more user can scroll like this like this and then the user decides like oh I want to set some alarm to 6 35 PM so it's possible to do like these are like this the user can swipe down swipe up whatever and then we got this button over here where the user can hit and then we'll see this alarm added successfully this toast message this notification and also it's possible to see the number here we are not going to do interactions for the sweet switch or even these more options or even the alarm one not at all and none of these icons as well we are not going to do that for this time so I will press R again just to show you like the time and pick it needs to be 635 because yes we need to like for example if you we are doing some usability tests we can give the test to the user in this case and then ask the user for example to set an alarm and the time needs to be 6 35 PM for example so that you and then you give the user the Prototype the mobile phone with the Prototype and the user can try by himself or herself set an alarm this desk will be to set the alarm for this type and then the user saves because this page it's not intelligent it's static if you know what I mean so if the user use some different kind of number the other will see this information over here because this prototype is simple but I believe that it can be really useful or even use it in some usability tests if you know what I'm telling you so let's jump in to the design file here we have three frames and in each one I'm going to jump in to explain details this first one is the frame where we have the components so all this big thing right we uh are relating to this component over here just this one here right the hour the second one here it is related to the minutes this one over here and the last one is going to be related to just AM and PM it's gonna be related to the part of the day like morning or afternoon slash night and the other components we are not going to do in details they will be just static because we are not going to have interactions on them but this one here that might be a text a shape whatever uh taking us to this page where we have the feedback over here you can't see but we have a feedback here let me show you press shift and O to see the uh outlines then we can see the component over here we don't have the component on this file but we can create from scratch okay so let's get started um let me organize the page it's slightly different I want to show the UI then I want to go to the design tab I want to move this Frame here and this Frame here so I I have a lot of room to do what I want what I need let me organize tidy up okay like this to have even more space and I want to start with this first one so let's see the size of this Frame let's copy from here click here press f click paste here then come here we are going to copy the order number click here click here paste press enter so we have the first frame and now if you want we can copy from here this quarter radius place it here and then configure it we can use even the same name if we what oops not this one but this one let's copy it and paste here to speed up our process now we have these um this action bar let's call this way action bar so we got a shape here right so let's press R and draw a shape like this see we can even have a bigger shape like this it's not going to appear because normally when we create um frames the frame by default we will have this checkered information clip content but the real size it's going to be like this okay so I prefer to have shapes just the right size like this I don't like to have [Music] shapes forms spaces that we are not going to use then select it here again and check clip content then let's have this size like seven two eight pixels Grid it's going to be a good idea then let's call it let me see shape small caps no matter then I want to have some line like this and I'm gonna call D fighter this one can be background I think it's better then when the developer is building up this screen doing the code side it's easier to understand how to create the component so let's open it here line or you can press l then draw a line like this press and hold shift to go like horizontal then click here copy this size because I want to have it lined with the same width just copy it here then click here to align and move a little it should be like this then select it here the color is going to be some shade of gray not too light not too dark something in between just like this one here okay and then it's time to have uh these two buttons cancel and save so let's press this gray as well if you want to diminish like a little lighter it's gonna be okay then press T to text click and type cancel press ask open it here more configurations and then Mark select this option uppercase then press Ctrl B to bold then change it to 12. I think it's good enough select press Ctrl a actually shift a not Ctrl a so now we got an auto layout we can change its field just to see what we are doing it's easier to align things and so then we can press Ctrl t so we got a new one we can call for example button and this one to the label button this one label and now we change the name here to save then let's click here let's go to um layout read change open it here actually open it here change grid to columns I want to have um margin 24. gooder I like to use the same one count let's go with true and then it's going to be easier to align things okay close then we can move just like this 24 top 24 um left but down in the bottom here I want to use the same measure so let's change some things 24 going forward over here true we need to move this uh divider we can enjoy this time to name it properly um fighter then move down 24 is gonna be okay we can increase its size 24 2 so now it's just perfect a little bigger but it's still perfect we can for example change to 16. top and 16 bottle it's good too because we are going to hide this color and then we have a lot of room I don't like actually to be honest I don't like the way it is I could for example see I could let me come back with the color I want to mark this option here Auto layout could try something like this if I want because I'm seeing the grid and then you can select both hide the color B it's better I'm not totally sure about it yes I don't know yet but let's go this way we can change like this like this I don't like I prefer this way let me hide the um grid so we can see a little better maybe increasing the font size let me try 14 maybe I will like a little more or a teenager too yes I think that now I I like I will add this thing like this because then you guys can uh use the way you want so the first part is then you can select for example we can group we can call um action actions for example or even app name navigation whatever you know I taught you before main tutorials ago many material design components like here Android navigation bar at the bar this one is the app bar but the IP bar with some actions like this so yeah you know the way of calling things properly cool now we need to have some text over here right I can copy from here what I'm doing I can click here twice then click twice again because you can see here we have Auto layout and then here the label I can select here this way too press Ctrl C click out Ctrl V move like this then we are going to click out select the frame show the grid and then we are going to align in the grid like this Ctrl B because I don't want to have both 12. and let's open it here and change I don't want to have nothing just S type it just like this and now I'm gonna type exactly the same text Friday comma April 11th 2003 or 2023 if you prefer the size it's too small I'm going to increase a little 14 let me try some medium and now I prefer like this I can even increase I taught you before the reason of doing that too because you can have we are using for dates here but in other part of the application we can use for other matters like for title for more information for a piece of text so it's better to use all the space then let me see the measure here 16 I want to have some some mids Gray chain is going to be okay here or if you prefer to have more room more space 24 is welcome to okay now we can click here twice copy the um divider paste out of the group and then we can move a little down maybe the same distance it's good and now this line I don't want to have the same size I want to have a this line to consider the um margin 24 again click on the frame we can show the auto layout just to be sure to select this part we press and hold shift we move like this you press alt to see if that's right this so we show and hide the way we need just to to see the the white space okay now we start doing this part over here this tutorial is going to be a little longer I think so let's it will be cool click twice here twice again copy click out paste move like this now type one ask Ctrl B to bold maybe even more like black it's more than both I'm using Roberto side it's going to be 32 I use a 31 but I prefer 8 pixels grid two bulbs I will come back to not black not extra bold but just bold even through both I'm gonna select some color like this and maybe I don't know I didn't Define the colors brand colors action colors feedback colors in the future we are going to do all of that together don't worry and then bows to both semi bold almost there medium I think medium is okay so first we do the layout and then we start doing the components so let's add this one true we can select and press shift a to create an auto layout select this one Ctrl d and Ctrl D again we can select the frame show um the grid but we are not going to use the Grid in this case because see we move like this and like this we lost some space but we can fix it yes now it's okay see we centralize it that was like this and we centralize it like this cool now let's type here zero zero and here am in some countries they use uh small in some countries they use uh all characters like small caps and upper I want to go this way this one here 32 is too much I'm gonna decrease a little like it's rainy or something like this can be cool too much space right so let me try to have some padding and I want to see if the Paddy will work yes it does 1816. I don't know um oh maybe I know the reason it's fixed maybe hug content s not fixed let me see inside [Music] so it should not working it's actually but there is no way so we oh I see it's necessary to have one more Auto layout so I'm going to select to select all of those elements or maybe let me try another thing open it here pack it we're going to change to space between I don't know maybe that works maybe not yes so space between so we have this control I think it's fair enough so let's measure for it 32 maybe 32 not sure yet then we can move things around virtual here too [Music] let's copy these parts let's have 32 here too let me see the number I use it here is 16 16 24 maybe then we can change all the things okay 24 here 24 here cool and now let's type repeat [Music] then I'm gonna replicate and now I will press m we are going to press ask click here click here Auto width perfect now we duplicate Monday Tuesday select both of them shift a for auto layout okay name like um base this one here we can call uh type divided or divided it's okay okay yes let's organize it here we can call label it's okay label here to or title or label you decide so let's select this one inside we have seven days right in the week counting the weekend so true three four five six seven ask select just like here move a little see the beauty of the grid then we go to the middle or here or here or here whatever because we are not increasing the size like this so but in this middle here I prefer think it's better because if we are going to scale in the future it's gonna be automatically or the way that I like to say Auto Magic and now um space between and we have the control over here like can go this way if we want our need okay Tuesday let's go with Wednesday then Thursday then Friday then Saturday and then Sunday in some countries they start counting their week on Sunday sometimes on Monday in my case here in Brazil on Monday this is the Brazilian way of doing that of starting the week in some work day not on some rest day okay so we got this three four and then let's continue um alarm name we need one more line let's measure 24 [Music] alarm name even we are not going to to use the alarm name but we are not going to do the interaction but it's important to to make the interface complete hold on then we can duplicate and now it's time to have some contrasts right the distance here it has to be a little less and then we don't have contrast because we need to have this balance between title and between texts and even we can rename like like I told you before a couple things ago we can go with Title Here title or subtitle you decide the better reach calling it by two and this one here it's gonna be text Stacks or information so let's see if we have some difference like two uh points of two friends so I can increase it rather than 14 I can have 16 over here right and we already have some contrast more I can select this one I didn't decide yet the brand color but let's say let's suppose let me hide the grid and let's suppose that the action color because it's an action color this one and this one actually but we can change like let's suppose we are doing some application where the action color is going to be green or purple or blue orange whatever some shade of blue like this let's try use it here dude I don't know if that's going to be uh cool a good color but we can pick up the color from here not at all I can copy from here and then apply just here and we can see yes that works let's see here too if that works yeah not so bad that would be needed to check the contrast and things like this but for now I am satisfied with this and we can proceed maybe I will select all the elements just like this and this gray here I believe it's gonna be the text we can open it here and increase a little to have the texts a little darker and the lines they are to um lighter so it's better I want to increase even more now I believe that I prefer something like this alarm name this one here 14 Maybe 12. too small yes this is cool I'm gonna type none here because we won't set anything like this now we are going to [Music] um duplicate this line here I want to use maybe 16 I'm not sure about this or 24 [Music] maybe too much space I'm not sure yet we are going to select these two elements shift a for auto layout let's name as um something like information text title inputs not always input but information because I can understand information now I have these and this I can select all of them shift a again I'm going to call table Island [Music] opening the table item we have two elements we have information we have divider so it's organized because now we can just duplicate like this select both of them shift a and then we change to 24 select this one do that again do that again so we have a lot of things to use here this one's gonna be the last one none as well uh Chun and volume none vibration non-tune cool they are like lighter because they are disabled so let's have the same one like I told you before we are not going to the components of this part in the future I'm prepared this tutorial is some preview of something that I'm going to do in the future for you guys but not now and then let's do this component over here I will copy from here this switch see we can switch like this but like I told you I won't show you right now I just wants to break this component so detach from instance just to show you we have button toggle and background two elements the background it's gonna be 48 by 24 so draws some rectangle then type here 48 by 24. then the Border radius let's see 64. then we're going to call it background of course and this one here we can do a [Music] Circle right press o for OVO draw like this 25 by 24 not right I'm gonna type 24 by 24. the color is going to be white I will place just like this I will zoom in to see a little better I'm gonna apply some effect some Shadow see it's cool they still under Shadow but I want to increase it here like 32 maybe 40. and they spread the blur the why and X I want to go like zero and then 40 maybe 48 so it's possible to see a little better this one that might be toggle button whatever I'll go just like this then I told you that we weren't going to should do that so I will just select both of them and I will group I will call [Music] switch then I want to duplicate like this twice I'm going to move this toggle like this I will click in the background and I will see the color I use it here I can zoom in like this I can open it here and pick up the color from here then when I go back there you can see that I have the two of them right switch one switch two I'm not going to make a component right now so I don't need you a name properly or differently so I just have the layout of them now it's time to place inside so we have this section here right this information I'm gonna cut from here right click twice twice so I got the information I will paste paste it here information let's see what happened not so good so I click twice twice oops I go to information and I try to change the direction not good so I press Ctrl Z then let's see what's possible to do I will cut from here I will select the table item and I will paste I will zoom in then I will move a little up like this now I select this one and this one shift a one more Auto layout and then I change direction like this then I decide to go fuel container I don't know if you Contour it's a good one but I have to move like this see and click twice here twice again and that is my thing I can't see anymore this switch let's open it here we got table item right more information the thing isn't that I don't know what I did I will press Ctrl z a couple of times I did something wrong so let me correct it change it that's still there it's here switch Yeah I'm sorry I found it so hug if your container no big side let's try a lot of things inside we had hug I would change a few container then I click twice and I move feel this one hug fuel container too now we started seeing better things now we can just move like this cool did you get that so we have this information like this some people they use just like this but some people they change to just like this oops not here click twice again and now we can go and align by the middle and this is culture all right I don't know if I'm going through uh fast but I don't think so because you are clever guys I'm teaching you a lot of things over time and then it's time just to to go this way so now we have like let's see how we can call it maybe temporary built Text Plus but something like this just to see what we are doing and then it's okay table item this one is a cool one then it's better to duplicate like this you can copy the text from here to speed up our process okay delete from here and vibration too I can copy from here this is the beauty of using Auto layout we have a lot of flexibility and then see it's not so good yet we need to change to a few container here if you're container here true yes yes this is one of the reasons that I normally like to do components and paint choose colors so I can see exactly what I'm doing I showed you before I'm quite sure about this cup of time in several tutorials and this time we didn't do that but I recommend you really so this is beautiful we we got this right but now we need to do one more thing like I told you click here twice then click press and hold shift and then select the three of them and then we can diminish the pass through over here by going through something like 32 because the in this case the other information they will appear after I set some name to the alarm for example something like this but the information is still here okay so this page is okay right but we have this gray things we are going to add them properly when we will create the component right like I told you before so let's go this way [Music] um this page is okay now let's create a second one let's copy this uh frame press Ctrl D to duplicate and then select the frame and move a little down let's design we have a lot of things to do this tutorial is going to be a little longer than they use well but it's gonna be cool okay so we have some different things over here and then first thing we need to delete this part and now I'm calling this alarm fi the concept I'm creating for you guys but like I told you before we're going to use it to to learn the entire process of doing applications from scratch from the business model canvas to the coded not the code but the useful working prototype okay I want to have this engine something like this what I can do it is to go to plugins and find more I type icon I have two plugins for icons installed I have one icon fine I I don't remember what I when I have installed over here so a feather icon like let's run it it's gonna be enough then let's type home configuration let's try settings yes something like this okay or this one or this one but I prefer to have someone filled and not stroke so I'm gonna to close this window I'm gonna go to um plugins again find more plugins let's type again icon icons Maybe icon 5 I like this one let's run the icon file because it's a little more polluted but we have a lot of possibilities so type here settings search icons so see we can we have a lot of options this reason is why I like this one so we just drag and drop like this close the window Ctrl G I like to go with Ctrl G but we don't need you I we won't do just to show you we don't need to the problem is it's a frame so I can apply it even colors here if I move the frame sometimes I move what I have inside of the frame you know this problem happens see I click in the engine and I lost but I need to move the entire thing and then once that I get into the frame I can move whatever way I want exciting I like to rename things the size is pretty okay I want to choose the brand color so I pick up the color from here then I will show my grid just to align things better like this 242 just like this it's well aligned 24 24. 2424 just awesome now we are going to delete this information actually we can use part of this so I will uh copy this one the color it's gonna be 100 pass through you can delete this spark here this part here too then bring it back a line now what we can have here like this one here we are going to diminish it size Ctrl B to remove the Bold or medium whatever and then we're going to remove the ear 206 space ask Auto width select this one we can um let's see the better way to do it we can for example press Ctrl shift G to unroll do that again you can do that again so we don't have Auto layout anymore but we have the freedom to do exactly what we want so move things like this this one we are going to delete [Music] place 32 I think it's okay if I am not wrong aligned by the middle together and then here I'm gonna delete this part this is those I can transform into the time 6 35 out of width size let's see I use it 28 we can use the same one then we can select all of them in a line like this 24 the same size we use it there let's duplicate move type game reduce its size like that is no right a number something like this maybe not old maybe smaller 14 Maybe the distance let's try four yeah select all of them then centralize like this is only here you can remove a little bit yeah select these two shift a for auto layout time this one this one I don't need I will select like this shift a in the software we'll do the magic so we have all the elements right with this Auto layout so I can call [Music] information you have the divider let's let me measure the distance it's okay shift a table item again if I was creating components I could like type table item slash blah blah blah in the other one slash blah blah so they could be variants or some instance some um some state of the component let's say this way so now we can delete this part here move this thing a little up let me measure like 24 I think it's okay or maybe 32 because we have two buttons they are too closer so we need to consider those things too then let's have a button add alarm control B shift a color it's going to be the brain color just like this and the black will be white then we move like this we are using Auto layout and we are using um I'm getting older grid read so we can centralize just like this border radius something like 32 it's okay we can increase its size a little we can go like here 16. fair enough because people who um have a fat thumb a large thumb will not have a problem to use it so here it's possible to add one more alarm just like this just like we are doing here so we are not doing this interaction but we're designing this information so let's have this navigation bar press r and Draw Something Like This and then click twice click and drag like this type 16 used to have this part round but not the entire thing okay the color it's not the brain color we need to use a different kind of color right because we have to main colors so far so let's click here just to see what we are doing okay then um we can think about maybe some dark gray or I don't know let me go darker can move around let's try to find another color that can have some kind of Harmony maybe yes maybe not maybe some orange not sure yes orange works fine just fine here see I'm using different colors I'm using this purple color is the same one here so I could for example make it a little darker and use the same color here I don't know just try maybe yes yes not so bad I should say I would say actually so now let's feel all this information so we use it some plugin for Icon so let's go that again let's open plugins we have this last one I I corn I qualify so let's type alarm we don't need to use that in the same color right I'm sorry the same icon that I'm using but you can find someone that can work for you Bell yeah spell is a good one so I'm dragging like this so we got the Bell then let's type clock [Music] so we got clock and I would choose something like this maybe whoops let's see we have this kind of problems we need to fix let's type here 32 maybe 32 is okay I can even let me see this one here it's 24 so let's type here 242 I can even already apply some Auto layouts just to to have this look and feel maybe increasing a little size of them I told you whoops not true and it's 132 2. and I can see what I'm doing um now some stopwatch we can type it here this can work please it's important to constrain right over here change use this feature creature now we are not seeing but we have some Auto layouts here we can call for example [Music] um icons then we can name the icons properly I'm not doing that so just move into and boom like this one for example we can go like well second one I don't know clock the other one stopwatch if you prefer see in this case I use it this field icon because this element is selected but when I click here or tap here hit here will be filled so this interaction should demonstrate what's actually selected okay cool let's see the next one it's going to be timer whoops what did I do let's go to the main one General [Music] and let's watch I think [Music] here glass icon Moon hourglass [Music] yeah let's see some something like like this I think so okay true move into close this window uh show the grid move down let's try to align by the grid here and here Central lines change package choose space between yes we have something really similar the color we are going to change just select once we don't need to select each one and change to White so now we can hide the grid again and it's important to have name many people they think like oh I don't want to have name in my icons but let's type them first one alarm I'm Gonna Change lightly like this way and let's move into wrong so select both of them this one and the label shift a move like this reduced to zero Oh Marcus but they are in different order so first click here to centralize then click twice here on the text and hit long Arrow boom just right and we can call I don't know icon well not just icon yeah whatever then we have this world clock duplicate cut click here paste both of them not going to work control is easy yes click and paste out like this oh type War aqua then move into now it's okay select both shift a call icon then centralize change direction and change through um kick twice was there already change to zero invert the order but this one here I don't want to have both so Ctrl B because it's not selected see did you friends and the color I can change from White sure I can pick up the color from here and then I go like increasing like this okay or even I can change the path through here like diminishing it's good to you can go 32 for example both of them work then and have more text copy from here click out paste both stopwatch ask move into both of them selected shift a icon change direction zero centralize 32 that's true copy click out paste oh timer move in both of them shift a centralized chain Direction name [Music] zero in change the order pass through 32. now I want to measure like 2424 and then let's let me move like this I can see the type of measure that I can have here 17 by 17 sometimes that happens but I don't want this way I want at least to have 16 here 8 pixels grid and here why not six chain two let me change click here and then we can increase decrease but it it isn't affected this way at least not in this case but we can manage it 16 by 16 24 by 24 8 pixels grid so we got this uh water navigation now we don't need this part anymore we have all I I don't think that I like this color let's try some other color yes we can play around maybe some shade of the same color purple I like it cool but you have the freedom to do exactly what you want guys I'm going this way you can go differently so black is not welcome here this color because we are using purple and green okay fair enough now we have all the elements that we need cool it's time to do the components so let's have some pages like this name it components I know that this tutorial is taking a little longer but it is what it is there is no way of explaining certain things in other words at least I don't like to work this way I prefer to have a deeper longer but well explained thing rather than having a whatever thing okay just a larger frame like this now it's the the hardest part I would say opponents opponents so what we have to do it's not so difficult but we need to have some attention see I copied that number from that and I'm going to paste it here okay then what we need to have them going to should copy some instance from here and then I will click twice I will break actually detach from instance and now inside we have a mask inside of this mask we have a lot of numbers you see so we need to have a lot of things here so first of all we need to have numbers from 1 to 12 okay so just let's do it one two select both of them shift a here I called workout screw so we got two I want to have a little more space like 24 I think so two three four I press Ctrl d right d for duplicate one two three four five six seven okay fair enough so this first part is okay now I have to type the right numbers three four five six seven eight nine 10 11 12. so we we have from 1 to 12 a.m from 1 to 12 p.m if you prefer you can type like from 1 to 24 you decide show 23 actually because 24 doesn't exist 24 is already a new day great so we have this first part right then we need to centralize like this and press and hold Ctrl select all of them and centralize here too so the first part is okay then um we need to have some masks the size it's going to be um one six six so I will do some mask like 166 I can go 32 let me see yes here it's 37 I can go so 40. or even more I can go like like 48 that is no problem so this was going to be the mask so I will move it like this I will press Ctrl X Ctrl V to paste um on top then I select I zoom in select this part press and hold shift select these parts and apply mask use mask and as you can see what we will do like I showed you before here we have this mask so when we move things like this we don't see other numbers above or below because we have a mask okay so this mask is going to work like this like I told you see we will scroll like this and scroll is to The Mask will start like this one just like DC One so it's important to select all the labels we can come here to this uh layer panel click on the first one press and hold shift and click here so we selected all of them then I want to have some gray color that might be some color we use it before it will be kind here or we can create a new one we are not yet using Color system so in the year it's important to have the brain color so we can go down and pick up the rain color from here but not for the number two for the number one so I open it here go to try to pick up the color and I select it here then I come back there and I have this first part selected pack it twice and I move a little down like this don't worry we have time to adjust all the things now what we have to do we have to duplicate it okay so press Ctrl actually we can create a component already but we need to have more elements we need to have this interaction Parts because with the user will click here it will uh Spin To One Direction the user clicks here or Scrolls swipes here it will change the direction so it's important to have these two parts I will press and hold I will press shift o to see what I'm doing so I can see all the little details I will draw some shape like this you can call the direction the color is going to be some type of blue to remind some kind of icon I can press and hold shift o again just to see what I'm doing you can apply some transparency some opacity like this click out shift over again and move things like this you can zoom in and enjoy all the space so we got this interaction part just like this then we press Ctrl D to duplicate and move down because not all the elements will have the interaction part then Ricky click here to select and move down and see the number one it has to be kind of in the middle middle between this part and this part so we can not click on the number but click here crawl okay then we can move a little down like this click out shift o this is the logic right then we will create um the components clicking here then we come here and we add properties variant clicking this plus sign so we got a new but we have a problem here Ctrl z z z z [Music] because this part the it's not a component I need to select all the elements and now I will duplicate Ctrl d paste it here yes now it seems better click twice twice again and then move a little up what is that okay um pick twice again I'm not moving oh I see the reason just detach it's not a component anymore now I can keep twice twice again and we can move things like this kind of in the middle okay and now I have to change this color has to be the brain color press I click here select this one this one is behind what I can do is I click twice here twice again it's gonna be the label one just like this so I can for example we are not using colors systems at all but we can have some little Swatch press r can have some little rectangle here and some little rectangle here now I am going to apply this color here just for a matter of reference so I don't need you all the time yeah it should try to discover the red color and the gray one you can click here I go like label two three I have the color here okay cut copy paste here now I know what I have to do without having a problem so this one is going to be this gray so I just open it here go and pick up the color from here these adjustments so we need to go all way long this way okay next one we just duplicate like this click here twice I pick up the color from here select the scroll parts put a little up like this then select this main number press I pick up the color from here so all the way long I'm going to pause the video to speed up the time so we you learn it what to do I'm going to do from 1 to 10 or as our prototype like I told you before we are going to prototype a thing that goes like the user needs to set this exactly a set is exactly in time we don't need to Prototype all the numbers okay so I'm gonna pause and then I will be back in a few minutes you won't realize what I did that I was absent okay guys like I told you before I did this first part okay and then more than eight I don't think it's gonna be necessary for this time now this first one it is already a component I think so yes component one I'm gonna call I don't know just one this one's gonna be not all of them are interaction so I believe that we can go this way [Music] Direction small caps yeah now we can select let me try this way first oh I have to make a component with this one okay select this one component this one component or we can select all of them but be careful open it here this little Chevron and create more multiple components so we got multiple components now we select all of them and we combine as variance and then we got some conflicts over here okay but don't worry select the first one now we call it one property let's call numbers for example second one the name will be true and so on so forth three four um five oh I'm doing I'm doing wrong I'm sorry I'm selecting the mask I'm sorry about it we need to select the middle the number properly okay so true three four let's see four five six seven eight let's see if we have some conflict now let's see interaction of the interaction interaction it has the same name but here it's it's separate I don't know the reason it separate over here problem separates for some reason so what I consider being a good thing this one is cool this one is here what we can do but here it's okay you're true but here it didn't oh maybe because I I convert I'm gonna undo what I did maybe because those that I converted together they are not right so let me step back and solve this problem see I was doing one by one they were okay but this one here it's different see different so I will try one by one here too okay so select here create a component um something really strange is happening there I don't know maybe I know yeah yeah I I got I have to break it that can be a component here okay because here I think that wasn't a component just a shape let me see if I can I need to see it's a little complicated complicated to explain I think so I will duplicate it here now we have this component in this instance I'm gonna delete the component same thing here duplicate delete the menu one and just keep a copy and now I want you to try it let's make the components I'm still working not properly I'm going to delete this one I will go this way I thought one thing but didn't work yet when I was creating um this tutorial those things didn't happen so I don't know the reason getting crazy but I think this way this crazy way it will work I just want to delete it here I will just keep the original because I'm creating a new things that I did on the plane because like I told you I think [Music] should break it like duplicate it and delete the main ones just having instances and even I could detach and now if I create see no the problem still happens yeah let's see the thing is crazy now we combine this variant and let's see if we have some conflict see now we don't have that message and conflict now we name like numbers you go one by one and name it properly one two three four five six it's like the kindergartens learning to account seven eight now it's time to test we need to test it okay so I'm going to create a new frame just for testing and then I will click twice here I will copy this instance and I will paste it here I will centralize and I will select the frame I will type here um tests now I want to run this test so I press here present now see nothing happens yet because we didn't do the interactions okay just a prank what we have to do here we need to go to prototype okay see here you have a lot of interactions we need to do that the interactions they are basically on drag going to the next one is Mark animate okay just on drag and smart and means this one here click twice and you need to select this interaction this blue part it's really part of the blue part this broad part we connect here on drag not moving but smart animate okay then this one here we come back on drag smart animate and we can already test that let's come back to this test frame and play see whoops not work yet we will figure out the reason let me change it to [Music] three yeah exactly because we are in the number uh seven we didn't prototype yet we prototype it see just the one in the tube so for this reason we can select it here go to designing change the instance one see here one into it's wrong here right because you can select the component then go to the main component here we have settings configuration not here exactly but we select this dotted shape then here we move the mouse over here we have settings so this number one see we have these three lines here this icon indicates we can move things up and down now it's organizing okay now we come back here we need change one R2 see we change things change because it's a component now as you can see we move things up and down this is the logic of this interaction but you can say Marcus but I don't want to have these blue shapes okay I I don't want to so we select here when the time arrives and we decrease the opacity to zero okay and now we have the interactions but without the colors okay and this thing works this way just perfect so come back here Ctrl Z to show what we are doing so let's skip a prototyping so all we can press and hold Ctrl select this Frame connect just this change to own track next one pressing and holding Ctrl next one all the way we can go all the way without stopping all the way this one is wrong because it's not tap it's it's important it has to be on track and this one here on drag then from 9 to 10 we didn't prototype yet but if you want you can create even more until 12 but in my case it's fair enough it's okay to to test so now the way back the top connects here on drag [Music] same logic smart animes really important just changing your own tab on tab on tap and type on drag not haunted on drag my man on drag if I'm doing right they're true oh drag last one on drink it's okay I did that before so now we have all the interactions we need to have so here I move up and here I move down up and down up and down all the way until seven because we are going to prototype this one is going to be a six okay and now this same logic applies to the other ones okay same exactly logic so I won't spend a lot of time doing that in details with you because we just did here it's exactly the same I will pause the video and then I will come back when I finish all the things okay okay okay I just came back I finished this part but I didn't do any component yet because I wanted to do that with you guys so here as you can see we have just some group we don't have any um kind of components none of those elements they are component and it's important to mention really really important let me just unlock here and unlock it here too as well as unlock this part in this part because sometimes I lock the layer that is over so it's gonna be easier to select what is behind and then I don't need to do anything more I just lock it here and I can select like these am over here then I need to come back in unlock what I need okay now let's do that together so like we did here on top we just select transforming components we can even press the shortcut Ctrl plus a I'm sorry Ctrl plus out plus K so let's do it Ctrl out see and then we can do all of them we can we could even do the way I showed you before many tutorials will go like create multiple components normally that works but I don't know what it didn't if before it's totally okay multiple components that works but that time didn't work whatever now we need to combine as a variant this one here we called component eight but the the right name that should be something like time hour maybe this one minutes [Music] let's we have components here combined as variance and then let's name something like am [Music] okay now we are all set we just need to organize things so let's type here um minutes something like em [Music] then let's name things inside so select the first one we can use the same structure like one two three four five six seven eight nine in here one into one two not ten eleven we could go like one now it's time to do the interaction so we not we need to jump prototype tab then like we did here it Niche click twice or we can press and hold Ctrl click here then connect here on drag exactly the same logic okay 100. smart animates and to come back same logic on drag actually on tap not actually your drag that's right on Drake smart animate I'm gonna pause again to speed up I will be back okay folks just finish it all the way so I did all the way to go and all the way to come back and hit you so now we have all that we need to proceed show uh drag and drop things into our um design so here we have this stats section but here I don't need these colors anymore what I'm going to do is Select page opponents so I can see all the colors inside I have this color here which is 30 opacity I'm gonna go with zero percent opacity you can see here in text it's changed as well so cool I will place it here it's important to tests then I'm going to drag some part here so right click twice press and hold alt click and drag and drop like this this one Gear 2 the first one same logic now I select both selected three of them shift a by the middle like this and so I would like to have some texts this so this column it makes a lot of sense right let me cut I select it here I paste and I go and heat left Arrow so I have something like this I can select and re-adjust like this so let's test we select our test is open here see it's automatic so we can move like this the colors are changing we can go we can come back and change it here as easy as that here I did some wrong interaction let me see let me go to prototype tab here the way to come back it's tap I have to change to drag and then I come back here see now I drag down and drag drag on the swipe actually okay cool troll we had all that we need so we we just need to go into place uh this renewal elements we can call it see it's a frame you can name it our test over here we can name it like um time maybe then we just need to copy to move all the way down and we change it here let's open a little of space because it's a little bigger than the first one doesn't bother me I don't know if that bothers you I want you please let me come back to design tab I want to place it exactly here I can even press I can apply some color just to see what I'm doing easier to organize like this I go really closer like zero here then I can hide the color and I can see um this divider here again press Ctrl shift L to lock this layer that I can select here and I move a little down right click here on this number or this one ask Ctrl shift L to unlock I can lock and unlock I will show the color here again so I can see the distance and I can hit up Arrow until I go that closer so we can have things like this let's see 20 I prefer 24 be consistent consistency is important like here 26. 4 so now we got this first part all done right this one is okay true now I believe that we can let me copy this name from here and paste it here configuring and configured I can place them together because they are going to be a prototype so it's better to organize now again because I just organize it that way because I was going to choose as a reference but now I don't need any more right I can just organize like this this test it's important too copy here awesome awesome awesome now let me see what more I need to do let you connect it here to here right so the time here let's change why not I'm inside something like five twenty p.m so prototype again see [Music] um device normally I go none but in this case I went through some device so I'm gonna go with some device that has the same width this width is 360. I want to go exactly the same so I'm gonna um select here prototype show prototype settings device none let's try to find someone that will fit well this one here 100 large because when we come here we can see the Prototype right now let me move a little like this the test one it's not part of the Prototype so I can place it here just for a matter of sandbox or the playground some people they call like this okay I will click here twice and I will connect this button here right and cancel we are not going to use this floor one I'm going to name um type or typic Time picture play the type pick around now so let's test let me remember 5 20 pm okay let's go to five 20 P.M whoops I did something wrong I can go there and adjust again 5 20 p.m okay all set all done click on Save so 5 PM but now we could have some toast message I told you that before but maybe it's gonna be a matter for another tutorial because I really believe that we are done here let me press R again Let's test again oops and then we go to five and then we go like 5 20 p.m and say okay just done so next tutorial I will do the notification the those notification I don't know if I did that before if I showed you in some tutorial I don't think so but it's going to be fun because this tutorial is to uh longer and then I don't want to be longer anymore I'm going to end it up right now right here and I want to finish thanking you guys because it's really really cool when you support my tutorials I hope to see in the next one to see you in the next one I'm a little tired I'm speaking some uh wrong word so thank you for have watch it see you in the next one uh stay safe take care bye bye

Channel: Hands-On Design

Views: 1,357

Keywords:

Id: mheYfKULUZE

Length: 95min 22sec (5722 seconds)

Published: Sat May 20 2023