Skip to content
heatpoints
FRLog inCreate an accountAdd to Chrome

How to create a heatmap from a Figma design

The Heatpoints Figma plugin is not available yet. Here is the working export-and-upload workflow for checking attention on your frames today.

By the Heatpoints team · Updated 9 September 2026

Try the image heatmap

Current availability

There is no Heatpoints Figma plugin to install today. Earlier versions of this article described an integrated workflow that is not publicly available. The current method is to export a frame from Figma and upload that image to the web tool.

An exported frame keeps the review independent of your live site. You can inspect a draft, an ad or a mobile screen before development. The prediction concerns the exported pixels; it does not understand your Figma layer names, component structure or prototype interactions.

References: Current Figma integration status

Prepare a useful export

Choose a frame that represents something a person will actually see. A canvas containing several unrelated screens or annotations gives the model a different composition from the final interface.

  1. Select the frame, including its intended background and final text.
  2. Export a PNG, JPEG or WebP supported by the image tool, within the size limit shown there.
  3. For a long page, export a realistic viewport first. Review later sections separately if your question concerns scrolling.
  4. Upload the export, wait for the map and inspect the original alongside the overlay.

Run a controlled design revision

Write down one question before changing the frame: does the price compete with the product image, or is the primary action visually lost? Duplicate the frame and change one variable that could affect that relationship.

Export both versions with the same dimensions and compare them in Championship. A higher score is not sufficient evidence that the revision is better. If a decorative shape becomes the dominant region, the score can move while the business message becomes harder to notice.

References: Compare exported frames

What this workflow cannot test

A static export cannot tell you whether a menu opens correctly, a form is understandable or keyboard focus follows the right order. It also cannot reproduce the motion of an interactive prototype or the behaviour of a real visitor.

Use the heatmap to identify a visual question, then test the prototype with people. Once the page is implemented, the Chrome extension can review the actual browser rendering. Differences in fonts, wrapping and viewport size may change the prediction.

References: Review the implemented page in Chrome