Published on <a href="https://blog.prototypr.io/create-a-pie-chart-donut-chart-in-figma-4692a8f6b713?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Sjur O. Sundin 
<h4>Step-by-step guide to creating a pie or donut chart in Figma</h4>
Mandatory introduction about how useful charts are, how great Figma is, and if you don’t have <a href="http://www.figma.com">Figma</a> you should totally sign up for it, it is free.
With the introduction out of the way, let’s get to it: First, create a frame, any size, but for the sake of this tutorial make it 200&#215;200.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*aG31m-iP0oewltjzRFXOGw.png">
Inside the frame, create a 160&#215;160 rectangle, center it, and give it a fill color. This fill color will be one of the colors in your pie/donut.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*F03I5fFbbfR6WWfbVYli6A.png">
Drag two guidelines so that they meet in the center of your rectangle. This will help you draw the rest of the elements in your chart.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*dUeIrWdUhGwYpT5EnW-44Q.png">
Let’s say you’re creating a chart with the following distribution: 50%, 20%, 30%. We will use green for the 50%, blue for the 20% and red for the remaining 30%.
If you want to be precise about your pie slices, you will probably have to calculate pixels and figure out exactly where to put the pen tool, but for now we will just eyeball it.
We now need to create a 20% pie slice, the blue one. We will do that using the pen tool.
<img alt="" src="https://cdn-images-1.medium.com/max/700/1*ppMqI7sMTyDXexpSjfDbYg.png">
Put the pen tool where you want the green portion of your pie to end, and draw a polygon that matches 20% of your final pie, like this:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*mPA_-PdolYKnBBEAdirMVg.png">
Zooming in will help you draw the polygon. When you’re happy with it, remove the stroke, and give it the fill color you desire for your second slice.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*bDV6oAtmlEx6GDpCyj-xRw.png">
Create the final polygon to cover the remaining 30% of your pie (in this case we can actually create a rectangle covering 50% of the green rectangle, and put it between our vector and the original rectangle, that will save us some time if we only have 3 slices in the pie).
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*BynvC4wwSXp9HfHazkqTLg.png">
We have the individual segments, but we need to make it look like a pie. To do that, we will draw a circle, and apply a mask.
Draw a circle and center it over your rectangle.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*SRr0qB36V9ZRaBANwgufyQ.png">
In the layers panel for the frame, move the circle to the bottom, so that it sits behind all of the other shapes.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*s3V3Isy2F1gi_D6tEdxM1A.png">
Now, select all of the shapes, and hit the mask button at the top. Do not select the Frame itself, only the shapes within the frame.
Select like this:
<img alt="" src="https://cdn-images-1.medium.com/max/412/1*RYPiPLNsLibc5SYXjnP47Q.png">
And then hit the mask button:
<img alt="" src="https://cdn-images-1.medium.com/max/272/1*SKKxFT4MEUTsW0BD3eTClQ.png">
It should look like this:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*PphseQcfWljY8Ef9zefa9A.png">
Once you hit the mask button: Voila! You have a pie!
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ggJQSuVTDzMN32i7B4_bfw.png">You can turn off the guides (shift-R) to better admire your pie.
To make a donut, you will simply apply stroke, instead of fill, to your chart. So turn off the fill, and hit the plus button in the stroke panel to apply a stroke.
<img alt="" src="https://cdn-images-1.medium.com/max/460/1*6gK3en-N_4B7DNzoDB1mAg.png">
Here I’ve hidden the fill, but I can also remove it, the result is the same. I’ve added a stroke. The color of the stroke doesn’t matter, the mask will use the color of the shapes.
You can change the weight of the stroke to create a thicker donut, here I’ve used a weight of 5.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*hkej02rcuk-vPRrivQxeiQ.png">Nice, thick donut.
And there we have it. A scrumptious pie, or donut, that you can turn into a component and reuse across your design.
To change the colors, simply change the fill color of the individual vectors. Here I’ve selected the 20% one and changed it from blue to yellow.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*WVuDEf3Vc2Nq-60AveMbdA.png">
If you wish to add text to this design, you should group the elements that belong to the chart so that your text doesn’t get affected by the mask.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*7TozvoRmYqp3bIiZtFKPpA.png">
That’s it, thank you for reading! If you know of a better or more scalable way to make a pie or donut chart in Figma, please leave a comment, or reach out through <a href="https://www.linkedin.com/in/sjurs/">LinkedIn</a> or <a href="https://www.quora.com/profile/Sjur-O-Sundin">Quora</a>.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=4692a8f6b713" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/create-a-pie-chart-donut-chart-in-figma-4692a8f6b713">Create a pie chart/donut chart in Figma</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Create a pie chart/donut chart in Figma

Step-by-step guide to creating a pie or donut chart in Figma

Top Stories