As a personal side project, I developed this tool for Framer when it was still a free, open-source project known as Framer.js (2015). Highlightr was my custom Framer.js module (i.e. plugin), written in Coffeescript. It enabled users with the ability to easily overlay hotspots for clickable areas in your prototype, no crazy coding skills required. This was useful when creating more complex prototypes that might have multiple screens to navigate through.
The idea for Highlightr came from the pain point where users and reviewers would often get confused or lost navigating through a complex prototype. It would be unclear what to click/tap on next, and at the time, Framer.js didn’t have hotspots by default. Sure, you could create hotspots manually in each of your prototypes, but I wanted to make it scalable across all prototypes you or your team might create.
Create a plugin that automated hotspot creation and was easy to implement in your prototypes. It was important that people of all levels and backgrounds could easily use and implement this custom module in their prototypes. By allowing users to add a single parameter (
highlight) and setting it to
true on a
Layer, the plugin would handle this complexity behind-the-scenes:
Layerthe parameter was applied to.
Here’s an example of how easy it was to use Highlightr:
clickable = new Layer x: 20 y: 20 width: 300 height: 100 backgroundColor: "#F1F1F1" highlight: true # Show hit area with Highlightr