Create Your Perfect Invoice Template Figma for Shipping Easily

Invoice template figma for Shipping

hi all so in this video we are going to create this invoice card where uh we are going to create this kind of a header for our invoice the two ends from addresses the item heads for which we are going to charge and the grand total so so what we're going to do is we're going to divide this entire design in three parts four parts uh first will be the header the second will be the addresses the third will be the table and the fourth will be the footer so let's start by designing each of these parts one by one so let me take you back to the design file so this is already a card which i've already designed but let's start from uh from scratch so let's create this this part part first let's call it invoice or some random number that will be our invoice number the second will be the uh the date let's take today's date as fourth of july that's fourth of august 2020. let's make it short smaller than the actual headline so let's make it 14 pixel and let's make it a little subdued this will be a text black color i'm going to combine select these two and make them auto layout by pressing shift a i'm going to select these two and then this auto layout frame and stretch them left and right so i'm just going to call this as title or maybe invoice id then i'm going to bring a primary button from my from my components and i'll just copy this one sorry this double dollars uh i'm just going to paste it and let me get rid of this dollar i don't want this plus icon so i'm going to hide it uh so now we have our invoice id and button together so select both of them and press shift a to me add to included in a auto layout frame now let's rename this frame to invoice header i want to have some padding so let's add some padding 24 pixel left and right 16 pixel top and bottom so once we have this let's add our field colors and i want to uh border bottom to this frame so to do that what you can do is you can just add a inner shadow uh make the blur to zero x is zero and y two minus one and this and this sorry and this uh black color to be of 16 so that if you see there's this border bottom for for this frame now uh what i want to do is uh now that once we have set our paddings on left and right and top and bottom i want to get rid of this auto layout so i just remove the auto layout now and i want this button to always be on beyond right so whenever i want to resize this frame i want this to be always on uh always on right so i i'll select a button i'll just add a constraint to as right and this uh vertical constraint to be uh in center for this as well for this text as well so if i change the height it's going to always be vertically centered and if i want this to be horizontally resized this button will be always on right and this will be uh this text will be always on left so let's fix the uh height i'll just make it 104 and the multiples of eight uh i think the spacing between these two can be as small as 4. yeah ok cool so this is our header now it's it's already now let's create the second part where we have we want this these two addresses to be uh to be present okay so i'll just duplicate this by shift and drag i'll just call it uh from address and i'll just call the the next one as to address now let's use let's make use of content real that's a plugin from microsoft to uh add some full names that would be two names and we also want the addresses so just take the full address us4 address okay cool uh let's make these even smaller make these about it is about 16 pixel and i want this to address to be right aligned that's perfect now select these two and make it in the shift hot shift a auto layout mode always push them on top and let's call this frame as address and once we have auto layout let's add some spa spacing and padding similar to what we had here so let's add 24 pixel padding and 16 pixel on top and bottom once we have that uh let's just add a feel background white and now that we have our padding and speed vertical padding and left and right pairing set let's get rid of the auto layout and push this always to the right and this will be always on left now when i resize this to match the frame on top it's going to it's going to make sure that this is always on right okay perfect nice so this is the address frame now what i'm going to do is i'm going to select these two and press shift a or auto layout and put them in auto layout frame i'm just going to call this as invoice and i don't want to have any kind of spacing over here so i'll just put zero here now okay we missed our two and from headings so what i'm going to do is i'm just going to add i'm just going to duplicate this push push it to top i'm just going to call this two and similarly for this i'm just going to call it from let's make their font sizes smaller 12 pixel okay and i'm going to increase the height of this now now remember that we had uh the constraints set for these two texts uh these two name and addresses to be well to be right and vertically vertically aligned at center so that's why whenever we resize the frame it it makes sure that the entire content is uh is vertically center aligned and these on this one is pushed is always pushed left and this one is always pushed right so perfect so this is our address frame now let's create the second frame where we have to create this uh third frame where we have to create this uh uh this table now let's just start adding these table headings called as description dscrp yeah second will be rate third will be quantity and the fourth will be subtotal perfect so we have our four table headings uh let's make them 14 pixel with a heading textile and before we before we create this table let's add our grid lines so so let's let's see so so the total width of our entire invoice is of 636 i'll just make it about 640 okay uh now if you see there are little misalignments it's because uh we haven't made this uh stretch left and right both of these frames so what we're going to do is we're going to just uh stretch them left and right by clicking here the same for the next frame perfect so now this is both of these frames are 640 if you can see and what we're going to do now is we're going to select these two sorry we missed adding a grid lines here so let's add these green lines and now this the second grade line will be exactly at 24 pixel as you can see right perfect so what we're going to do is now we're going to align this uh this description text to the exact 24 pixel from this age okay so now this is perfectly aligned as you can see and once this is set and for subtotal as well what we're going to do is we're going to align this to to be exactly 24 pixels from its right okay i think this is set yeah that's it so once this is set i'm going to select all of it i'm going to press shift a and i'm going to create an auto layout free i'm going to add 24 pixel from left 16 pixel let's say let's add uh yeah 16 pixel from top i'm going to add a fill color perfect i'm just going to call this as table header okay and what i want is i'm on the same border bottom so i'm just going to go and add an inner shadow with blur as 0 y as minus 1 and black color at 16 perfect so i'm going to just push this into this auto layout frame called invoice now it's going to fit perfectly okay so we have we still have this uh on auto layout so i'm just going to remove this uh and what i'm going to do is i'm going to select each of these these three columns and push them always to their right so whenever so if i just take this down and if i just try to show you that this is always going to move ingly uh the size of the frame size of the parent frame perfect so now i'm going to select these four columns and make sure that they are always vertically aligned vertically center aligned yeah so i'm just checking all my constraints if they're right now they look good so what i'm going to do is now i'm going to duplicate this by pressing command d perfect now i'm going to select these i'm going to apply a different style of textile paragraph 200 now if you see they they might have made a little bit of misalignment so i'm just going to select them and make them vertically center aligned perfect i'm just going to copy this text called dashboard design paste here oh okay this was not right left aligned so i'll just push it to exactly the place where it should be 24 pixel from left i'm going to copy this rate as well you can also use a content reel to fill up these rates perfect perfect zero one i'm going to copy one more time i'm just going to call this logo design i'm just going to copy this read perfect perfect okay now we're going to create this grand total okay so to create this uh let's let's copy this table header and push it down and what we're going to do is i'm just going to remove these four columns i'm going to call this subtitle as subtotal as grand total and make it a little subdued maybe more lighter and what i'm going to do is i'm just going to i'm just going to increase the border bottom by -2 okay perfect so we now have a grand total row and what i'm going to do now is i'm going to add this one with a signature and all so i'm rather going to just duplicate this address field push it further down i'm going to remove this one we don't need that uh we don't need this oh we need this uh we don't need this uh i'm just going to add a grand total it's 886. perfect and i'm just going to add 18 tax statement 18 tax included let's make it a little more like red okay just make a little this entire frame can be smaller i would like to keep it in the multiples of 8 the height and what i'm going to do is i'm just going to copy this signature image in this frame make sure it's center aligned yes and perfect that's it so we have to add this dotted line now now remember that dotted line can't be created uh with inner shadow so i'm just going to what i'm going to do is i'm just going to check the size of this entire frame it's 640 so i'm going to draw a 640 width line make it subdued a bit and i'm just going to add dashes to it like with two comma five i'm just going to push it into this auto layout frame now it's exactly there and at the bottom i want this see more on the website so so let's do this let's add a text see more on .searchinggalvest.com so that's my website and what i'm going to do is i'm just going to push it into this into this auto layout press command if you want to in one sec what's happening yeah perfect so i'm just going to increase the height here and make it yeah perfect and this has to be on top okay cool so this is done uh now what i'm going to do is i'm going to add a couple of more spacings from left and right and top and bottom so let's add a field over here for this entire parent frame invoice okay cool now let's add a couple of margins 16 okay cool and i think we are perfectly aligned yes except this frame i believe because it was not on stretch left and right so i'll just make it stretch okay cool perfect now if i took about 24 layer this will be a perfect line let's just add a border now that's a perfectly crafted advice card thank you so much uh if you think this video has helped you uh learn new techniques to design uh ui please hit like and subscribe to my channel thank you so much