Collaborate on Invoice Template Figma for Logistics with Ease Using airSlate SignNow

Invoice template figma for Logistics

welcome back in this tutorial we're going to design the shipping page so this shipping page will enable the user to you know send their shipping to the selected countries we're going to list in the form so let's select our frame and select the screen size we using so we update this to shipping and we select the frame and also activate the grid from the design system which is a four column count so now we're going to take text to and write send Goods so this should be 16 so I'm resuming so we take this up and let's right click and go to our plugins first for Icon then we search for Arrow going to make use of this so we take this and bring it here all right so select the two and align them properly and also make sure the text is into the center of the frame all right so we move on we're going to duplicate this text here all right search P global Shipping all right so remember the P part is our Global column so we're going to update that from our design system so here we change this to main do so now let's take a frame of which 350 by 15 so here we give it Corner radius of 25 and the background F of this color here so we're going to have a label for this form section so we're going to write let's duplicate this and write select country or select um item departure country item [Music] depart country so going to select this and also update it to 12 Med so this will come like this so let's duplicate this two together and bring it down then we're going to update here here and place goer so we're going to put you know default placeholder here is going to United kingom so let's put it asuk then here let's duplicate only the icon and bring it here then we are going to flip it like this or better let's rotate it to 90° so here is going to be a selection drop down that will enable the user to make selection so at the same time we we'll put a symbol here that will enable the user to understand in our country so um let's right click and do that quickly let's go to our plugins then we flat icons by free pick so if you don't have that you can do that go to manage plugins then you search for Flash icons by free Peck then it so so it's already there so let's choose this and add it to our frame and close it so now we take our scale through and scale it down and bring it inside the frame like this all right so you leave it there and make sure it's align so the scale should be 26 by 26 in dimension okay so now select this text and uh you know update it to to light 12 lights place like here so now what we're going to do is to also add it Place uh change this to shipping address so this is going to be the address all right this so the address here should just have a you know place order where the user can enter the address so enter address okay okay so we move it somewhere around here so we're going to copy that and take it down your ALT key select the two then you drag and here we are going to change the place the label to city and you please order to ENT City okay so remember we're going to update this two placeholders and update to FL 12 light pleas so we're going to duplicate more again so click select the two and drag it down so now we'll duplicate this one more again then we're going to reduce the the width to um 17 okay then we're going to modify the corner radius the corner radius of the left should be 0 0 okay similarly we reduce this one to to 117 and the corner just going to modify that of the right should be 0 0 so I'll take this Frame and keep it here and this down here so the frame is still too long so let's scale it down to 165 so that's better this one to to 165 all right so here the city we change it to State okay then the place holders should be enter Stitch enter stage all right so we're done with that we're going to duplicate this and take it here so update the label to zip SL poster code all right so in the place orderer will will be enter ZIP or poster code all right so you have that like that so let's copy only this button and bring it down then we are going to update to continue okay and change it [Music] to 16 so we all put it inside the middle of the frame now here also we're going to update the background F to our Global color uh which is going to be 010101 and you select the text let's add this to our design system so black all right then we have it before let black to so that we can refen it so here select details and also updated back to height okay so now this is going to be continue for the user to proceed so the form is going to have like two different sections so the first section will give the user this and while the second section will have another section that will contain all that so what we're going to do here is to duplicate the page and you know create this second page of the form but before that quickly Let's uh make this alignment properly so select the two and you know distribute the vertical spacing and make it for sorry five so make sure the text is um selected is positioned um 33 from the left okay similarly select this and that of the form form field and also distribute the vertical spacing to five and the position of the X should be placed 33 for X so let's go back here group them together come here also and group them together so similarly we select this as well to five okay and the position of the text should be you know Place 33 from the left so now select the two and also group them together so we do the same thing to these other forms it's going to be five and it TT should be 33 so this is okay as it this so we select the two as well and also make it five and here just make alignment to to align them then you group them as well so here come and select the two as well and also group them together we can now select these two and align them properly all right so now we're going to select them all together first align them excuse me let's select these two first and group them together then now we select all of them and you know make sure they within the center of the frame then we can distribute the vertical spacing to 1 so after that you can group them together all right so now we select this text and the icon also align them group them this select this text and make the vertical spacing to 15 now select Ro them together now select the first group and the form and also make it 30 and also align them properly case right so we are done with this page moreover we have to select this this then we drag them down a bit they are too going to be too close to the status icon status bar alternatively you can use a y direction to calculate that all right so this is okay for this page so quickly we're going to duplicate this page like this Alt key then you draw to the next the other side of the so here we're going to update the form and put the information required in the next uh page so what we going to do here is to delete um let's group it you can still make use of some of the items so let's delete this and the icon so update the text so items details item item details okay so here is going to be so here it's going to be there's going to be a an icon that will en the user maybe to close if they don't want to you know proceed to this page so there should be an option for them to close or to cancel so let's quickly go to our for for Icon and add that so let's do for cancel then you can make use of that uh let's make use of this instead so we bring it here down let me zoom in a bit on this Frame let's give it background F something like the off white we have okay so now let's select our skill through and select only the icon inside then we scale it down a bit and position it into the center of the frame skeleton again so the main frame select it and let's give it Corner radius of 15 so you cannot scale it up again repat so the dimension should be 30 by K all right that's fine so now you're going to select the two together and make sure they are properly aligned okay take the text towards the edge of the GD and similarly you bring this towards the Ed of the GD and leave it like that so now let's quickly on go this then we can edit it so here the label should be store name or suppliers name and order then here we update the place order to enter store name enter SP name all right then we can delete the icon we don't need it here then also delete L drop down selection icon all right so take this to 20 so this one will be tracking ID so enter tracking ID tracking ID so in bracket U so you just put random number okay now we're going to update the next one is item category so the item category is going to be uh selection drop down so we give the user so enter it select item category select item category so here the user will select the category of the I cam so here let's quickly come here and um you know copy that so then group first um it's fine let's just quickly get it from the plugin instead of going there to group it so we look for Arrow we going to make use of the onean all right okay so everything started in my page excuse me can't find that in my page so I'm quickly going to do that again plugins first for icons then we search for Arrow now we're going to make use of this all right so now I will take it and put it inside the frame of Select it time category and I make sure it's align into the center of it and the X position should be 300 okay so the Tex 20 this 20 also 20 all right so now we're going to delete this part okay we might need it again so we don't need to delete it let's uh take the take them to the two let's take them down let's select them all and take them down like this so quickly we're going to duplicate this out key now drag it down and we're going to update the label to item name all right then here we're going to you know update it to enter item name okay so you have to keep consistency we are capitalizing the world so keep everything uniform please item category all right so we done with there enter tracking as well so should we up to T So item name enter item name so here we remove the so let's duplicate that again select this through again and bring them down if it all right so here we're going to update to description okay it time description okay so this place is going to be uh a text box so we're going to increase the height a bit the height should be 100 then we reduce the Border Corner radius to 15 okay so here enter items description okay description now we're going to duplicate this to enable the user or the maximum corpor allowed okay so max 150 character m Max all right so we update this one to regular from our design system so detach it first then just update to regular okay so this one should be turn okay that's B now here this is going to be also a selection so the quantity of item here quantity so what is the quantity here so the user will enter here so we can put default as one okay so I update that to also regular let it be clear all right make sure it's properly align then here we also update it that is the labor to value and so just give it a one this thing let's say the person is sending from UK now so the value should be in pounds okay so here based on the S they made on the previous uh form that will determine what currency is going to be here okay so quickly we're going to update here so here is going to be left so just for zero okay now we are going to put the icon there for pounds from first for Icon so let's go for pounds so we add it to our design system and bring it somewhere around here so now take our scale to and scale it down scale it down again then we centralize it so this one we going to create regular right make sure is in regular in light so you update it back to regular and also align it okay so we'll add one more so um let's increase the height of this form to 8,000 okay so here we're going to select this two again and bring it down all right so quickly let's duplicate only the form here and bring it down Okay so we're going to update this place holder to add new item all right to add new item and update it back to 16 [Music] milon okay so now this will go into the center of the frame so align it properly then we're going to select this Frame and add some effects so we change the background fi to look a bit different from others all right so we give it parure stroke okay and the stroke should just be fainted to 20% opacity all right that's fine so when the user input all the necessary information they should be able to you know continue again and uh do you know complete the form but for us to just uh make it simple let's see um we'll just make it simple here and put submit but is very important to to put all the necessary information so you can take your time to to check all the other one so let's just put submit here instead of continue so that uh we will save time all right and after I make sure you align it again to the center so we have this as now let me zoom out a bit and now rearrange the forms properly so now we're going to select all the forms together and uh you know distribute the vertical spacing and make it 30 and also make sure there Center the line so we are done with this page all right so one more thing again let's take this here we want to have an overlay for this selection drop down right so that when the user select uh on this on the user tab on this the overlay will open for selection so quickly we're going to do that so let's take our frame and the WID should be 390 390 and we give it height of [Music] 300 all right let's make the height 400 okay so this will be the overlay and just SP um cont overlay as the name of the frame now select the frame and give it Corner radius of only the top to 25 and that of 25 okay so we're going to take let's activate our grid first before we move on so we go to our layout grien and add the four column layouts to it so here we're going to take a frame again and insert another frame just within the width of the so that's going to be 350 by 50 in terms of height okay now we also give this one a stroke so you add stroke now in the stroke this stroke will only be position at the bottom all right so in the selection drop down now we're going to add you know the countries the user is going to select all right or is going to send goes so quickly uh we're going to add some things let's uh navigate to this place and just copy these two icons here so drag it ALT key drag it and come and keep it here then we update this to select control okay for forget that so now inside this room that is where we are going to put the information before that let's quickly copy this and write available countries avilable countries you can ship to all right so here we going to update this to 12 regular all right so I'm going to zoom in so that you see clearly so get that back to 12 regular so now inside this form we put in we include our details inside this our frame so we're going to take a text and write United State of America all right now this text should be 12 medion 12 medion and it goes inside the frame like that okay so let's let go to our first for Icon right click plugins first for icons then we search for Arrow okay then we're going to make use of that Arrow just put it there inside the frame so right click again let's go to apply and go to feather Icon by free pick you already have it in store then we search for United States okay US flag you just add this to our frame so now here we take our scale two and scale it down alternatively you can use the dimension to do that so let's make it 25 by 25 we take it and put it inside the frame just by the left of the text so you can now select the text and the and and also align them so they spacing give it to five look can now group them then make sure they line to the center of the inner frame so this I control we move it towards the edge of the grid and also align it to the center of the frame all right so now this stroke we're going to touch it again it's too sharp so I don't want it to be too sharp so we take it to 40% of all right this way is fine so quickly we're going to duplicate this Frame duplicate it again and we can now update the you know the text and the icon so the second one let's update it to you United Kingdom UK all right and we're also going to update the flag so let's do that go to our flight icons again then we search for United king I just UK FL so we add this to a design system let's search for China again okay I can add this sech for Saudi Arabia as well then we add that so making for now all right so now Take It Outside the frame and scale it to what is the size of this was 20 by what 25 by 31 all right so we do the same thing here 25 tou1 so we're going to delete this and bring it there select the two text together line them properly and also leave their spacing to five then group them together aligned them to the middle of the frame all right so let's go to the next one and edit it to China so similarly we're going to scale this down [Music] to 25 okay so weit only the frame as well I take the icon excuse me take the icon inside first and also select the two and give their spacing to five align them properly and group them together all right so the last one we scale it down to so we're going to duplicate this one more time update the text to Saudi Arabia all right so then you also range your update the symbol to that so now we select the two together and um they spacing to five let me see the icon the flag is not in the frame so we have to put it inside the frame select the two together and they're spacing to five so line them together and group them together all right so we almost done so what we going to do quickly is to select all of them and make sure they Center the line and distribute the vertical spacing to be given so we just take it to 15 so now select this text and this text on take it to 10 and group them together all right so select all the form select group them together then select this and by and the spacing to 15 okay so that way we are done with it so this is going to be an overlay if the user select then they will be prompted to the other side of the page so one last thing you're going to do now is before we connect the Prototype so this is a default as Uki now based on the selection user meil this screen should be updated all right so since we have four selection we're going to make four duplicate copies of this that will now replace the this place holder here so quickly we're going to do that I'm going to zoom out a bit then take one to to the right all right so you take it to the right now let's make three more duplicates all okay then you draw I'm going to take this form again to the right so that I have P select this Frame and that to the right again then last all right so here you're going to update this to UK uh this is going to be United States so it's going to be China and this is going to be Saudi Arabia correct so we are done with that so next we are going to update just the place holder the default Place holder that is there okay so only the icon is going to be replaced so you delete it and here is fre United States United States okay so we select and go to our plugins flat icons now we set for US US flag so we'll go with this we add it to our design system then this was what dimension was this 26 by 26 so select this and scale it to 26 by 26 all right so you take it and put it inside the frame here and align it properly okay so what is the spacing the X position is 19 so you can keep it at 19 too so that it be one across all right and make sure you line it so we also do the same here we're going to update here to China then U could change the flag to to China so delete it right click go to your flat icon as well and search for China China then we're going to make use of this one add it and scale it to 26 by 26 as well all right so we take it and put it inside the frame that is the first frame yeah and the dire the position from the direct left should 19 as well so the last one is going to be S here so we update to S Arabia and also update the flag here you need to select that and delete it then you right click and go to your plugins then your flat icons and we set for Saudi Arabia so the Saudi we're using is going to be circular this time so for consistency this is one we use right so we should use this these are similar so here we scale it down to 26 by 26 then it goes inside this Frame as well and here to r that 19 we're using yeah so make sure you align it properly all right so now quickly before we proed let me preview let's preview one of the frame and make sure everything is correct okay so this is fine but the icon here for okay right is there okay so now we're going to close this then will now connect our prototype okay so I'll zoom out a bit and uh we will now do the prototyping okay so what we want to achieve is if the user t on this select country the Prototype should open sorry the overlay should open and then you'll able to be navigated back to the screens we just so now I'm going to zoom out a bit so let's bring the over very close select this three and you know move them to the right it so we keep our value here okay so now we want this value to open iFly tap on the select country right so we only click here and put it over there on top overly then we want it to be [Music] manual I want it to be somewhere around here okay so you put it somewhere around there all right so once you user tab what do you want to happen you want it to change to that place right so now we're going to add another interaction if user tap on this United States I want it to change to United State which is this right on top navigate to United States all right so I we come to UK user t on it they should be navigated back to UK right so go to the next one user tab on this just go to China and user tab on this there go to Saudi Arabia all right so now you want it to be interchangeable to be you know interactive so irrespective of the page they are they can switch back right so now if user tap on this selection drop down again this overlay should open and she open at the center here okay so now if they make their selection once they make that selection they tap us excuse me they tap us they should be navigated back to us right and if they to UK here I need the T you know China already China I the this already there okay so we done with that so let's go to the second one which is China so if the user tap on it this overlay should open as well and should open somewhere excuse me over I should open somewhere around there okay so now once they make their selection they should also be able to go back to where they want to go back right so we close this and come update this so they in China we don't need to do that of China so here they can go back to us here they can go back to that and here they can also go back to that all right so the same thing similarly we do that of um United States so e tap on it this overlay should also open and you open somewhere around there excuse me select this then you position it where you want it to be position here so that is that so we are done with the Prototype so now let's zoom out and go and check from the main page of the shipping okay so now let's select the shipping page and just preview to see the result so if I tap on this this overlay has open like this way then if I make selection is there if I Mi this it back to United Kingdom take me to China and if I take me to Saudi Arab then from Saudi Arabia can also go back and make another selections that all so what of if I'm in China so some of the overlays are not fully interactive so we are going to you know do that fix that so one thing again what if the user open the overlay and doesn't want to make any selection maybe they want to go back so once they tap on this it should close right so select only this icon and add Interruption then on top we put to close overly okay that way the user can close overly so some of the uh prototype are not fully working like that of China so let's go to China and see what we need to do so China you can see is navigating here ins of the overlay so it should be open overlay that is where the arrow was coming from so we done with that let's go back [Music] to um UK to that one to Saudi Arabia should be here coupon over all right so and let's position it prop so I think so far we're good yeah okay so they all complete so this is the second P of the shipping so update this to uh shipping page two all right so now uh the last thing we're going to do is to put all of them into the parent frame that have the menu icons and all the chart icon okay so quickly I'm going to zoom out then back to design layer and I'm going to select all of them together just you can drag and select them like this then we take them to the right a bit okay so now we're going to copy the parent frame that has all the icons status icon and menu then we just put them inside the frame so out key and RW to make a duplicate so make sure the parent frame is selected and then you drag it like this okay so now you're going to select the inner frame only and delete it then we go back you navigate to this side and bring only the first one and come and put it inside the frame to put it here um quickly before we put it we're going to make another duplicate for other ones so let's put this one inside here then we line it purply all right so this way this one is solved so duplicate this one then we go and bring another screen again I bring the overlay and I think they are too far so let me select them or and bring them closer all right so we take the United stat put it in the frame align it also okay let's bring the value down so duplicate this again bring China put it inside and align it all right let me me duplicate this again Alt key then you drag and let's bring CD and put it inside the frame then align it and then lastly the page two will come here also align it all right so since the overlay comes immediately after the shipping page right so what you're going to do now um from the shipping page we going to update it pleas so this is shipping P one all right so this is uh UK this is China s so this is going to be um us sing then um shipping page to page two all right so the overlay should come immediately after the uh shipping page one so we select these three together sorry and just move them closer to page two then overlay can be pre here all right so we're done so let's select the page one and preview again to see the final result so should have something like this so you can know check the prototype to see if they working all right so that is done and if user click on continue this should be prompted to the last screen right so that is uh the last prototype so we quickly connect that so we're going to zoom in and connect that to the last screen so here go to our prototype this continue so user should be directed to the second shipping page on top to shipping page right you see in this container to shipping page this container to shipping page right then um let's quickly come to the first one again just continue to the shipping page too all right so now let's preview the shipping page two and make sure it's SC so it's not scrollable so we're going to fix that so the shipping page to should be scrolling will select it and vertical scrolling the parent one to Vertical scrolling so I'm seeing one icon that is there it's not supposed to be there so we're going to delete it so let's preview the page two again and see it's not SC Li so user now see the submit button so there's this icon that you see under tracking I'm not seeing it but I don't know where is hiding so let's go back and see where it is in the page two it's under here but I can't find it so I will take my time to do that so now we done with the shipping page so in the next lecture we're going to design the conversion page see you in the next lecture