Power BI Background DESIGN with FIGMA

struggling with your power bi reports well not anymore today guys today I'm gonna show you how to use figma to create awesome power bi designs [Music] so before we get started real quick this is the final results that we're trying to achieve here this is the green background and I'm gonna share with you the report as well so you can follow along as you can see here this was created with figma so really powerful and then let's go over the next one here we have the same report but the background is black the first thing you need to do is to create your figma free account so here are the steps you just need to follow the steps here you need to have an email create a password and then you are good to go when I share with you guys this link as well so you can follow along I already created my profile here and this is the time folks we're gonna be creating our green and black backgrounds let's get started once we are here we need to create a design a new design here click right here and this new window pops up our first step is to create a rectangle check this out and then let's change the dimensions here with 1664 and then the height is going to be 936 and this is matching our power bi report the canvas that we have in our power report so we are good now the next step here is let's change the color of this rectangle Ctrl C and this is going to be the gray background one Ctrl B and then boom we just change the color and then we can also rename this if we want that's a good practice so let's call this P rectangle one for now before we keep moving here the next step is to insert a screenshot of your power bi report your final report as a reference what I'm gonna do is I'm gonna drag this into this canvas okay and then right here I'm gonna align this because I'm using this as a reference to build the other objects check this out and then you can also rename this if you want and then you can also hide this and make this visible so this is really really powerful now let's create the other background let's insert now another rectangle so let's go over here and then let's try to match this rectangle right here and we also have Dimension skill as you can see that's gonna be this one right here the width is gonna be 1382 and then the height is going to be 909 and then you can also align this so in that way matches what we have there so the next step as you can see is the color so the background 2 is going to be the rectangle is going to be this color right here Ctrl C and then Ctrl V right here and that should be totally fine and then you can also rename this you can call this big rectangle as well two if you want so the next step here is to customize the borders check this out select this visual right here and then let's go over here and we want to use this the top right corner radius and let's select 40 okay and we're not the same for the bottom right corner so this is going to be 40 as well check this out so this looks so much better and now let's move on to the next one so we're gonna insert the green rectangle right here so let's do that real quick so what we need to do here is let's go over rectangle again and then let's design this right here and we also have Dimensions right but before we go over the dimensions let's select the color here the green shape is going to be this color right here Ctrl C let's go over here again Ctrl b boom and here what we need to do is we need to also customize the borders so the corners radius that's going to be 40 as well but that's going to be only the top and the bottom left Corners so let's select the visual again and here let's see this is the top left corner so here for this particular case we're gonna be selecting 40 and then this one right here this is gonna be the top right we don't want to do that and the bottom right nope and this one the bottom left corner radius yes this should also be 40. perfect so now you can see this is working perfectly fine and the cool thing is like I said before you can rename this again you can call this green rectangle whatever you want to call it and then let's say that we want to hide this screenshot so we can do that so in that way it can help us customize our work see so this looks so much better so let's keep going guys here we already work on this one the rounded green rectangle the render great rectangle it's also done here and then let's go over the small rounded rectangles we have to insert here five so let's hide this for now and let's make the the big rectangle visible and also the screenshot we need to insert here five small rounded rectangles this one is right here one two three four five so let's do this we're gonna do the same basically so let's go over here and then let's hit rectangle let's try to match what we have here so far and then for the corner radius this is going to be 30 right so what we need to do here is and this is gonna be for all 30. boom and then for color let's go over here and we're gonna select White check this out and what we need to do next here is duplicate this object Ctrl C Ctrl B then try to match what we have there Ctrl C Ctrl V again same thing here Ctrl C control B and we're gonna do this for these five objects okay check this out it seems like it's working perfectly fine we are good now let's keep moving guys we're almost there the next step here is to insert two big rectangles this one's right here one two all right so let's do that and then before we do that we can also rename this if we want [Music] perfect so let's keep moving like I said before two big rectangles let's do the same and then let's try to match what we have here already and we have also Dimensions here with 650 and then here 312. perfect let's try to match what we have there as part of the screenshot and then the other piece here is the corner radius here we need to select 30 and this is gonna be for all that's why we have to type here 30 Perfect Color you might have guessed this should be wide so next we need to duplicate this Ctrl C Ctrl V and then try to match what we have right there so we are good to go now and then we can make the oil adjustments if needed and then let's keep going folks let's have another rectangle here and let's try to match what we have here and then we also have Dimensions as you might have guessed 420 by 644 420 by 644 so we are good there and then for color we have to select right here quite as well this should also be 30 left corner radius next we need to add another rectangle here and this is the large rectangle that we have same story here the dimensions we have the width 206 and then for the height we have here 788 color same story here this should be white and then for the corner radius this should also be ready and we are good to go we are almost done here so let's rename this rectangle also in that way we don't get confused and here let's call this medium rectangle three for now and then for this one let's call this large rectangle if we want so what is next let's hide the screenshot and let's make the other ones visible so this is looking better right so let's make sure that this is a line press shift and make sure that this is a line it seems like this is a line so let's look at the other ones as well perfect 31 31 I think we are good so it looks good The Next Step here is to insert icons let's do that real quick for this particular case we're going to be using green drag and drop here and then you can change the size of these ones right here as well so let's do that shift and try to select every single one and then we can go from there this should be 70 okay perfect so what is next here is we need to make sure now we can place this in the right place okay so let's double check the power bi report just to make sure that we are having the right icons here so I think we are good so let's go back again yes so we are good and then you can readjust this if you want as well it's just a matter of playing with this okay perfect and then this one right here as well we are done with this part we are designed the green background and you can also rename this if you want you can do whatever you want here okay perfect and then guess what we can duplicate this page check this out so this is going to be page one so let's rename this because we also care about the black background so we can duplicate this and just change the the color of the visuals of the objects so let's do that duplicate page check this out and let's rename this this is going to be black of course black black background and then you can also rename this so we don't get confused but for black background what we need to do here is change the color to Black so for black color this is the the hex code Ctrl V and then for the icons what we need to do is we need to delete these ones right here and then insert the other ones so let's select the black icons here real quick and here let's do the same hold down shift and here let's select 70. perfect and then you can start rearranging this as well so let's do this real quick let's keep adjusting this so this looks so much better I think we are good to go my friends let's give it a shot so the next step here is to export this let's do that so let's go over here export I'm gonna use this extension okay support that and we're gonna do the same for the green background SVG again export we are good to go The Next Step here is to go over the power bi report the template that I'm gonna be sending you and let's start playing with this green background let's go over canvas background let's go over here and let's select this one because that's the green background we can rename this if we want it should be green and then this is the one that we need for this particular time hit okay fingers crossed boom let's hit fit for now and let's see what happens you can adjust this a little bit better so you can make any adjustments here okay it's working perfectly fine so let's do the same for the black background the same story here let's rename this for now this should be the black background so we don't get confused and that's like this one black background hit open boom I need to go hit his fit and then also make the adjustments here you can do whatever you want okay you can also customize this like that it's up to you there you have it my friends we use figma to create these backgrounds let me know what you think we have different tools but pigma is definitely a good one as well

Channel: Nestor Adrianzen

Views: 4,859

Keywords: Power BI tutorial, power bi tutorial for beginners, power bi reports, power bi for beginners, power bi training, power bi desktop tutorial for beginners, power bi design figma, power bi report design, power bi visual design, power bi dashboard design, power bi learn design, learn power bi figma, power bi beginner tutorial, figma design tutorial for power bi, learn figma for power bi, how to design power bi, power bi design tutorial, power bi dashboard building

Id: u6Vq6SrQxqM

Length: 15min 39sec (939 seconds)

Published: Sat Aug 12 2023