Anima Introduces: Hotspots Hints

Hotspot Hints Help Guide Users Navigate Through a Prototype

Anima allows designers to create high-fidelity prototypes inside Sketch, Adobe XD, and Figma, and export HTML & CSS in a single click.

Design to code, automated.

What Are Hotspots Hints?

If your prototype has Links and you want to see where they are located during preview, toggle on the Hotspots Hint preference.

These hints will highlight the clickable elements of your prototype when you click on something that is NOT clickable and help those who are not familiar with the project to navigate through the prototype with ease.

1. Toggle Hotspots On/Off

From your Anima Project’s page click on the “Run Prototype” preferences icon and toggle the switch on.

Prototype Preferences on the Project’s page

2. Re-sync your Design

In order for the Prototype Preferences to take action, the design needs to be re-synced.

Go back to your design program and click Preview in Browser on the Anima plugin and then Sync to Project.

Re-sync project after Hotspots Hints is enabled

3. Run Prototype

Once the new Sync is up on the Anima Project’s page, click on Run Prototype, or go to the project’s Public Link (Click Share > Enable Public Link).

Notice how the Links on your design are highlighted with a light blue Hotspot when you click anywhere on the page that is not clickable.

YouTube video tutorial. Subscribe for more tutorial.

What is Anima?

Anima is automating the design-to-code process, allowing designers to achieve more without learning to code, and helping teams to deliver faster.

Design to code, automated.

As always, we’re excited to hear your feedback!

Vote for new features at UserVoice.

Join the discussion or show off your designs on Facebook, Twitter, Slack, Instagram.

Stay creative!
❤️ Anima team