bitzen505 / axure-boilerplate

helps you create clean and well documented wireframes in axure. including adjustments to resource files and prototype files.

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;

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

Installation

---

OSX

1. Open the /axure-settings/ directory that you just downloaded
2. Copy the the plugins and resources directories
3. Access your Axure settings by opening your Applications directory
4. Right-click Axure and select 'Show Package Contents'
5. Go to /Applications/Axure RP Pro 7.0.app/Contents/Resources/DefaultSettings/Prototype_Files/
6. Paste the plugins and resources directories (agree to overwrite the existing files)
7. Install the fonts by going to /resources/css/fonts/ and double-clicking on each ttf file and clicking 'Install Font'.
8. 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

1. wireframe_with_annotation_panel_ver01.rp an example Axure Project
2. /prototype/ an example prototype
3. /prototype/proto_custom.js customisable JavaScript file
4. /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

---

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

Editing annotations

---

1. Open /example-project/wireframe_with_annotation_panel_ver01.rp
2. Select Page 1
3. Edit the example annotations panel provided on this page (View -> Dynamic Panel Manager in the main menu to display the pane)
4. Drag one of the annotation dots to the relevant area on your page (it must be lower on the page than 70px)
5. 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/