Test Attention Where Designs Are Born: Heatpoints for Figma

Most design decisions are made by eye. A frame goes up on the screen, three people squint at it, and the loudest opinion wins. The first real attention data arrives weeks later — after the design has been built, shipped, and indexed. By then, changing it is expensive. Heatpoints for Figma moves that data to the moment it's actually useful: while the design is still a frame.

The plugin brings the same attention model that powers heatpoints.com directly into your Figma canvas. No exports, no uploads, no context switching. Select a frame, get a heatmap.

Design review runs on opinion

Here's how most teams validate a design: someone shares a frame, everyone looks at it, and taste decides. Maybe there's a design system to lean on, maybe a senior designer with good instincts. But nobody in the room actually knows where a user's eye will land first, whether the CTA competes with the hero image, or whether that clever asymmetric layout buries the value proposition.

The honest answer to "will users see this?" has always been "we'll find out after launch." Analytics, session recordings, and click maps only exist once real traffic hits a real page. That's the most expensive possible moment to discover your hierarchy is broken — the design is approved, the code is written, and the fix requires reopening both.

The feedback loop is backwards. Attention data should inform the design, not audit it after the fact.

Select a frame, get a heatmap

The plugin does one thing and does it fast. Select any frame in your file, hit analyze, and within seconds you get a predicted attention heatmap rendered over your design. The prediction comes from UniSAL, a peer-reviewed saliency model — the same one behind every scan on heatpoints.com. It's not a click map and not a guess; it's a model of where human visual attention concentrates in the first moments of exposure.

Alongside the heatmap, every analysis returns four scores that turn the colors into something you can compare and track:

• Attention: How strongly the design pulls the eye overall. A flat, gray wireframe scores low; a design with clear focal points scores high.

• Focus: How concentrated the attention is. High focus means the eye knows where to go. Low focus means attention is smeared across the frame with no winner.

• Coverage: How much of the frame receives meaningful attention. Useful for spotting dead zones — regions users will simply never look at.

• Hierarchy: Whether attention flows in a deliberate order — first this, then that — or collapses into visual noise.

Each analysis also surfaces a top insight — the single most actionable observation the model can make about your frame. Not a wall of recommendations. One thing worth fixing first.

The hierarchy score deserves a special mention, because hierarchy is where most designs quietly fail. Size, contrast, and isolation decide reading order long before copy does — and a frame that looks organized to its author can read as noise to a first-time viewer.

Add to canvas: the argument that ends the debate

The feature that changes design reviews is the simplest one: Add to canvas. One click drops the heatmap as a regular Figma layer right next to your frame. It lives in the file, alongside the design it describes.

That changes the dynamics of a review. Instead of "I feel like the CTA gets lost," you point at a heatmap sitting next to the frame and say "the CTA is cold — attention pools on the illustration instead." Instead of defending a layout choice to a client with adjectives, you show them the prediction. The conversation shifts from whose taste wins to what the data shows.

A heatmap layer next to a frame is worth twenty minutes of debate. Nobody argues with where the hot zone is — they argue about what to do about it. Which is the argument you actually want to have.

A typical workflow: two heroes, one decision

Here's the loop the plugin was built for. You're designing a landing page hero and you have two candidates — one leads with a big product screenshot, the other with a bold headline and a smaller visual. Both look good. Which one ships?

This is the point of testing attention at the design stage: the cost of a change is a drag and a click, not a sprint ticket.

Free to start, same account everywhere

The plugin is free to use: 10 analyses per month on the free plan, enough to settle a real design debate or two every week. It runs on the same account as heatpoints.com — sign in once, and your plan, quota, and history follow you between the web app and the plugin. If you're already scanning live pages with Heatpoints, the Figma plugin is the same tool, moved upstream to where the pages are born.

Validate the design before you build it — not after your users already voted with their eyes.