|||

Highlightr for Framer.js

Highlightr - Framer.js Module

Overview

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 problem

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.

The solution

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:

  • Dynamically detect how big the hotspot should be based on the size of the Layer the parameter was applied to.
  • Know when the hotspot should or should not display based on user interaction.

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

This plugin has been deprecated and is no longer usable, but if you are curious how I made it, check out the source code.