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?
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?
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?
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.