Figma Donut Chart

Preview

Figma Donut Chart

A donut chart is a pie chart with a hole in the center: slices show the parts of one whole, and the hole carries the total or a label. Frames X ships one ChartDonut set with 14 variants, plus six ready layouts in desktop and mobile sizes with legends, stat values and data tables around the ring.

Put the key number in the hole: a total with a caption reads faster than a legend lookup.

What is in the donut chart set

Variants. Default and Semi Circular types with two to eight segments, 14 combinations in one set.
Layouts. Six ready charts in desktop and mobile sizes, one of them pairing two donuts side by side.
Extras. A legend set, stat values with trend states and a data table drop in as instances.

How to make a donut chart in Figma

Draw an ellipse and open the center with the arc ratio handle.
Duplicate it per segment and set each arc’s start and sweep so the slices close the circle.
Color the slices from one palette, the strongest hue on the biggest value.
Add a legend, or label the big slices directly on the ring.
Group the chart and turn the set into variants per segment count.

Donut chart best practices

Keep it under eight segments. Past that, thin slices stop being readable, which is why the set caps at eight.
Use a donut for parts of one whole. Market share, budget allocation and traffic sources split one total, and trends over time belong to a line chart.
Order slices by size, clockwise from twelve. Readers rank the categories at a glance.
Pick the donut over the pie chart when the center can work: the hole holds the metric a pie has no room for.
Theme it with the rest of the Figma charts. One variable set keeps the ring, bars and lines on one palette.

Donut Chart Anatomy

Set	Variants	Properties	Copy to Figma
ChartDonut	14	Type Default, Semi CircularSegment x2, x3, x4, x5, x6, x7, x8

The file carries one ChartDonut set with 14 variants, Default and Semi Circular types from two to eight segments, plus six donut layouts in desktop and mobile sizes.

Donut chart AI prompt

Paste this into Claude, ChatGPT, or Figma Make:

Build a donut chart component set in Figma. Structure: ellipse arcs as segments with a center hole at about 70 percent ratio, a total value and caption in the hole, and a legend below. Variants: Default and Semi Circular types with segment counts from two to eight. Order slices clockwise from twelve by size, color them from one palette variable set, and make desktop and mobile chart layouts with a header, legend and an optional data table.

Figma donut chart FAQ

What is the difference between a donut chart and a pie chart?

Only the center hole. Both split one whole into slices, and the donut uses its center for the total or a key label. The kit ships the same 14-variant structure for both charts.

How many segments can a donut chart show?

The set goes from two to eight. More than eight turns small categories into slivers, so group the tail into an Other slice.

What is the semi-circular donut type for?

A half-ring that fits dashboard rows where a full circle is too tall. It ships as the Semi Circular type in the same set, two to eight segments.

Does the donut chart work for macOS app designs?

Yes. The chart layouts follow a clean macOS-style look, so they drop into Mac app dashboards without a restyle.

Which charts pair with the donut?

Stat values with trends for the headline numbers, a data table for exact figures, and the bar chart when categories need comparing by length. All ship in the same charts family.

Figma Donut Chart

Donut Chart

donut chart figma

figma donut chart

donut charts

Interactive component

‭‭← Previous component

Bar Chart

Charts

Next component →

Maps

Charts