Figma activity gauge components

The word activity is doing real work in the name. A gauge is for targets that reset: today's steps, this month's quota, this sprint's capacity, the weekly active minutes someone is trying to hit again. Concentric rings let three or four of those sit in one 200px square without implying they share a scale, which is the trick a stacked bar cannot pull off.

Apple made the pattern famous on the Watch, and it has since spread into quota dashboards, storage and seat usage, budget tracking, and onboarding checklists. The 3 components and 34 variants above cover the sizes and legend arrangements.

Ring, circle, or bar

One value in a ring is a progress circle wearing a costume, and one value in a horizontal track is a progress bar, which is easier to read and easier to label. Reach for a gauge when there are two or more goals running in parallel and the reader's question is whether they are on track for all of them, not how far along any single one is.

The moment the rings stop being independent goals and start being segments of one total, you wanted a donut instead, which lives with the pie charts. If they are several measures of one subject rather than separate goals, you wanted a radar chart.

Four sizes and three legend positions

Size runs xs, sm, md, and lg at 160, 200, 240, and 280px square with the legend switched off. Legend set to Right places the labels beside the rings, taking lg to 366px wide and xs to 246px; Legend set to Bottom stacks them underneath, taking lg to 316px tall.

Treat the legend as mandatory in production. Concentric rings carry no intrinsic labels, so a gauge without one is a decorative circle, and the second ring in particular is indistinguishable from the first to anyone who was not in the design review. The 160px xs size is the one exception worth allowing, since it is small enough to repeat across a row of cards where a shared heading has already named what the rings are counting.

Nobody reads an arc accurately, so print the number

Arc length in a circle gives a rough impression and nothing more, which is fine, because a gauge's job is glanceability. The number is what makes it useful, so put it in the center, in the legend, or both, the same way a metric card prints its value beside its sparkline.

Nielsen Norman Group's case for percent-done indicators is the same argument: showing how much is done and how much is left beats a shape that only implies it. On the build side, a gauge maps to the W3C meter pattern, which needs a current value, a minimum, a maximum, and an accessible name per ring. Worth writing into the handoff notes, because three unnamed meters read as one confusing meter to a screen reader.

Changing what a ring reads

Size and legend position are variant properties, so those are swaps rather than edits. Changing a value means changing an arc, and Figma's arc tool gives every ellipse three handles for it: sweep for how much of the circle is filled, start for where the arc begins, and ratio for turning a circle into a ring. Drag rather than redraw.

Keep the stroke weight identical between rings while you are in there, because a slightly thicker outer ring reads as more important whether or not you meant it that way. The whole set exists twice in the file, once light and once dark, since a thin bright ring on a dark surface needs different weight to hold its edge.

When it is time to build, the same gauges exist in code. Untitled UI React activity gauges are open source, built with Tailwind CSS, with the arc geometry and value handling already done.