A while ago, we included Axure RP in our list of great free wireframe tools for web designers & developers. That’s because Axure is a fantastic program that allows you to easily create wireframes and prototypes for web and desktop applications. What it lacks though is a robust commenting tool and the functionality that is offered by Usersnap. We think that Usersnap can fill a gap in the Axure experience that is commonly met with frustration by many designers.
In the following article we will explore why this is the case and give you a step-by-step guide on how to get the most out of Axure by pairing it with Usersnap.
What is Axure?
Axure RP is one of the most popular tools for creating prototypes and wireframes for UX and design of applications. According to its website, 87% of the Fortune 100 companies use Axure RP to create prototypes for their software projects.
In contrast to tools like Photoshop, Axure offers the possibility to create fully interactive and responsive prototypes without the need to write a single line of code. Basically any event of the desired user interface of your prototype can be mapped to actions like pressing a button or swiping the screen on a mobile application. Axure then generates a HTML or CSS file for customers, clients or developers to test the interactive prototype.
The user interface of Axure uses a drag & drop surface and an extensive library of widgets that cover almost every element of web applications. From text fields to drop lists and interactive forms, the variety is truly astounding and enables users to create wireframes completely to their own requirements.
Besides widgets, Axure offers dynamic panels, masters and the functionality to work with different view ports.
Dynamic panels are special widgets that contain multiple versions of a design, which are called “panel states”. Only one panel state can be visible at one time and they can be switched to create multi-layered components or slideshows.
Masters are used to create recurring elements that are used on every page of a website or application. If the master is changed, all other instances are changed as well.
If the finished project is exported as in HTML format, it creates a fully interactive and clickable prototype. It can also be saved as a CSS file, in which case developers can keep working on the prototype with other programs. Besides the prototype itself, Axure offers the possibility to create a documentation file with pictures of every step in Word format.
How can Usersnap make Axure even better?
One point that has often been criticized about Axure is the missing functionality of adding comments directly to wireframes. You can add comments to the sidebar, but not directly to your project and with no option to point to certain areas of the interface.
This is where Usersnap comes in. By embedding Usersnap with Axure, you can take screenshots of any state of your project and user our wide range of options to add comments for your clients or colleagues. You can draw on the screenshots to highlight areas or certain functions of your prototype and place comments anywhere you like, all directly in your browser.
You can test Usersnap for free for 15 days to see for yourself how it can improve the way you work with Axure.
How to embed Usersnap in Axure
Here is a quick how-to guide to show you how you can embed Usersnap in Axure.
This guide was provided by User Experience Designer Oliver Navratil, who is working for EXOS as a contractor for Google.
Copy the code for embedding Usersnap in websites from the WIDGET CONFIGURATION page in Usersnap.
Log into AXURE SHARE and find the project you want to add comments to under WORKSPACE > MY PROJECTS.
In the PROJECT SETTINGS on the right, click on PLUGINS.
Inside the PLUGINS page, click on NEW PLUGIN.
CHOOSE A NAME for the Plugin, give it a priority (only matters if other plugins are inserted) and select END OF THE BODY. Paste the code into the CONTENT box.
Select WHICH PAGES within the file you want to add the plugin to. Optional: Select the checkbox to add Usersnap to FUTURE PAGES.
Done! Enjoy your new functionality to make highlights and comments within Axure, directly in your browser!
As you can see, embedding Usersnap in Axure can be done within minutes and without having to install a single piece of software. Just copy the code into Axure, and you’re ready to add comprehensive comments to any prototype or wireframe.
If you’re interested how Usersnap works with other applications, why don’t you check out our tour for new users?