Figma progress circle components

Circles show up where a bar would not fit or would not read. A storage tile on a dashboard, a ring that closes as a profile fills, a usage gauge sitting next to a plan name, a small badge counting the steps left in a setup card. The reason to reach for a ring rather than a bar is almost always space: the value and the shape can share one square instead of competing for a row.

Five sizes, from a badge to a dashboard tile

The set runs xxs, xs, sm, md, and lg. The four larger circles are square at 160, 200, 240, and 280px, sized to be the main object in a card, while xxs comes in at 64px wide for sitting beside text or inside a table row. Those are big shapes by component standards, and that is the point: a 240px ring is a data display, not an icon, and it should be given the room a chart would get. If you find yourself scaling the lg circle down to 40px, you wanted a different component.

Half circles are gauges, and gauges mean something else

Every size also comes as a half circle, 88, 110, 132, and 154px tall at xs through lg and 53px at xxs, which is the speedometer shape most dashboards use. The semantics are worth being strict about. A value moving toward a known finish, like an upload, is progress. A value sitting somewhere in a fixed range, like storage used or a credit score, is a meter, and the W3C's meter pattern is explicit that meters should not be used to show progress. Full circles read as completion to most people. Half circles read as measurement. Let that decide which shape goes in the tile.

Drawing and editing the arcs

A ring in Figma is an ellipse with its arc handles pulled, and the arc tool gives you three of them: sweep for how much of the circle is filled, start for where the fill begins, and ratio for how thick the ring is. Sweep is how you produce a 62% state without a plugin. Ratio is the one to set once and then leave alone, because rings that drift to slightly different thicknesses across a dashboard is the kind of inconsistency nobody can name and everybody notices.

When a circle beats a bar

Use a circle when the value is one number inside a tile and the layout around it is a grid: dashboards, metrics cards, plan usage panels, activity gauges. Use a progress bar when the value belongs to something wide, like an upload row or a full-width checklist, or when several values need comparing down a column. And when the process has no measurable end at all, neither shape is honest; that is what a loading indicator is for.

When it's time to build, the same rings exist in code. Untitled UI React progress indicators are open source, built with Tailwind CSS and React Aria, and include circle and half circle versions with and without labels, so the arc and its value stay in sync without any SVG maths on your side.