Create Your Figma Invoice Template for Supervision Effortlessly

Figma invoice template for Supervision

hello welcome to my YouTube channel in this video I'm going to be showing you how to design this amazing invoice so this invoice is something that if you can export in PDF you can export it as PNG JPEG and you can print it um to the format you want so in this video I'm going to be showing you how to design it using feed map prototyping tools so you don't really need to have an a software installed on your system before you can design this you can just hit your browser and go to fitment.com and get started so without further Ado let's get on with designing don't forget to subscribe to my YouTube channel hit the notification icon so that anytime I'm dropping a new video just like this one you will be notified thank you okay getting started we need to select a frame we are going to be selecting A4 and that is the A4 size paper for the invoice I'll rename this Frame to the invoice like that and as you can see I already have all the colors I'm going to be working with I have my primary color I have my text color so um I'm going to be adding um this style right here click on this plus icon sorry click on this um four dot here create a new style and this style I'm going to name it text color just text okay and these is not Pure White so I'm going to name it alternative color or out and things I'm going to make it the secondary color Circle increase time just like that so we are going to be having the background color is going to be uh purely White so this is what I'm going to do the next thing for us to do is to have the background to design the background which is what I'm going to be telling you now I'm going to draw a rectangle from this rectangle this rectangle I'm going to change the color to the primary color just like that so double click the the rectangle you see this Edge move these to that edge just like that so right now let's just have let us see the layout grid so um let's create a layout grid click on this plus icon change from grid to columns from five to six and the magic should be 40 degrees that's like that oh expand this down [Music] so I move this that's making sure square roots okay [Music] I will have another background video here it's a new rectangle take it that way all right this time around oh let me expand this so I'll send this one to the back now that I have sent this to the work I will expand this it will start from here let's double click foreign this is supposed to be the secondary color so I'll choose the secondary color that's now select the invoice I'm going to create a row and a row layout break click on this Plus from create change it to rows the same thing we did to the columns we are going to be going to the rows so how the count is going to be six instead of five then the margin should be 40. leave the capacities which is 20. so just like that now I'm going to select these backgrounds select those backgrounds Ctrl G to group I'll rename the background to BG and I'm going to lock it so that anything I'm doing right here um won't have a background being distorted it is time for us to start creating the contents that our invoice is going to carry so I will have the invoice invoice Title Here invoice and I'm using interfont family I'm going to change this to bold instead of 12 I'm going to increase this font size to 48 remember this to create the invoice is going to stand again I need something like a logo right here I need a logo let's make this 40. 40 pixel so let's name it and logo select all change from 48 to 32. so let me let's make it uh 24. then we are going to have different timeline and top one 16. foreign this is going to be the look icon so Ctrl G to group everything I'll rename this to Google I'm going to change the background of the icons then the BL I'm going to change it to different color and we are doing well with our invoice so far so since we are true with this let us move on to the next thing for us to do so another thing is our invoice invoice details part of the content we are going to be creating is invoice details for example we have uh the text here make sure this text is aligned to right so we are going to have new Voice number is the inverse number is going to be hashtag one two three four five make sure this is not bold make it regular clear space no yeah and we are going to have the date let's say the deities uh what's today's date today's date is 18th [Music] of September 2022 9 so with this let's give its line Heights nice so far we are doing well the next thing for us to do is to get the client details going to duplicate this move it downward I'll call these lines details since this is a heading going to be holding it let's hold it then you can have all the client details from here right here customers name and let's see John Doe make sure this is aligned to left name is jumbo phone number plus one two three four like that address [Music] I think this is okay because this is enough yes um next thing for us to do is to create a table since this is an invoice we are going to be needing a table to hold the serial number the product details the price and maybe um any other thing that we need in the table so we are going to be selecting a frame come down here draw a frame from this edge of the grid to the other edge of the grid and expand speed yeah just like that expand it down hope it downward okay so this is the table let me change the color for you to see change the color to this I'm going to Off the Grid for you to see what time is so this particular area is going to cover the details like um the the item details in the invoice this is going to carry that now that we have the table I'm going to change the color back to White change color back to eight no let's uh change the color back to White just like that but this time around I'm going to give it a stroke like this but instead of having this stroke to be this way I will change this stroke color to my secondary color just like that then next thing for me to do is to add another frame inside to here to hold the table heading just like that it's going to hold the table head so I'll fill it with [Music] um text color affiliate text color make sure this Frame up here I'll rename it to table then this I'll rename it th which means table head then this will align it and top and or align it so I'll outline it to applying horizontal Center then I'll give it I'll give it a stroke and this stroke is going to be secondary color instead of inside I'll bring it outside that being said this is what we need okay we need serial number select all instead of 16 40 let us pressing if it's zero then the nine Heights if that's this okay now that we have serial number Ctrl D to duplicates we need item name or item description product name Out product description now please I'm going to be using project name then after product name I need quantity qty qty then I need total total or carbs products select for and IDL just like that since product name is going to be a bit large I will move this one closer to Twitter then we need something else here right here which is the columns or the rows we need to identify it so what we need is an identifier to identify the serial number which is the columns columns graphs and the row so uh I'm going to be selecting the rectangle select the rectangles I'll draw a strict rectangle right here and I'll expand this so I'll change this color to change the color to Alternative color not integral values inside the field not inside the table head make it outside just like that and the same thing I be able to quantity Center quantity select both and our control G to the group as I'm grouping I will name this as a columns coulombs I need a unique identifier for the rules also or select the rectangle tool Troy shape across the table I will change the height to 1. foreign D to duplicate we need to get ah yeah this is going to be 40. the space between two rows going to be 40. foreign D multiple times yes just like that I'll select all this and I'll Control G to proof now name it row now we have a template for our invoice sorry I made a mistake right here this we are supposed to have price right here it's supposed to have price the price of the goods on cups price I'm going to tell you this fries price should carry this one and the total will carry the remaining quantity over there just like that so the table head is going to be in it's going to be bold let's board it instead of regular Quantum Code we should um this line spacing we should reduce probably reduce it to zero same thing goes there could use it to zero move it to the right just like that now that we are true with the body of the new voice we are true with the heading of the invoice the next thing for us to do or to work on is the footer of the invoice so while we most times today in the future of an invoice is a Society total right Twitter right here the price let's see 120 dollar then we have if tax is inclusive you can make it v80 value added tax maybe 10 cents then if there is a discount [Music] maybe discount is 20 cents and space it out 20 now let's move this right here we need the totality [Music] so I'm just total let's make this medium online right and discounts same thing and the total [Music] [Laughter] SATs is 100 for easy calculation V8 is 10 cents that's one time now the discount is 20 that is probably 90 US dollar to 30. which is the amount table this total as we call this we're going to make all these select all instead of this you know block we are going to use our text color foreign message right here thank you for your patronage [Music] on the online left [Music] then we can have an office address you can have an office address well let's just say address let's see um phone which is the business phone number [Music] on it can be close two three four let's have your phone number is then you can have an email also I think this is enough now we have come to the end of the tutorial now we have our invoice right here now that we are here we need to edit um our invoice to make it look more presentable now that we have everything done so I will be coming back to yeah I'll space it out a little bit more so I'll uh for me to get a very good layout let me um on the column grid in moving this to this Edge just like that now the dates also will move it to the edge now this client details that will increase this to span through too great as for this [Music] we are going to cover just two great dragon [Music] today on the safe side just in case the name the name of the client is going to be longer than what you expect I'll select this align it to right then I'll space it out a little bit close this space it out for example my name is a very long name so if someone is going to be writing my name sure need a very good space client's name and client's phone number that is enough let's see if we can space out this is that even necessary not at all foreign medium let's make it right back let's make this one let's say regular but the total is going to book foreign we've come to the end of this video If you learned something please subscribe to my YouTube channel don't forget to hit the notification icon so that you receive you'll be notified anytime I drop a new content thank you for watching