Data Design - Building a Basic Dashboard Background in Figma ft. Lindsay Betzendahl

hello this is lindsay betzendoll i am going to be sharing how to create um a background image for a dashboard in sigma what you'll see on the left-hand side are all the elements similar to say tableau or illustrator all the elements that you end up putting into your artboard will show up on the left-hand side of the screen in a layered effect so they'll be in order of what is on top of something else what's below what's grouped together etc which you'll see along the way on the left hand side we have all of our different elements that we'll use to type to create um you know to change fill or stroke color drop shadows layer blurs things like that alignment etc and you'll see different things pop up depending on which type of element we're using and then all the way up at the top left up here we have our different tools we have a frame and slice we have all our different shapes uh pen tool the text tool um this is just a hand to move things around and this is for comments if you're using this in a team kind of fashion and then your typical just you know move tool all right so we're going to get started building this out uh and we'll see how we do all right so the first thing we need to do is we're going to create our background rectangle go up here we're going to grab our rectangle and what you can do you'll see is first you can just drag and make whatever shape you want and the size in pixels that it is once you get something kind of on the page you can go up here change manually that width and height if you have a particular one that you want so i'm going to make the 13x700 [Music] you can also turn things off uh as you're doing your work if you want to see how different effects take place and you can also subtract them and just remove them so we're going to add a drop sorry we're not adding a drop shadow but in here we have drop shadows inner shadow layer blur and background blur and in this case we want uh in this case we want a background blur so we're gonna add this background blur in if you click this little sun this is the effect settings so we can click here and say what um type of blur we want how strong we want this blur and so actually we're going to keep it at four for right now but you'll see nothing happens because we have a solid fill on our shape so in order to change that we can go up to our fill section and we can make that a 60 fill and what you'll see now is we have a little bit of a fill and there's a little bit of blur and if i add in some other shape let's just make this just for uh argument's sake uh over here on the left i just drew this and obviously now it's on top i just want to put it underneath so i can just hold and drag and it goes underneath and you'll see um this is under here now and the edges if i zoom in are a little blurry and so if i increase this blur to say 25 you'll see now you see how that effect takes place where it gets it does blur anything that's in the background so i just want to show how that works how that background blur really is working it's a little tough to see when you're just using a gradient um background because you can't see that blur on the same so now we have our background and we can see that we're looking i'm getting closer to um what we're aiming for here um and actually one other thing i realized um this still as we know defaults to this c4 c4 p4 we actually want to make this white if i just click on that square white there we go so now our background blur uh has a white hint to it okay next thing we're going to do is create the small rectangles that um are these uh yeah rounded rectangles that are kind of the basis for where the charts are going to lie so again we go up to our left we grab a rectangle and we're going to make a couple um shapes here another thing is if you actually move something around you need to get it back if now on on a mac at least you press command z is undo and that will go right back to where you were and you can actually do a number of infinite like undo's redos so it's really nice you can go back pretty far i'm going to make this white now for this we're going to add in a drop shadow so what you'll see here is if i zoom in there's no shadow here um and so what i'll do again is add an effect i click on that rectangle to highlight it add an effect and you'll see it's automatically it'll default to this uh zero four x y and a blur four drop shadow which means essentially it's it's dropped um four you know pixels down um and nothing to the left or right so just below and you can change these by doing negative and that'll go above uh the x will go to the right and the negative will go to the left so we're going to make this a little more i want to i want to go down and to the right so i'll change it to five and five and i'll make this blur 10 just to give it a little more shadow effect so you can see how that changed while i was while i was doing that um again like if i made it 25 you'll see how that happens so we'll go back to time it default defaults to this 25 opacity which is pretty good i tend to use that unless i'm using a different colored background you can change the color of your background you can see how that'll give this kind of glow that's pretty nice effect too all right so now that we have this let's see all right so once we have one we can create the other two pretty quickly we don't have to recreate it we can just click on this if i click alt or option drag and let go it copies it and so now it's copied all the elements that i have including you know the fill and the drop shadow which i want to be identical for my others so all i need to do now is reshape these so i'm just going to make this one a little taller and again you can just click on the edge and drag and we're gonna make it about there and again i can kind of put these exactly where i might want them that's probably pretty good all right option drag release we're going to just make another shape over here and you'll see these little marks if you saw that that show me i am getting a little red uh x it showed up i'm exactly lined up so i don't even have to you know worry about making sure the alignment's right um it just does it just really nice okay all right so now we have all of our sections we're starting to get there you can kind of see um how we have all of these and looks like we also need to change our fill a little bit um because we want still some opacity here as well so here's another cool thing so i actually can select all of these by just holding down shift as you would in many other applications and then i can change this fill to 85 which gives it just a little bit of opacity and again really easy to do all three at once and we're done all right next thing we want to add in are some of these blue rectangles and again these ones are going to be a little different so i'm just going to create new ones so i'll create one and we'll change this color and like i said you can pick colors you know you can just kind of go like this that's good i'm happy to have that color already down there um often that pigment will pick up colors that you already have in your view you can also use the eyedropper to say like i want to pick this exact color uh so that's really nice one thing i don't like is this eye dropper dropper does not work outside of the application so i can't pick something that's on my computer screen which means sometimes i will bring in an image similar to bringing in this image so that i can get the exact color just like that um that i might want all right zooming back in okay we're gonna give these a little bit of a rounded corner as well yeah like pretty good we're just going to get that in the center and then option drag push and drag and so once i have all three of these um i'll center the center one and then what we can do is kind of move these um now i can see here that the way i want them is not quite going to be exact so i'm going to click all of them and make them a little narrower and up now i can remove them you'll see that little 26 that shows me that they these are equally you know equidistant uh that looks pretty good apart um all right cool all right so to add those little pills again we're gonna go up to our little rectangle tool we're gonna make uh our pill here and as i said you know we can't see our radius tool uh and again you know you can type it in but i like to have a little control so i'll zoom in a bit so i can get this and when i zoom all the way in it gives us that full rounded corner change this to the same color and then we're not a stroke to this so the example has um an outline so we can just click that plus button to add a stroke i'm gonna make this white and you'll see that you can change the size of it so we can make it really fat we'll keep it at one though in this case you can also do inside outside or center which just changes where that stroke lies on your size of your shape i'll keep it at the inner for now all right awesome so now we have this shape and so this one um i make we want these all to be the same height so this is actually this is pretty good and i'll line this up so it's right along the edge here uh now we're gonna add in some text so we do have to add in text separately in figma so just drag our text shape and then we can start typing and we're going to change the text now there's hundreds of font options in here and unfortunately it doesn't tell you it doesn't show you what they look like you can just click it and then you know go down on your mouse if you really want to kind of look through so i'm going to use oxygen and we're going to do bold and [Music] now we're gonna do light and not okay all right so now we've got our text and um that i have to make this smaller other thing to know about the text is when you click on this you'll see there's your options for your alignment how you want to line within the text box up down or in the middle click on the ellipsis will give us even more options in terms of how you want to just change the case the position etc which is pretty nice um so a lot of customization there all right so i'm going to go ahead and make the other three um and we'll do that real quick [Music] [Applause] [Music] [Applause] all right so now we have all of our text in here um just like we have up here the rest of these are actually data elements um one more thing we're gonna do up here is add this filter by dashboard with an arrow and then we're gonna add in some icons so let's quickly again we're just going to copy pull and drag this [Music] so to add in an arrow one of the things we're going to want to do is go up to our pen tool so we don't necessarily want arrows those are going to do something straight um although we can do both so let's just do this i'll just show you we can make an arrow which is just going to be a straight line and you'll see it here uh in sigma you can make any of these things a vector if we double click on it um it gives us this little opportunity to kind of add in um a point so again i'll just redo that again i just by double clicking on it it'll change up here and we'll have now pen and a curvature tool so on that curvature tool i can add in just a little bend to my arrow and i can click done and so what i'll see here now i'll move this over here let's see so we have a direct kind of 90 degree one i'll remove this um if you just hover over a corner on any kind of shape you'll get a rotation tool and so here i can actually just rotate this exactly as i want and see we'll just do this a little bit now i can change my arrow pretty good actually that worked better than i thought change this there we go that's pretty good uh so you can do that with any kind of shape um even on this shape for example if i double click on this i can add the curvature tool and add in points and then i can change shapes so there's a lot you can do to customize your shapes that you had now what i was going to show also is you can just use the pen tool immediately so i can use this to create an arrow as well um so the pen tool will will just do exact lines however if you hold press and hold it gives you um the curvature so i'm holding my mouse and i let go i'll drag another one down here and i'll double click to stop and you'll see i i've gotten a custom kind of shape that i've made so those are two ways to kind of make different bends and shapes um the benefit of using the arrow one however obviously is you already have those points come on the arrow that being on the edge of the arrow but you could customize that if you wanted okay so last thing we need to do are our three shapes over here so the first one we're gonna get our ellipse tool and um shift and hold to make a perfect circle and so let's see it's going to be a little too big okay cool thing about a circle you'll see that aside from you know obviously we can drag and change these is there's this little arc tool which allows you to do a number of different things here once you do the arc you can also pull in we can change the angle of it um right so we can make this pi i suppose and you can also move um the inner so now i end up with like a doughnut so there's a lot of weird things that you can do with uh the lips and the arc um okay let me get that back too okay so now i have my uh my circle so i'm going to make this uh the first one we're going to is we're actually going to add an image in here so similar to all the other shapes we have a fill over here if i click on this and we have our solid fill i'm going to go down to image and this allows me to put an image in here you can also just drag uh let's see if i can just drag and drop drag and drop my image there we go if i hit crop here we go i can move myself that's good ah something's weird hang on there we go okay so now i'm cropped into this circle looks like i need to make it a little bigger let's see there we go okay now we have it now up here we have you know white border so i want to make sure of a white border on this one so going back here we can add in our stroke get that white border awesome all right so now we have that it's a little larger cool and we're gonna add our other three shapes so these ones again we're gonna kind of lock these into the right spot make these and see here yeah that's um this one has a stroke yet you don't okay these these two we're going to turn off the stroke okay so what we're going to do here is we're going to make one that has a house uh one that has two circles and one that has some circles and lines i'll show you how to combine some stuff and grab our ellipse we'll do this one first once i have these where i want i can click um both of these and then with my outer circle and up at the top you'll see a little spot that shows up for combining the shapes so we're going to do that and we're going to do the subtract and so that will actually now we have holes um within our our shape we're gonna do the same thing down here i can group these if i select all of them together i can right click and group and this helps me now because now i can actually center this whole element and again we're going to select the outer circle and do intersect oops let's try that again subtract and now we have our other one i'm going to click both of these icons and we're going to add our drop shadow so we get that little background i'm going to do um a little let's see two times we get over the side there awesome and the last one we're going to do is our house so the house we're going to build actually the house we're going to make a little like a square grab a polygon plop that on looks good another little door we're going to attract and then union so now we have a house make this all right in this example we are still going to click both of them and subtract you know i gotta fix this i always fix your unions in here yeah let's see i wanted to make that there we go that looks better you can click on any of the elements within a subtract they're still there so you can still modify them you don't have to go back um all right and then i just need to add my drop shadow to this one as well and there we have our final dashboard and all the other parts that would have been added will be in um actual data so now what we do to finalize this is we can just group this whole thing and now we have one group that we can move around and on our bottom left we can export this and in figma you can export it as a png jpeg and svg or pdf um if it's a png or jpeg you can up the export you know size um i usually do just one or two depending on how large my dashboard is going to be any larger an actual file gets pretty big or an svg is actually the best option however unfortunately an svg will not pull in images so for example this particular shape would not show up correctly but if i didn't have that everything else actually could be an svg and that would work very well tableau for example can render those um very nicely and there you have it that is the end of the tutorial of how to create this dashboard background in figma [Applause] you

Channel: Autumn Battani

Views: 1,266

Rating: 5 out of 5

Keywords: figma, tableau, dashboard, design, tools, beginner, background

Id: pmLSGzka1yY

Length: 23min 40sec (1420 seconds)

Published: Wed Feb 24 2021