How To Prototype a File Uploader In Figma #Prototyping

hello folks Marcos again in one more tutorial this time we are going to learn how to create this prototype where the user can upload files so we have this example over here it's possible to hover over a couple of images so I'm gonna pick up one of them drag and drop over here you can see this animation the little micro interactions so when I drop the image over here I have this animation this Arrow going up and showing that something is being prepared then we got these um loading bar in this counter like the percentage and then finally this check mark and upload complete I'm gonna run it again because I want I want to show one more interaction another flow it's possible to stop the upload like click in here in this little trash bin icon and then we got to this place the upload has been canceled you will be redirected to the main page so it's possible to close over here and start the flow again so let's create this and I'd like to mention that I got some feedback from you guys like that I should separate tutorials of components and tutorials of micro interaction and so yeah so this time I will just jump into the thing we need to create a couple of frames like this so this first one and then this one the image being moved then this one when the when the image is like dropping over here then we got this one with this animation and then we need to have this screen and then the final screen 100 so this little trash bin icon and then we got this check mark and then we go on we have this uh flow and then if we don't get here we go and then we end up in this Frame okay let's do it but before we start it's necessary to create a couple of frames so we need to do that even though this tutorial isn't about creating components but we need to have components okay but I will just show them real really quickly so the first thing we need to do is create these images so I will create some rectangle like let me see 140 by 98. so something like this will be fine yep and then I can call it like image create a component with this we have image image I can go this way and let's have these eight border radius it has to be this internal one not this level but this level now let me run the unsplash plugin you can also go to Google Google some image you like and then you can paste into this component so I will type like food top view because when we go like top view we can have this view from the top so you can find better images so let's apply this one and that's okay I can close it then I will duplicate detach [Music] create a component select both of them combine this variant you can call it image like I told you and then I need to change it like I will call this one in label for oops this first one is enabled let me see what I did yeah I can even like I did here I called enabled and this one I will call let's see let's see actually this one is enabled this is a recall State and this one is hover I want to have some Shadow over here so let's apply Shadow if effects um [Music] let's apply some Shadow then I want to really soft Shadow like 12 has been okay I think so then I want to have some Shadow over here as well 12 and then I want to increase this like color so they are different like this now I need to have some interaction because I let me show you again when I move my mouse over the little image the thumbnails you can see this hover state I also want to have some border it's gonna be good to have some stroke so whatever stroke I'm gonna go with actually I need to go to this level Image level yeah now I can apply don't forget that we have this first level second level we need to apply in the second level so stroke white cool yeah so now it's possible to see this elevation okay so we need to have this hover interaction so what we need to do over here we can even like change lightly like these I think so let's try let's go to the Prototype Tab and then let's connect from this one to this one while hovering yeah and then we need to do the interaction to go back then this one it's gonna be Mouse leave instance we can change it to Smart animate and the previous one to Smart animate as well so we did now I think that it's a good idea to have some sort of test area so I will create some frame over here pressing a or half I do something like this and then I will call it tests then I will click here flow starting point let me call it test as well just to identify easier I will press and hold out and I will drag like this then I run this um test let's see what happens so we're gonna move my mouse over I got this interaction but it's not changing like not tilting like this so it's not a problem was just testing it I haven't tested before so yeah maybe if we get into like this I haven't tried I tried the first level but I didn't try the second level let's see see second level works just fine so we can go this way I think so yeah cool now we can even try like if if we have some tests frame some test area test area we could for example um duplicate a couple of time like this and again and then we can increase its size a little more and this is preview is getting to small but we can see it like we'll bring over here and here and here yeah I think that Mac OS has some kind of interaction like this if you don't like you know how to change it you can click twice over here and then design Tab and here this degrees this rotation we can type zero and then we try again and now we just have these little elevation if you want to have some more elevation you can click here like in the first level and then you can come here and increase like to spread this blur a little more and test again so this test area is pretty good if you don't like to see in this preview you can even select these tests um frame and then you can go in present and not in preview so it's possible to get here let me try over here they are pretty much the same but yeah you know okay cool the first part we did now it's time to do the second one we need to Design This Cloud so we don't need to design front scratch we can like run some plug-in I have one for icons this font awesome icons it's for free and I quite believe that you know how to use it so I'm not going to show you from scratch based on the feedback I received so let's type Cloud we have some cloud like this just click let's go to design tab again we can increase its size something like this will be fine um this Vector is inside of a frame I don't want to have any frame so what I will do is to press Ctrl shift and then G I will just have the vector right now I can call it Cloud for example a color I like to play with blue color okay I just need to have this one I will duplicate and now I will do a mask over here and I also want to have some Arrow so let's come here we have some plug on Stars we don't have what I really want we can try to run some plug-in but I don't think that we are going to have exactly what we need so let's draw from scratch so just press p and design something like this press and hold shift it will help us so yeah if it's not exactly the way that you want then we can press V select the anchor points and move around until we get to the point that we want okay cool first part okay let's apply some fuel remove stroke let's draw now some rectangle let's place things like this select both of them then we can go Union and then we and flat selection you can click twice if things aren't the way that we want we can move around a little bit like this and done then reduce its size just like these and then we can go like call it Arrow pretty good we need to have something like this okay maybe like this yep let's scroll and place it here then I will pick up this um shape one more time place it here I will copy this Arrow and paste out now what we need is actually I can cop all this group place it here and then let's ungroup and now what I really want to have it is I want to duplicate this Arrow a couple of time like this let's play with 24 distance from one should each other press shift a to make a auto layout and then select the last one and press Ctrl d a cup of time so we have this okay and it's necessary to select this Frame I will call it arrows plural okay now I will make it the components then this component I will move to place it here if I need to use it then yes I will just use some instance of this so let's place somewhere like this then we will select both of them and move like this and in this case we are going to select and move up like this we don't need to go to the last one but something here will be fine I believe so then we need to select the two of them and click here mask use mask and then do the same over here mask because let's see now we got two masks we have these arrows and we have this Cloud as a mask I can even change this name to mask and here the same thing Mass blue Page open it Cloud it's going to be mask because it's easier to identify for example if I select this little one here I can go to arrows and then this one here will be better to explain I can select arrows layer and then the animation will go like this okay this is exactly what we need so yeah that undo couple times now I press shift o I can see what I did even it's masked but I can press shift o and show or hide what I did now I select um this element and I will turn into a component this one I do the same thing turn into a component and then I can select both of them I can combine this variant the name I will call uh Arrow animation something like this and inside I have this property so I will call like not state but I can call [Music] yeah let's go with State it's understood so but you can change the name like here we call start here I will call in then um I have this separate for this reason because if you press and hold and then you drag like this press and hold out then I select the 12th there and I align like this then I can group things and then I have this test area so um I can even increase this you can move things a little down can move here and I can test of course let's see if what we did is already working so I can see these interactions but I can't see any animation over here so let's see why I know why but let's see um arrow is gray and it was supposed to be white so we have this entire component let's select it and the color let's change to White let's see it here not white I don't know why it's white in here it's what the importance is this so it's not animating uh yet because we need to do some interactions of course so let's select this first one let's go to prototype tab let's click here and connect it then it will be like um after delay one millisecond and easy out I can put some number like 10 000 the maximum I think so okay now let's test again I came back here and I pressed um R to restart the flow yeah so we got this cool we could increase it we can play in different ways but I just need to have some a couple of seconds to demonstrate that something is about to happen so I don't need to have really a lot of things I could do different ladies animation but it's pretty okay and always if I need I can like press shift o I can select this part I can go to arrows and I can go a little up like this can even go to the master I can duplicate a couple of times as you can see yes we have freedom to do whatever we want okay but it's pretty okay because then we will need to test it a couple of times no don't be afraid okay so we have this tests area we have a cup of components I will place them in order that we did so we did this one oops sorry let's go to design so we did the images then we did arrows it's not a component yet we will use this in the future but not a component yet so we have these um arrows animation we have this element not a component just a group of things we have arrow in Cloud let's call [Music] Cloud as well cloud cloud cloud yes call it I don't know background yes I'm not thinking too much about this but yeah you can do because you'll have more time than I do okay in this test area okay it's doing well now uh we have this part this part let's go this part as well let's go to the Loading part so we will have these um little bar so we just need to draw something like this height it's going to be four then eight border radials color normally I like to use Blues so I'm gonna go this way let's call loading [Music] then let's make a component out of this then we duplicate we detach foreign so this one we will click twice to this Vector level then we diminish its size to something like one pixel one pixel width then we have this one the real one we are going to use select both of them combine this variant let's name it loading now we have to components the let's call this one state and here let's have something like one percent and here 100 percent okay just helping to label things properly okay cool and now let's go on let's get this instance press and hold out then drag and drop you can click from here go to the tests area you can select the frame paste into and then let's press R to run again nothing is happening and I guess that you know the reason I did that with a proposal just to check if you are keeping attention so what we need to do is do some connection some interaction let's go to prototype tab then we connect this one to this one it's gonna be after delay as well one millisecond to start and here let's ten thousand milliseconds let's see press r and we need to change like it has two states the first state it is 101 percent and the last one is 100 so we need to go to design Tab and then we change like and it's out of order and I mean by that let's see what I'm trying to tell you guys um I like to have things in the the organization that I think is better to me so let's select this um part this element click here in edit properties and then one percent is below let's put above this is the right way okay and every time that you face something like this you can uh correct in this case these images see the first image is enabled not over to over the second one the same goes for arrows end and start start is the first one okay so we can organize things better I prefer to work this way so uh let's come back here we need to select this bar and then let's change the instance to one percent and then we can come back to prototype press R and then we see things happening so we have two little animations in these hover States yes we are getting to um what we need to go the place that we need to to get okay then let's see we need to have the last interaction animation so um components let's do this like we need to have these numbers and then we need to connect them after delay this one goes to this one this one goes this one and so on and so forth okay is I'm gonna use this typography this color I can change it if I need later so it's going to be pretty okay one then I need to have this stand I can select both of them just to organize and then I duplicate a couple of times like I have 10 I have 20 I have 30 40 then 50 60 70. eight and 100 I duplicated one more yeah no problem then um I will select every one group and I will make components like select all of them make sure that we are selecting these aligning by the right side then open this little Chevron over here and create multiple components cool combined as variant it's really necessary go to prototype tab select the first one connect to the second one off this one's gonna be after delay as well in the time it's going to be like one and this part let's think about for example 200 is out it's going to be enough okay and then we need to repeat this like connect this one to this one change after delay then 20 to 30 change after delay click out select connect change without I will pause the video and I will come back you won't realize what I did okay so I did um the same thing you know all of them and now we can even test what we did so all of them after delay connecting one to each other one to each other one to each other and so on so forth so now what we need to do is to go to design tab press and hold out click and drag and drop like this so you have we have this instance okay we could even name it better because it's component one I don't like this name let's call it percentage something like this now this one is percentage now let's now it's percentage cool I will cut let's go to my tests area I pasted it here I will paste it in any whatever place then I'll go to this part and run it again see 10 20 30 40 15 60. seven eight nine eight 100 so all the things they are kind of similar they are behaving the same way if you know what I'm trying to say so yeah now we just need to get all these elements and set exactly the flow that we want so this part of interaction and all the little details they are already done I just want to move a little down I don't want to make any confusion okay so now let's do this Frame how we will do something like this you don't need to follow exactly the same size but yeah so to speed up things I won't design every leader on detail but you can do by yourself so what we need to have is some text like this what is that yes I um what I did that wasn't the frame so let's come again I want really to have a frame like this otherwise it won't work the way as expected I will name it I will place the text into it I want to have the same background color so I can pick up from here then I select this title I press shift a then I have this um Auto layouts and I can have some fuel it's gonna be white I can increase things like these and like these can even go and have some board videos I can have exactly the same kind of stroke which is dashed and I can increase to something like this yeah it's pretty similar okay so next thing I told you we should have something like this right this kind of cloud so I will cut from here it's not a component but just some roping now I paste Intel my auto layout I change like this I can align things like this the color I will go with some dark gray like this then it's necessary to have some text so then you can pause the video and you can type the same title and text I'm using here I want to have this dashed um border like these two so we have some little Shadow over here so let's apply this little Shadow I'm trying to speed up things guys like getting the feedback you gave me and some of you said like oh you should speed up things a little bit and then you could create [Music] um tutorials focused on creating components and other tutorials focused on creating prototypes I'm doing this trying to speed up and to concentrate in things that you want to learn and then in the future I will do more component tutorials okay so I can copy three of them like this you can paste here can make it auto layout online like this can have a little more space just to be consistent and move things a little down like this then I will go to prototype tab flow starting point I will create a new one like like upload a load I'm gonna call it because now we can run in present and we have things separate like this is the example I showed you it's ready it's my base I did that before and then we have these tests we can run the test as well and then we are creating the final thing our uh really upload prototype flow interaction whatever so we can see things like this it's working great but now we need to replace these images right let's go to design tab select this one run the unsplash plugin again it's loading we will put another food image into this so let's type like um bye you let's try this one and I think that I applied in the wrong place yes for sure so I will click twice I will go through this image level and I will try to apply it Now it worked so don't forget second level let's try to see one more pie like this and let's come back to the Prototype C we move the mouse over it's working pretty cool yeah first part is okay great so now let's follow the flow um second screen we have this we can decide what image we want to drop here so I would I need to actually ungroup I won't use Auto layout over here same thing here listen group and then I will select this image and I will whoops when I move like this and things they break I can click here absolute position yeah then I can tilt a little bit like this and I will change the shadow like I want to have more contrast so something like this will be fine and something like this will be pretty fine then um I want to change like my border to Blue this stroke right then this title it's going to be blue in this second screen too and let's see what else yeah and these images they will disappear so I will change it to these layer pass through zero percent opacity okay and now let's see the interaction I did here just to make sure from here this element to here on red so select this one select this one connect like this and then not on click but on drag okay smart animate let's let's test what we just did move like this it's not working as expected yet but we solve this problem pretty easy because we need [Music] to have more things to do on drag smart unmade 300 so on drag smart admits 200 but yeah doesn't have any anything so let's see where are the images as you can see the images they are not here anymore so what we can do it is to delete rather than just applying opacity let's see yeah now let's work a little better but not yet the way it should be so navigate to Smart animation right so navigate to Smart meet Android it's exactly the same so let's let's keep going okay what we can do as well we can go to design we can select both elements it move them a little down so we can have a little animation as well see R so when we are moving we have this little animation yeah prototype tab on drag and then let's see from here to here we got this after delay one millisecond will reduce this tilt a little bit so let's skate here I will have this angle like zero percent yeah and connect from this screen to this screen after delay one millisecond and then when we run the first flow we have this Freedom we can go and we can come back we can go and we can come back things just work and I drop so let's see not yet the way it should be but we will get there on Dragon drag page itself doesn't have any kind of interaction let's see the component the component and drag the other components they are doing nothing drag or drag at 100 navigate to he's out don't break while pressing all right that's that's fine while pressing [Music] navigate through one 300 is out [Music] exactly the same we get you your difference is this in screen doesn't have anything from here to here after delay one millisecond smart animate let's then get here and from here to here it's gonna be after delays Martin animate as well in this case after delay smart animates one milliseconds word after delay because modern made one millisecond so in this case we are deleting this image and then we are going to drag and drop what we created over there for and then we will increase these drop shadow to display like something that got some really elevation like this and we can even have some little like movements to display micro interaction animation so this one here you remember we can copy from here and paste into here then we hit the up Arrow again and delete like this it's always good to text let's run again it's R so we can move not working that is expected yes because the first one we can move like this right can go and come back if we drop it will take some time we are going to do this next and then we go to this page okay [Music] um types expect let's press shift o to see if something is there and we are not seeing yet on the Range on Greg oh just realizing here this way back see this little arrow I don't click but see what I did because we need to have some thing like while it's on drag but while the the user didn't want to like come back let's go ahead go ahead yeah it's pretty okay on Dragon navigate should we even take some screenshots I don't know what's happening shift oh compare side by side sometime it's it's good on Dragon drag navigation [Music] exactly the same there's nothing different nothing different [Music] let's see the component itself [Music] while ovary okay then mostly let's let's we did while hovering mostly exactly the same no anything different so it will be maybe let me off yes of course yeah it's cool what we need to do is this image we need to cut because it's part of the auto layout then we will select the frame and paste but based over the framing because if we select the auto layout it will be inside but now it's working yeah no matter so let's run it again upload flow see the difference not not yet but the logic is uh yeah see it's inside I don't want this I really don't so I need to delete and it's just not select these Auto layout but select this Frame then I paste things then I move around the way that I want because when I paste into the out layout I'm like locking my image into the out layout so it's not not possible to to move things around so that's now in C we can move things around like this and then we move back we move like this and this and the interaction like hover then we interact with this background yes and then we like Drop and the upload starts okay same thing here see it's Intel I need to cut select the frame and not the out layout and then paste then I can even centralize like it is and then use my keyboard but this image needs to be free okay so run again see the difference now it works pretty much better we are really doing well believe me that is one thing that I don't like I don't know even if we should change it but it's the mask let's come here actually let's come here press shift o so you can see the mask but I don't want to I don't know how I can say this like the the mask it's bothering me a little I will try to [Music] I need to go to [Music] I need to change it here not bothering me for real but what I'm trying to say it is that we have this mask and I want to to have this mask not so closer to the border so I will try to diminish I don't know like four on top something like this to have this distance I will try this in here mask or three one more okay let's see if my plan worked so now you can see what I mean we have more space here like you know this little blue water around I prefer to have things this way and I even believe that I can move like to pixels like this in this direction and two pixels like this let's run again yeah see it's better I prefer this way I don't know if you realized what I did but we have some internal padding something like this okay and don't bother because yeah we will go to the next page before this animation stops so oh we will stay here let's see what I applied my test before like 6 000 milliseconds to go to the next page text frame so let's try to use something similar so the animation will run here a couple time and then you come here after delay 800 milliseconds okay smart and made so now we need to um design this part like on the way I can copy the text from here in my case I already have it a text you don't but don't be afraid I have this text to uploading your files please don't do not close this window I can copy from here okay paste it here okay then I need to design this um this element so the way I did it let me show you real quickly I did like some um actually I I got this text so text is easy icons they are easy to but yeah I told you I was not going to use any create component and explain things from scratch but let's try to make it really easier um let's run the font awesome icon you always can use it for free then type image so we can get some image like this then you run again for awesome icons then type trash next one okay now you got what you need so you can diminish size and then play around and organizing group things and so also for Source also okay and then yeah what I did in this part I created this element this Auto layout and I paste it in this part I deleted this part over here and let's see besides I need to diminish something like this okay so it's been uploaded so I told you you can like insert this icon apply the color have this text this size it's fictitious this trash bin but we need to have components right so it it's necessary we did those two components we need to bring them here so it's an auto layout like I told you and here too we have an auto layout I can for example produce for a matter of showing you you can duplicate this one and here inside a code for example not few but fix it and here fix it as well fixed then I have this control and I can delete just to have [Music] just to show you what I will do so I have this Frame I will apply some whatever color just to remember the space that I have so I can delete these two you do the same so yes I think that you got the point so you create some Auto layout and then inside another Auto layout and then apply some whatever color like here and let me just recap I'm doing this way because you guys most of you thought that I should go straight to the points and not do components in detail so what I'm doing what you uh suggested okay so now we have this loading one you can drag like this cut paste into like this you can diminish yeah but we need to have some gray thing below it so what I'm going to do I will detach this one right color I will apply some light gray like this and then it's pretty okay I will copy again I will paste again my components and as you can see I'm gonna have exactly the same size I will select let's see what I did [Music] it doesn't seem right the gray part but that's okay I will group both of them as you can see group I can call loading and then I click twice and I will change the 100 to one percent so I have this great part and then I have the blue part with which will increase and to get to this point and then we need to copy the first copy first part just press and hold out click and drag like this so we have this instance the one percent cut from here go to this part select this red frame paste into then we need to diminish things like we have this group name it loading not the frame but the group then we can diminish like this this one percent should be part of this like part of the frame not out but in into the load so I will cut from here select this loading frame based into [Music] let's have some thing like this then I select this red thing and I hide this call like this and try to align a little more and see how things go okay now we need to stay in this page for some time right because it needs to be loaded and then at the end it goes to the next page which is this one here also we need to have some close button right you can use whatever close button you want I showed you how to insert icons I will use this one here then we can select this absolute position like I did and we have this flexibility to move things around every time we need to use this a bit absolute position okay let's come back to prototype tab let's um yeah let's test come here press R so we drag and drop you wait a little bit it's taking too much time I think so yeah I don't want to have a lot of but see here it's working pretty well from one percent to 100 we just need to adjust over here it's too closer but easier to do like weekly twice twice again and we have this group name it loading we just come back to design and we move like this just a little bit I think it's gonna be okay and then the time that we are at this page it's too much time so let's go to prototype and then I want to make the user goals to the next one I will diminish by the middle like four thousand Let's test again it's always always a matter of testing doing and testing half of the time and then we got this loading animation okay pretty well and then we keep going next part it's pretty much similar the only difference it is um at this point we have this bar in the second um thing in this one will be in the last one 100 it's out of order I showed you before so you can fix it like one then the 100 should be the last one and now this icon will get this check mark so you know how to go there I will just copy from here because you know how to order how sure is that icon how to position it because like I'm quite sure that you have no doubt it will just replace okay so we got what we need and then we go we need to have one more scenario like if the user Clicks in this little trash bin or close the window we take the user to this part oh no the upload has been canceled you you will be redirect redirected to the main page I will copy it you can type from zero art so here I can delete this yeah something like this and then finally I will like copy this one I can click here and paste it will be pasted exactly like here like here and then we have this text like upload completed you have this check mark into so the color is green now um I will delete this Arrow I just want to have the background it's going to be great I will copy these texts and you will type like cheesecake PNG has been uploaded successfully send more files and the check mark I can copy from here to speed up things paste it here I can change its color to white and increase its size seems like I have some stroke I can make my stroke wide and even increased in your case it's not gonna happen because you are using another kind of Icon so don't think you will have the same situation that I do but if that happens you know how to solve things how you group you align and it's done now I need to do the interactions I didn't do okay we we stop it let's see from here to here after I don't know if they're delayed like 4 000 I don't know let's test move like these we wait and then after delay things they start happening let's wait to see oh no we need to increase like um six thousand Maybe let's run again okay this part is okay any problem this part has been a problem let's wait and see what happens we need a little more time maybe eight thousand the way it was before R drag and drop weight loaded okay okay okay [Music] it's almost there we need to wait even more I think so like a thousands Maybe but you got the point we need to test and see do and see test and test and test again cool perfect and then we go and follow the flow um after delay and let us accept this 800 mile seconds and see what happens [Music] it's necessary to be calm to have patience because yeah this is part of the design work there is no ordinary we need to test things and be patient okay but this page we are going to skip actually we need to oops we need to connect this one okay it's success after delay success because see this page we can get here only if we close or click that's right in this case we have two possibilities we can select we can click actually in this little trash bin thing so we can get here and using this icon as well we can get there here and if we click here this little icon we go to the very beginning of the flow and now we are done Let's test the last time drag we dropped we wait and then the files start being uploaded and then it runs runs runs and it gets to the 100 percent we see the check mark indicating and then we go to the upload completed just perfect now let's run the other case like when the user closes uh the upload what happens so I don't want to upload anymore anything so I go to that page oh no the upload has been canceled you will be redirected to the main page I can go to the main page oops I need to press R to run again from the very beginning and I have another possibility of closing things like clicking here I go to the same play place and then I close again and that's it guys I hope that you enjoyed this tutorial as usual I enjoy doing this and I hope to see you in the next one bye bye

Channel: Hands-On Design

Views: 497

Keywords:

Id: BIg6LDVihvk

Length: 65min 41sec (3941 seconds)

Published: Fri Sep 15 2023