Axure refined

Axure is a popular prototyping software available on OSX and PC.

These additional files will help you create cleaner wireframes that are well annotated and more flexible than previously possible.

Additional functionality includes;

Cleaner sitemap design,
A collapsible annotations side-panel,
Correlating annotation dots that are hidden when the annotation panal is collapsed,
The option to add custom JavaScript to your projects,
The option to add custom CSS to your axure projects.

Example of collapsible annotation side-panel

Files in this repository

/axure-settings/ Files to add to you Axure app settings
/example-project/ Example project with a collapsible annotations
/icon-fonts/ Handy icons for your wireframes (optional)

What you need

You will require an installed copy of Axure 7.0

Then you can download and install this repository.

How to download

You have two options;

Download the zip, or
Open terminal and type git clone https://github.com/paulcaseys/axure-boilerplate.git

Installation

OSX

Open the /axure-settings/ directory that you just downloaded
Copy the the plugins and resources directories
Access your Axure settings by opening your Applications directory
Right-click Axure and select 'Show Package Contents'
Go to /Applications/Axure RP Pro 7.0.app/Contents/Resources/DefaultSettings/Prototype_Files/
Paste the plugins and resources directories (agree to overwrite the existing files)
Install the fonts by going to /resources/css/fonts/ and double-clicking on each ttf file and clicking 'Install Font'.
Restart/Open Axure

You have now installed the default settings. Now when you generate a prototype, it will generate custom javascript and css.

Example project

An example project is included in the /example-project/ directory. It contains;

Annotated side-panels
Optional extensibility using custom JavaScript and CSS files

files included

wireframe_with_annotation_panel_ver01.rp an example Axure Project
/prototype/ an example prototype
/prototype/proto_custom.js customisable JavaScript file
/prototype/proto_custom.css customisable CSS file

proto_custom.js and proto_custom.css are globally embedded across all of your wireframes. You can edit these and update functionality across all pages.

To see an example of how to add a custom JavaScript file in a specific wireframe page, please refer to the Icons, Fonts and JavaScript page contained in the example project.

Generating a prototype with annotated side-panels

Open /example-project/wireframe_with_annotation_panel_ver01.rp
Generate prototype and target the /example-project/prototype folder
Page 1 in your sitemap will contain annotations

Editing annotations

Open /example-project/wireframe_with_annotation_panel_ver01.rp
Select Page 1
Edit the example annotations panel provided on this page (View -> Dynamic Panel Manager in the main menu to display the pane)
Drag one of the annotation dots to the relevant area on your page (it must be lower on the page than 70px)
Generate a prototype

Icons

Icon font-faces are included in the css, so icons will appear in the client's browser.

Font Awesome

http://fortawesome.github.io/Font-Awesome/cheatsheet/ (copy and paste any icon into your wireframe, and select FontAwesome as the font)

Modern pictograms (normal)

http://modernpictograms.com/

bitzen505/axure-boilerplate