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
pluginsandresourcesdirectories - Access your Axure settings by opening your
Applicationsdirectory - Right-click
Axureand select 'Show Package Contents' - Go to
/Applications/Axure RP Pro 7.0.app/Contents/Resources/DefaultSettings/Prototype_Files/ - Paste the
pluginsandresourcesdirectories (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.rpan example Axure Project/prototype/an example prototype/prototype/proto_custom.jscustomisable JavaScript file/prototype/proto_custom.csscustomisable 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 prototypeand target the/example-project/prototypefolderPage 1in 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)