How to use Heurio
How Is Heurio Different From Commenting in Figma?
Figma comments live on a design file. Heurio comments live on the real, rendered website — with severity, heuristic references, assignees, and a Kanban workflow built for QA, not design critique.
Short answer: Figma shows you the design. Heurio shows you what actually shipped — and structures every finding with severity, a heuristic reference, an assignee, and a due date, so it flows into a real fix-and-track workflow instead of staying a design-file comment.
Figma comments are pinned to a design file. Heurio comments (heurios) are pinned to the actual, live, rendered website — including real content, real load behavior, and real responsive breakpoints that a static mockup can't show you.
#The core difference
- Where the comment lives. A Figma comment is attached to a frame in a design file. A heurio is attached to a specific element on the live, deployed site — the one your users actually see.
- What you're reviewing. Figma shows intended design. Heurio shows implementation: real copy, real images, real responsive behavior, broken states, loading states, and anything that drifted from the design during development.
- What a comment carries. A Figma comment is just text. A heurio carries a note, a suggestion, a severity level, an optional heuristic or guideline reference, an assignee, and a due date.
- How work gets tracked. Figma comments don't have a workflow. Heurio's Kanban View and Severity View let a whole team triage, assign, and move findings from open to resolved.
#When you'd use each one
- Use Figma comments while a design is still being decided — before anything is built.
- Use Heurio once something is live (staging or production) and you want to catch usability issues, visual regressions, copy errors, or accessibility problems on the actual build — not the mockup.
#Comparing design to the live site
A common workflow we see today: reviewers paste a Figma link into a Heurio project as a reference, then pin heurios on the live site noting where it diverges from that design (layout shifts, wrong copy, missing states). We're actively building a more direct way to compare a Figma design against the live implementation — see Heurio for vibe coding for what's coming.
Frequently asked questions
- Can I link a Figma file to a Heurio project?
- Yes. Many teams reference a Figma URL as the project source so reviewers can flip between the design and the live site while pinning heurios.
- Does Heurio replace Figma?
- No. Figma is for designing and getting feedback pre-build. Heurio is for reviewing what actually shipped. Most teams use both — Figma earlier in the process, Heurio after deployment.
- Why not just keep using Figma comments after launch?
- Figma comments can't reference the real rendered page, can't carry severity or an assignee, and don't have a resolve/track workflow. Once something is live, a Figma comment thread quickly goes stale.
- Is there a way to see design-vs-live differences automatically?
- Not yet as a built-in comparison — today it's manual, using a linked Figma reference. Automated design-vs-live comparison is on the roadmap; see /vibe-coding for updates.