Figma Heatmap Chart
Figma Heatmap Chart
Preview
Figma Heatmap Chart
Figma Heatmap Charts
A heatmap shows values as color on a grid: rows and columns carry two dimensions, saturation carries the third. Frames X ships six desktop heatmap layouts and a mobile size, all driven by one cell component with a legend, value labels and pagination around it.
Pick a color scale that matches the data logic: one hue from light to dark for volumes, red against green only when values can be good or bad.
What is in the heatmap set
Layouts. Six desktop charts and a mobile version, each a ready frame with a header, labels and a footer.
Cell component. One base cell drives every square in the grid, so a fill change restyles all six charts at once.
Extras. A legend, value labels and pagination ship as instances you could toggle per chart.
How to make a heatmap in Figma
Start with the cell. A small square component with its fill bound to a color variable.
Build the color scale. Five steps of one hue cover most data, light for low values and saturated for high.
Stack cells into a row with auto layout, then stack rows into the grid. Zero gap reads as one surface, a small gap reads as tiles.
Add the labels: row names down the left side, column names across the top.
Finish with a legend, so readers can map color back to numbers.
Heatmap chart best practices
Use a heatmap when density is the point. Patterns across hours, days or categories show up as hot zones that a bar chart would need a hundred bars to show.
Keep one hue per metric. A rainbow scale makes readers memorize the mapping, and a light-to-dark ramp needs no key.
Round the data into buckets. Twenty levels of saturation read as noise. Five buckets keep the differences visible.
Label the peaks. A value inside the few cells that matter saves readers from decoding every square.
Theme it with the rest of the Figma charts. One variable set keeps the grid, bars and lines on the same palette.
Heatmap Anatomy
| Set | Variants | Properties | Copy to Figma |
|---|---|---|---|
| WidgetHeatmap | 3 | Size Mobile, Tablet, Desktop |
The file carries six desktop heatmap layouts and a mobile size built from one cell component, plus the WidgetHeatmap dashboard set in three sizes.
Heatmap AI prompt
Paste this into Claude, ChatGPT, or Figma Make:
Build a heatmap chart in Figma. Structure: one square cell component with its fill bound to a color variable, cells in auto layout rows, rows stacked into a grid, row labels down the left and column labels across the top. Use a five-step light-to-dark scale of one hue, add a legend mapping the scale to values, and show value labels only on the peak cells. Make desktop and mobile sizes, and keep every fill on variables so the chart follows the theme.
Figma heatmap FAQ
What is a heatmap chart component?
A grid of cells where color saturation encodes the value, with rows and columns for the two dimensions. The set ships six desktop layouts and a mobile size, all driven by one cell component.
When does a heatmap beat a bar chart?
When the data has two dimensions and many points. Hours across weekdays is 168 values, and the grid shows its hot zones in one look where bars would need scrolling.
Is there a heatmap widget for dashboards?
Yes. The WidgetHeatmap set ships in mobile, tablet and desktop sizes with the rest of the widget family, ready to dock into a dashboard.
What colors work best in a heatmap?
One hue from light to dark for a single metric. Save red-to-green for values with a good and a bad end, and check both ends of the scale for contrast on dark backgrounds.
Can the cells show their values?
Yes. Value labels ship as instances you could toggle per chart. Showing them only on the peaks keeps the grid readable.
Figma Heatmap Chart
Heatmap Chart
heatmap charts
heatmap graphs
heatmap chart component
Interactive component
Premium Figma UI Kit & design resources
Explore high-quality Figma components, templates, and UI elements.
