How Do You Make a Pie Chart in Figma?

Creating a pie chart in Figma is a simple and effective way to visually represent data. Pie charts are great for displaying proportions and percentages, making it easy to understand the distribution of different categories within a whole. In this tutorial, we will explore how to create a pie chart in Figma step by step.

Step 1: Setting up the Document

First, let's start by creating a new document in Figma. Open Figma and click on "Create New" to begin.

Step 2: Adding the Pie Chart

To add the pie chart shape, navigate to the left toolbar and select the "Shape" tool or simply press "R" on your keyboard for quick access.

Next, draw a circle shape on the canvas by clicking and dragging. Hold down the Shift key while dragging to ensure that you create a perfect circle.

Pro tip:

If you want to resize or modify your pie chart later, you can select the shape and use the Transform tool (shortcut: T) to make adjustments.

Step 3: Creating Data Slices

To create data slices for our pie chart, select the "Rectangle" tool from the left toolbar or press "R" on your keyboard.

Create rectangles of different sizes around your circle shape, representing each category or value you want to display in your pie chart. Make sure each rectangle overlaps with the circle shape partially.

Pro tip:

You can use guides (Ruler tool - Ruler icon on top of left toolbar) to align your rectangles precisely with equal spacing between them.

Step 4: Clipping the Rectangles

To create the pie chart effect, we need to clip the rectangles with our circle shape. Select all the rectangles and the circle shape by holding down Shift and clicking on each element.

With all the elements selected, right-click and choose "Create Mask" from the context menu. This action will clip the rectangles with the circle shape, giving them a pie-like appearance.

Step 5: Customizing Colors

To make your pie chart more visually appealing, you can customize the colors of each data slice. Select a data slice by clicking on it, and then choose a color from the right sidebar panel.

Repeat this step for each data slice until you are satisfied with their colors.

Pro tip:

You can also experiment with gradients or patterns to enhance your pie chart's visual impact. Figma provides various options to explore in the fill settings of each data slice.

Step 6: Adding Labels

To make your pie chart easier to understand, it is essential to add labels for each data slice. Select the "Text" tool from the left toolbar or press "T" on your keyboard.

Create text boxes adjacent to each data slice and enter relevant labels or values for better comprehension.

Pro tip:

You can use different font styles, sizes, or colors for labels to make them stand out. Experiment with bold (B) or italic (I) formatting options available in Figma's text editing toolbar.

Step 7: Finalizing and Exporting

Once you are satisfied with your pie chart design, it's time to finalize and export it. Review the chart to ensure all labels are correctly placed, colors are visually appealing, and the overall composition is well-balanced.

To export your pie chart, go to the top menu and click on "File" > "Export" > "Export.." Choose your preferred file format (e.g., PNG, SVG) and save it to your desired location.

Pro tip:

If you want to share your Figma project or collaborate with others, you can also invite team members or generate a shareable link directly from Figma.

That's it! You have successfully created a pie chart in Figma. Pie charts are powerful visual tools that simplify complex data representation. Remember to experiment with colors, labels, and other design elements to create visually engaging charts that effectively communicate your data.

Now it's your turn! Open Figma and start creating stunning pie charts for your next data-driven project!