featured image for figma plugin 101 article by Toma Kanyte

How to Use Attention Insight Plugin for Figma

We are happy to announce that we have released the Attention Insight plugin for Figma!

Figma is a collaborative interface design tool that enables the entire team’s design process to happen in one online tool. Therefore, there is no wonder why it’s one of the most popular prototyping tools for UX/UI designers now!

So what do you do when a big part of your community uses the latest most popular technology? You listen and provide the best user experience as a service!

Install Attention Insight plugin for Figma and include data-driven insights into your workflow instantly! Artificial Intelligence in no time predicts where users look when engaging with your design. Don’t doubt even for a moment anymore & prove your design vision!

STEP #1  Find and Install Attention Insight Plugin for Figma

🔹Go to https://www.figma.com/community/plugin/968765016617421513/Attention-Insight
🔹Click the Install button 🙂 

OR

🔹 Click on Main Menu > Plugins > Browse plugins in Community 
🔹Type in “Attention Insight” > Click Install

Install Attention Insight Figma plugin

STEP #2 Log In 

🔹Right-click on a Frame > Plugins > Attention Insight > Analyze Design
🔹The login table will pop- up.
🔹Enter your account data or sign in with a Facebook account.

Attention Insight Figma Plugin Log In

*If you don’t have an account yet

Go to > https://app.attentioninsight.com/ and Sign Up! 

If you have questions on how to do it you can find them here.

STEP #3 Analyze Design!

🔹Right-click on a Frame > Plugins > Attention Insight > Analyze Design
🔹Wait for the 30s and analyze your results 🔥

Attention Insight Figma Plugin Analyze Design

After the result window pops up, you will be presented with your design’s Attention Heatmap and Clarity Score.

Under the results, you will see three buttons:

1. Add HEATMAP to frame

2. Get more insights 

3. Re-analyze selected

The first one is simple. It works as written. By clicking it, you will add your generated heatmap straight to your design in the Figma work field. 

The second one is much more interesting. By clicking Get more insights, you will be redirected to our app! Here you will be able to analyze your design even more thoroughly. 

Examine the percentage of attention of different elements, check how your results are performing by industry benchmarks, or compare which one of your designs performs better!

The third buttonRe-analyze selected, is here for safety! Yes, you heard right. If in any mysterious case, you experienced some trouble, press re-analyze selected. It will rerun the analysis without using any of your credits! 

Now you know it all! Make a choice that fits your needs best! Validate your instinctive choices with evidence and prove your design vision!

We hope you will find it helpful and enjoy it as well as we do!

In case you would like to share your experience with the community, click here.

Watch a video below to master all the processes! 

About Author

Complete Guide to DATA-DRIVEN DESIGN

Get ebook for free. Just leave your email below.

You will be subscribed to our mailing list.