Figma Gauge Chart
Figma Gauge Chart
Preview
Figma Gauge Chart
Figma Gauge Chart
Gauge charts display a single value or metric within a predefined range. You can use gauge charts to show progress towards your objectives or real-time metrics, such as system performance or sales figures.
Gauge charts show one metric inside a fixed range — an arc with a filled progress segment, a centred value and a label — for goal progress, system performance and sales targets on dashboards.
Gauge Chart AI Prompt
Paste this into Claude, ChatGPT, or Figma Make:
Build a gauge chart component in Figma as one set. Base: a semi-circular arc track in a light grey with a filled progress segment in the accent colour, rounded caps, a large centred value with a unit label below and a title above. Properties: a Type for Semi-circle, Three-quarter and Full ring; a Size of Small, Medium and Large; a Progress property with variants at 0, 25, 50, 75 and 100 percent so the prototype can animate through them; and a Booleans group for Min and Max labels at the arc ends, a needle indicator, coloured zones splitting the track into green, amber and red thirds, and a trend caption with an up or down arrow and a delta percentage. Build the arc segments as vector layers with rotation so the fill length is editable, keep the value on tabular figures so widths stay stable, and bind the track, fill and zone colours to the chart variables shared with the donut and radial charts. Show three gauges in a dashboard card row as the example.
Figma Gauge Chart
Gauge Chart
figma gauge chart
gauge chart figma
gauge charts
Interactive component
Premium Figma UI Kit & design resources
Explore high-quality Figma components, templates, and UI elements.











