Figma Plugin Review: VisualEyes
Plugin Name: VisualEyes
Creator: Jim Raptis
Cost: Free-ish (for now?)
Docs: Yes
Rating: 4 / 5
Introduction
The second Figma plugin I’m evaluating in this series is VisualEyes. On its Figma plugin page, this plugin’s description reads, “Get rich insights about your designs in a click,” and, “Embrace data-driven design in your workflow. Understand how users look in your prototypes and how clear and aesthetically pleasing are your designs.”
I first heard about VisualEyes through Thomas, the CEO of the two companies where I work as a creative director and senior designer respectively. He’s really good about finding and sharing useful new digital tools in a wide range of disciplines, and enjoys hearing our feedback after giving these tools a test run. When I came across VisualEyes via organic social media a few weeks after he mentioned it, I decided to stop procrastinating and give it a try.
Aside from HotJar and CrazyEgg, I don’t have much experience with attention heatmaps in my design workflow, but I’ve been interested in exploring and integrating more data-driven design practices into what I do. Despite the seeming common sense nature of the insights that tools like attention heatmaps provide, they can provide an outside perspective on your designs that might help you refine your compositions when you can no longer look at them objectively.
When I first wrote this review a few months ago, it was from the perspective of a free user whose first interactions with the VisualEyes product were happening through Figma’s plugin interface. However in the past month, VisualEyes has made their Basic paid plan free for all users, so I’ll be revising my review to take that into account, since it means more of the plugin’s features will now be available to try for no extra charge until further notice.
Menus Upon Menus!
My first point of friction while using this plugin has more to do with Figma’s plugin UI than anything else. I had to navigate through four floating menus before I was able to access the VisualEyes plugin options. This floating menu behavior is determined by your screen height, so if I’d had a taller browser window or a larger device, I may have been able to eliminate a few of those steps. Still, more than one or two menu interactions seems like a bit much to get started. It also doesn’t help that this plugin’s name starts with the letter ‘V’, which puts it at the bottom of my list of installed plugins.
This perfect storm of circumstances means that using this plugin might quickly become tedious if I need to access often it via the plugins menu for whatever reason. Granted, that use case seems unlikely given the limited amount of options VisualEyes has, but still, you never know.
This Plugin Requires an API Key
It’s worth a heads up that this plugin’s functionality requires an API key. You would think that the menu item clearly stating ‘🔑 Set my API key’ would have been indication enough for me, but alas I had tunnel vision and had to learn from my mistakes. However, it wasn’t difficult to get an API key from VisualEyes. I signed up for an account, verified my email, and was able to copy my API key and go on my merry way in a matter of minutes. I say this in case anyone is intimidated in general by Figma plugins that require API keys – it was very straightforward to find the necessary API key on VisualEyes’ website after logging in.
When I originally began to write my review for VisualEyes a few months ago, the experience was frustrating for me as a new user giving it a first try because a lot of its functionality seemed to be hidden behind a paywall. My frustration has gone away now that VisualEyes is offering a Basic plan free for all users for the next few months. This means I can now explore the full extent of the plugin without first having to pay $30. I’m including my past experiences as a free user along with my current experience as a free user so you can see how they compare.
When I first used VisualEyes’ free account, the API key didn’t do much for you if you didn’t already have a paid monthly or yearly subscription to VisualEyes. Although you got 20 credits to start with after signing up for a VisualEyes account and verifying your email, those 20 credits were only good for what were essentially previews of the various paid services that VisualEyes offers. It was a disappointing road block to come that far only to find that my free account didn’t do as much as I expected it to.
Scoring Reports Have Improved Considerably
It’s been awhile since I gave VisualEyes a try that first time, and now that I’ve revisited it I can see that there’s been a lot of improvement. When I first used the VisualEyes plugin in Figma a few months ago, one of my biggest issues with the plugin was the invasive quality of its scoring. In both the attention heatmap and clarity prediction cases, the rectangle containing the test score obscured the main navigation of my design. There didn’t seem to be any way to reposition this score box before or after running the tests, which meant that some of the test data was inaccessible. As a user who placed my main navigation menu in the top right corner of my composition (an extremely common web pattern by now), the test’s results report detracted from the value the plugin might have otherwise provided to me.
That reporting experience is much improved in the latest iteration of VisualEyes’ Figma plugin, especially because the plugin now operates within a persistent plugin window as you can see in the screenshots below. This means that results are presented in a much less invasive way than before. This also provides a cleaner opportunity to present additional useful information that would have otherwise cluttered the design of the results presentation, as was the case in VisualEyes’ first iteration in Figma when no persistent plugin window was being used.
These improvements overall speak to the attentiveness of this plugin’s developers. Beyond the work they’ve obviously done to improve the VisualEyes user experience in general, my before and after screenshot comparisons show just how much though they’ve put into Figma’s plugin experience in particular.
Attention Heatmap Scoring Review
On the left, we have VisualEyes’ old method of reporting for attention heatmap scoring. On the right, we have VisualEyes’ new, less invasive method of reporting for attention heatmap scoring in a persistent plugin window.
Overall, I found VisualEyes’ attention heatmap scoring to be a useful way to visually qualify layout-related design recommendations, although some might say that these score results border on common sense at best, or glorified AI lip service at worst. Say what you will about AI tools like this, but there’s definitely a time and place for them depending on the kind of designer you are and the kind of work environment you’re in. This is especially true on teams that value a data-driven, iterative approach to design.
I used a website that I recently designed and built for my friend Eric as my test subject, mainly because it’s one of the more recent personal web design projects I’ve worked on. The attention heatmap score helped me accept that the arrow functionality I introduced on the right-hand side of the home page might as well be invisible – something I’d been in denial about until that point. This is the context in which I think I’d generally find this tool useful, at the micro-level, helping to iron out the finer design details.
Clarity Scoring Review
On the left, we have VisualEyes’ old method of reporting for clarity scoring. On the right, we have VisualEyes’ new, less invasive method of reporting for clarity scoring in a persistent plugin window.
At first I was confused by the clarity prediction scoring that VisualEyes offers, mainly because of its potential for ambiguity. Even after having read the docs on interpreting Clarity Scores, I’m not sure how a spectrum of ‘Cluttered’ to ‘Clear’ translates into a design clarity score, given that it relies on content density without much seeming regard for content hierarchy or information architecture, much less copywriting. Having said that, I still think that this tool could be useful for those designers who want a second opinion about their layout or content density decisions at a purely aesthetic level.
The ambiguity of this test could be improved with a better label like ‘Visual Clarity Score’ to qualify the scope of the reporting. It could also be improved if the docs further explained which aesthetic elements and factors are being taken into account when the VisualEyes tool conducts its scoring. As of writing this post, the docs on clarity scores still reflect the previous form of reporting, so this would actually be a good time to update the language explaining the test’s focus on aesthetic clarity.
Having said that, the VisualEyes team definitely knows that they can’t please everyone, as they mention in their docs: “We cannot eliminate every red area of our designs when we have to deliver some insights to our users and convey a message to them. You need to find a fine line between the score you want to achieve and the context you include in your designs.”
So What Could Make this Plugin Better?
My biggest suggestion for how the VisualEyes Figma plugin could improve has to do with the right-click menu UX friction I mentioned at the beginning of this post. Giving users the option to re-run another heatmap or clarity test from within the persistent plugin window, instead of them having to do it via the right-click menu (which involves multiple clicks), would greatly reduce the interaction cost of using VisualEyes in Figma.
Specifically, adding the ability to re-run a test from the score report interface would also make this plugin much easier to use in iterative design workflows where it may become tedious having to click three or four times to re-run a test after you’ve made a change in the design to improve a previous score.
Conclusion
The value that you get out of VisualEyes’ attention heatmap scoring and clarity scoring will obviously depend on a combination of factors – YMMV. Beginner designers, iterative designers, and data-driven designers are the three types I might expect to find VisualEyes most useful in general, although intermediate and experienced designers might still occasionally find the plugin useful when refining details in their compositions.
Overall I’m glad I gave this plugin a try, and I can definitely see myself using it every now and then, more for my professional projects than my personal ones. I can see myself using it both in UX research projects for activities like content audits and competitor landscape analyses, as well as in visual design projects.
I hope this plugin review showed you what it’s like to use the VisualEyes plugin in Figma, including some of its strengths and potential points of frustration for users. If you have any additional questions about this or any of my other plugin reviews, feel free to reach out to me on Twitter or via email!