Axure Redline Tool

Creator (Open Source)August 2016

This plugin intends to mimic some of the functionality of the plugin Measure for Sketch or InVision Inspect. This application is meant for those who rely on Axure in their organizations and would like to provide developers with always-up-to-date design specifications. As Axure does not support plugins within the application itself, this code resides within and is applied to your AxShare projects.

DEMOCODE

What's The Need?

Photo by Author

As designer’s, you’re focused on the small details. You notice that one-pixel misalignment. When handing off your designs to developers, it’s important to accurately convey these details. Simple images might suffice for the most robust of component libraries, but otherwise they’re not going to cut it. Many design and prototyping tools realized this and provide ways to export your designs into interactive redlines – providing important details such as spacing, sizing, and CSS attributes. When I created this tool, Axure had not joined the list of tools offering this.

How's It Work?

Photo by Helloquence via Unsplash

Plugins aren’t something officially supported in Axure, but I found an interesting loophole. When using AxShare – Axure’s remote hosting service, you are provided the ability to add simple scripts into the document. This is used for things such as tracking or enhancing your prototypes. I decided to see how far I could push this. I generated a script which injects itself into the pages, wrapping a new UI around AxShare prototypes, while tweaking the existing UI. This initially was accomplished by pasting the entire script into the page, but I migrated to the jsDelivr CDN for better availability and tracking.

How's It Built?

Version 1 was simple. I had no idea if anybody besides me had the desire for such a tool. I thought, “If it were needed, it would have been built already.” Things are complicated in Axure prototypes. You’ve the ability to create a whole host of interactions not seen in other tools such as Sketch. As I wasn’t sure of the feasibility or sustainability, the initial code base leveraged a simple structure of HTML, JavaScript, CSS, and jQuery for complicated DOM interactions. This worked! Word spread and interest was piqued. Feature requests and bug fixes started flowing in through all channels. GitHub became my primary tracking tool for all of this content.

As I continued development, it became evident that my simple project structure was no longer sustainable. It was time to migrate to a more robust solution. React became my preferred framework. I began development efforts on version 3. It was a complete rewrite. I ported over the logic and built new components. This build took many months, and I finally released, just one day before Axure formally announced their built-in inspection tool.

Is It Used?

Photo by Luke Chesser via Unsplash

My analytics are limited, but the short answer is, yes. I’ve never actively promoted the tool, other than posting on forums, but usage has grown organically. I received writeups around the world and have chatted directly with Axure about the tool. Users provide enhancement requests and identify bugs within the tool’s active community.

This website powered by Gatsby, NetlifyCMS, and clever coding.