Create an Invoice Template Figma for Engineering Effortlessly

Invoice template figma for Engineering

hello everyone my name is Matt and in this video I will show you how to create the simple UI wait on the design system for figma if you got the zip file from Gumroad you just need to unzip it then drag and drop this file into your recent files in figma open the file and now you have access to all components and styles available in the library here you will find 43 components with states that give you more than 2,000 UI elements to work with in order to start designing you just need to go to the pages menu and create a new page here you can access all components from the assets panel just search for the component then drag and drop it into your canvas you can also access components from the instance menu by selecting the instance and then changing it to desired component you can also go to the first page copy desired component and paste it into your design page it's up to you how you will use it if you want to apply undesigned styles to your components you just need to click styles icon and select the style you want to use the same works for text and effect styles if you are using figma for themes the pro license you can import the UI key to a new project in your organization then open the file and click on the assets panel here you need to click on the theme library icon and click publish two times after assembling is done you can access and design system in each file you create in your team library ok let's cancel this for now because I've done it already let's open a new file and I will show you how to enable the UI kit for the new file in your team library go to assets panel and once again click on the team library icon here you just need to enable under design UI kit and that's all now you have access to all components and styles from the undesigned system that we previously published in our team library okay now that we have set up the UI kit we can start designing okay I've created a new file in my own design folder in my team and enabled on design UI kit let's start by drawing a simple iframe let's select a MacBook Pro which is 1440 in width and the first thing we need to do is the Left panel so I know that the menu items in in my menu component is 200 in width so let's just make a background for it it will be white and with it it will have an out outside stroke and here in color styles you can see that there is a short tip which color is is for what what type of content so I know that this will be a border so I can select grey number five like this and set it set it to outside let's move it to the top left and span across the whole width height like this and then we'll need a logo so let's just let's just grab this logo from here and let's move it over here now we'll need some menu items so let's go to the assets panel and search for menu and here I need the menu with three options there's also a nice a nice thing in the menus or drop down menus because if you enable enabled your grid layout a bit then you will able to see this red lines over here so after you resize it you can see that you have multiple options to choose from so I just need three so I just need to move over here and if you align this this component line with the red line from the grid you know that this is a forty pixels it's pixel perfect right now okay we'll also need a one come one more component for the for our menu just this menu without options over here so let's select it from from from our assets panel like this and I will need two items over here two items over here and also one item over here and I know that for my design I will just need to hide this drop-down arrows we can just simple click on this icon over here to hide them and now let's select this align this tidy up and press 0 over here and now we have like a nice concise menu so let's move it to our position over here and then let's go and make it 64 from the top ok right now I need some names so this will be our dashboard reports here will have documents invoices drafts templates customers settings and help and come duck it okay we know that we'll be working on the invoices panel so let's select this and from this instance menu we can press select it and it change its state so it's like right now it's selected and active okay right now we need to change icons we can also do it with instance menu so let's select this icon and go to instance menu and then we need to select and design system you like it go to icons icon and here I think it will be in data it was our pie chart and then the color we switch to the master one so let's just switch it back to the primary text color and the same for reports let's go to icons then data and it is a rice icon like this okay the documents application I think it was filed done customers will be our user icon settings will be our setting icon setting okay and our help in contact I think it was in the suggested icons check info circle yeah that's the one okay and let's align the logo with with the icon from here and we are good to go okay now that we have our Left panel ready we can go and create a header let's create a rectangle and move it over here align it with the left like this and we also need one more control-c control-v to copy and paste let's just switch this color to gray one and let's keep the height at 64 pixels this one let's select background color okay we'll need a button with icon left for our ad invoice so let's just search for this button button primary medium solid and I think it will be let's just use the default one yeah this is the one and right now let's change the name the label sorry new invoice and also we need to use a nice plug in for figma if you if you want to resize this without plugin we would have to resize it like this and then search for the sweet spot where there is like 15 16 pixels in padding so like this so you can see that there is 16 pixels over here and 16 pixels over here but we can in stead of resizing this manually let's just do it select the component in order to do it you need to a plug-in called button resizer then click resize button and right now you can see that there is 16 pixels over here and 16 pixels over here so it saved us some I like 5 seconds but in when you are doing the whole system it will save you hours of work I think ok we have now I have our a button and let's create some separator right here let's press ENTER and then let's switch it to 32 pixels because this is the height of our button and from the colours panel let's select dividers color we have divider over here and we'll also need avatar let's search for avatar and I think the avatar will be medium and we need to insert a photo inside it's also 32 pixels so let's go and open the image panel and I can grab and move it move it over here I think we should also add some stroke to it inside with the border yeah so it's easier to distinguish the background of avatar with the background of UI element and then let's search for drop down drop down trigger let's take the default one and here let's change it to my username okay and let's resize it also with pattern resizer we can now click run last plug-in and it resizes nicely containing the D padding so let's just switch it to primary text I think it will be better right this okay we can group them together and also here I think we should tidy this up and keep 40 24 pixels between them let's group it I'm using 8 point grid so I will just make it so it's 64 pixels from the left and from the right over here just to help us design I think we can move this guideline over here like this so we know that it's 64 pixels between the this line and the end of the frame okay now we'll need a text for our title let's just go and type in voices and right now we need to change the style I think we should keep it 30 pixels and let's align it to the left we should also switch this to title color okay now that we have our title we should also keep this 64 pixels from the left and let's keep 24 pixels from the top there is also a nice thing in figma if you are new using your arrows for if you if you hold shift and arrow it will it will move eight pixels in the default figma setting there there is ten pixels so if you want to change this you just need to go to the menu and search for a new amount and then switch the big nudge to eight eight pixels so now that you hold shift and arrow it will go with eight pixels okay we'll also need a tab tab panel just down below so let's search for tab and I think it was if we want to use the whole component let's search for group and now I know that we need a pain panel let's just select with the text only now we have this large component so in order to change the names for from the tabs we just need to select this item and let's detach instance for now okay and let's ungroup this for now so we have this line over here and we have tabs over here so let's just change the names and we want this won't need this one so let's just delete them and once again button resizes as button resize L plugin will come in handy so let's just select this and resize them now they have the same the same padding so let's just select them tidy up and I know that there is two pixels between them in the master component so let's keep it like this now we can just group them and let's move move this below invoices a title and let's also keep 24 pixels now that we have have this align we can just resize the background like this and let's keep this line over here let's bring it to the top let's align this to the left like this okay we can now holding out we can move this line over here and let's resize it to 64 in width so we can move it over here and one more thing we need to keep this line over here like this ok now that we have the header we can start doing the content below so on the left side I can see that there is an search input so let's search for input icon left medium the medium is 32 pixels in height okay and I think it will be also normal input okay input this will be without label icon left normal so this would be no no not this one but without label no label we can quickly grab the field one and change it to default like this okay let's change the input placeholder to search invoices and let's move with 32 pixels below okay we need four buttons with a left icon so we can quickly grab this bike on by button let's just move it over here control C control V and we can switch this with instance menu so let's just go to button it will be solid button medium icon left outline and the default yeah we can use this from the this panel or from instance panel it's it's up to you how you will use it so we need four button four buttons over here let's change the labels mark spade okay print delete okay and once again button resizer it's my favorite plugin for figma right now let's just switch icon so this will be suggest that checked circle this will be suggested close circle print will be print print us printer right here change the color and delete like this okay we have four four buttons we'll also need one more separator let's just move it over here and we also need two buttons without icon so let's search for button icon only outline medium button solid medium icon only okay let's just grab this one quickly and let's change this to default okay and I think we should also change the roundness of this button to be exactly four pixels I like this one so let's just switch it and let's copy okay we need a filter icon and also I think it was a menu icon more I think yeah this one okay let's just quickly align the buttons we can do it with a line panel let's tidy up and keep it 8 pixels between them ok let's group them let's move this line over here we can group them too and let's use the same technique and let's keep 24 between them ok let's move it and align it to the right and right now we have we have a table panel over here so next thing we need to do is to search for the table table group ok and let's select the basic medium one and right now we need to also detach this instance and let's ungroup it for now detach instance this is a group okay Anton group now yeah let's just delete them for now okay and let's switch label names customer invoice ID so here will be date amount also need status okay this we can delete let's switch this to view okay let's align to the left let's bring the status to the right maybe you can make it smaller like this okay there will be amount so let's just resize it a little bring it to the right okay I will do amount right aligned because it will be easier to read dollar values like numbers okay that will be left aligned okay let's just bring it over here here will be I'll invoice ID and customer like this okay as you can see this item has two borders on the top and on the bottom so in order to keep them keep all items from here let's just group them in the same position we we have two options to do it so let's just bring it so you can see that the bottom border the border is now aligned like this and when you press control D now you can duplicate them but if you for example want to be quicker maybe we can you can just do it like this and then select them and here type - - one pixel and it's the same like we did previously okay let's let's just duplicate them so there is like a nine okay let's bring the table to the top let's keep 16 pixels here okay and now I think we should also use a plug-in for figma and there is a nice plot plug-in called called content reel and I will show you what it what it's doing so let's just select the company name here and go to plugins and click content reel right now we can just click companies and as you can see it feels your content with example companies and here let's just select invoice ID and we can take a random number from this from this panel over here okay we can do the same for dates let's just select them died 10th time to just delete the time okay and we can do it the same with amount so select numbers and we can show currency maybe we can delete this okay apply and we have the amount over here in order to create status we'll need a tag item so let's just search for tag and let's just use this green one and let's switched default State like this okay and right here we can change the name to paid the label to pay and of course let's use our button resize our plugin let's just copy them to each cell like this and we can also change label for example if the invoice was not paid we can just renamed it to unpaid let's select this and go to plugins and resize it once again and we can also change the color let's go to instance panel and go to tag colorful this would be one the red one like this and we can also switch this to panting so let's just switch it do and thing use our favorite plug-in and then we just need to go to instance let's like the orange one yeah and you can see that there is a nice table we can also make pagination let's just search for pagination pagination group more and we can move it over here like this let's keep it 16 pixels we can group our table like this let's just delete this for now there's one one more thing let's align the logo with the center of this header right here as you can see let's just change this icon to plus icon outline suggested plus and change the color to white okay that's it if you want to get undesigned system for figma visit the link in the description make sure to subscribe to my channel because i'm planning to require more figma tutorials in the future thanks for watching