How To Design PIE CHARTS in Figma (Tutorial)

let's take a look at how to create a pie chart in figma we're going to start by creating a frame similar to this one on the left and then creating the headline quite short it's going to have this color also the description and we need to create labels as well now we need to create the actual chart so i'm going to select the ellipse tool and click and drag to create a circle we're gonna center it and what we need to do is select this very color and so from from the chart we can see that this part is 67 or two-thirds and the smaller one is 33. also the smaller one has a shadow applied to the corresponding part of the chart and it has some percentage labels that we're going to create as well so we need to go here and select this little circle that will say arc when we hover over it and then click and drag while holding down the shift key to select our sweep we also need to rotate the whole graph so that it starts at 30 percent and then again adjust this part and the angle of the arc corresponds to 67 and the rotation is identical as well now we need to create the cutoffs this means again going here and then moving this percentage to whichever number feels similar or correct to you at the moment i'm going to go for 50 now we need to duplicate this and then move the start position and then the sweep position so that it aligns precisely with with the end of the second part i'm going to select this part and sample a color from the headline and add a drop shadow the color of which is going to be this blue one as well next we're going to add the percentage labels so we need a new headline and we'll type in 33 percent and then set the font size to 25 we will wrap this whole thing into an outer layer so i'm going to press shift a and then around the corners you also want to add first of all move this into the front so i'm going to press command option right bracket now it's in the very front of the graph and then add a white fill so now to achieve the same look as it has here we need to add a filter or background blur in the amount of around 40. also the white fill needs to be a bit transparent let's say 70 67 percent now we can simply copy this type in 67. we also need to change the color of this headline of this percentage to be identical to this part now this is going to move the whole thing closer to the center and one last thing in order for this percentage label to not blend in with the background we're gonna have to set this to be a very light gray so we're gonna go here and then set this to f3 f3 f3 and the same here and that's it that's how you build pie charts in figma the most important thing to remember is you have to play with the angles the sweeps and the rotation of the charts and then also using this percentage to define the amount of cutout you want to have if there is anything unclear let me know in the comments below if this video brought value i would appreciate you leaving a like and if you're interested in this type of stuff i have plenty of figma tutorials on my channel so go check it out thanks for joining me and i will see you in the next one

Channel: Mavi Design

Views: 26,687

Keywords: how to make pie chart in figma, figma pie chart, figma chart design, charts in figma, figma tutorial for beginners, ux design, ui design, ui ux design, pie chart, figma, figma tutorial, ux

Id: gTthfz5e9fQ

Length: 4min 8sec (248 seconds)

Published: Wed Jun 08 2022