When designing digital interfaces, making layout decisions based solely on intuition can be risky. The Attention Insight Visual Usability Checker Plugin for Figma empowers designers with AI-driven visual hierarchy analysis, helping you make informed choices based on real user-like behavior data. This step-by-step guide walks you through using the plugin to compare different layout options—so you can design smarter and validate your decisions confidently.
Step #1: Install and Open the Plugin
First, ensure the Attention Insight Visual Usability Checker Plugin is installed in Figma. Open your Figma project and activate the plugin. You can test up to ten designs at once, making it perfect for layout comparisons. This walkthrough will compare two Hero section designs to determine which one grabs user attention more effectively.
Step #2: Set Your Evaluation Objective
Define what you’re analyzing. In this example, you’re comparing:
Hero 1: Centered, symmetrical layout
Hero 2: Left-aligned, asymmetrical layout
Your main goal is to see which layout directs more attention to the most critical block: the headline and call-to-action (CTA). The image content is secondary.
Step #3: Launch the Visual Hierarchy Analysis
Click the “Visual Hierarchy Analysis” button in the plugin. Before proceeding, click the tooltip to understand the analysis metrics:
- What the focus score represents
- What the focus map and attention hotspots highlight
- How to interpret results effectively
This step ensures you get meaningful insights, not just raw numbers.
Step #4: Choose the Analysis Type
Select the platform you’re designing for: Desktop or Mobile. In our case, choose Desktop. You’ll then see a brief animation explaining how to run the analysis—by selecting frames and setting up the viewport.
Step #5: Set the Viewport for Analysis
Select the first frame (Hero 1). If the design exceeds the screen size, the plugin will notify you and ask you to set a viewport. You can crop manually or allow the plugin to adjust it automatically.
Setting an accurate viewport ensures the analysis simulates how users actually see the design on-screen, making the data valid.
Step #6: Confirm and Compare Layouts
Once the viewport is set for Hero 1, repeat the process for Hero 2. After getting a green checkmark for both frames, tick the box to “Include annotations”—this adds interpretation tips alongside your results. Then click Start Analysis.
Step #7: Review Focus Scores and Metrics
After the analysis completes, examine the results:
Hero 1 Focus Score: 68%
Hero 2 Focus Score: 96%
The focus score measures how dominant a particular element is compared to others. A higher score means the design has a clearer visual hierarchy, with stronger attention directed toward priority elements.
Click on each result to explore:
Focus Map: Shows what users are likely to notice within the first 3–5 seconds.
Heatmap: Visual representation of attention distribution.
Attention Hotspots: Identifies which design parts receive the most focus.
Step #8: Interpret Key Differences
For Hero 1, attention is distributed more evenly—CTA and headline are visible, but no single element strongly dominates. In contrast, Hero 2 has a clearer structure: one block receives 35% of attention vs. 11% for another. This creates a stronger visual hierarchy, guiding users intuitively through the design.
Step #9: Use Results to Inform Design Decisions
Based on the analysis, Hero 2 better emphasizes critical content. You can now confidently present these findings to stakeholders, showing that the left-aligned layout performs better not just aesthetically, but analytically.
If needed, you can revisit the plugin’s tabs to explore:
- How to Interpret Analysis
- Technology Behind the Tool
These tabs help reinforce your understanding and offer additional support for reporting your results.
Step #10: Run a New Analysis
Want to test more layouts? Click “New Analysis”, repeat the setup, and select up to 10 different frames to compare in one go. This makes iterative testing fast and efficient.
Conclusion
The Attention Insight plugin turns your design process into a data-backed system of decision-making. By analyzing real-time visual hierarchy, it helps you understand not just how users interact with your design—but why. Whether you’re refining a single layout or A/B testing multiple versions, this plugin ensures your design choices are purposeful, efficient, and validated by intelligent insights.
