Axure 8

So, you know Axure? Great, time to get some training.

As an Axure software trainer, I can't tell you how many times I've been in the middle of a group training when an advanced user tells me "I didn't know about that, that one tip was worth my whole day."

Axure Training Class

Axure Training Class

The user in the quote above is the one "sitting in" while the rest of his group gets trained. That user often has created very advanced prototypes with repeaters, math, local variables and functions. But like most users, he learned Axure on his own. He stumbled through it with trial and error, getting things done as quickly as possible while on the job. After a while, he got addicted to the instant gratification Axure prototypes provide, and probably spent many a long hour "perfecting" his prototypes and digging deeper into more advanced prototyping features.

If this is anything like you and/or your team, read on.

There is nothing wrong with learning Axure this way. The best learning happens when motivated by deadlines and real-world projects. But often the big picture is missed: Axure is not just a design program, it's a system of features that when used together in the right ways, based on the company, project, and team, can work seamlessly, beautifully, and efficiently to create something amazing. But it can also be used in the wrong ways, causing inefficiencies, confusion, and missed opportunities without even knowing it.

Here are the top 5 things intermediate to advanced Axure users get out of our training classes:

1. Prototyping Process

Understanding a prototyping tool starts with understanding prototyping itself. What it is, what it isn't, and how it should fit into a user-centered product design process.  

2. Standardizing the Work

Axure is well known for its capabilities to mimic sophisticated functionality in the browser. But perhaps more important are its features that standardize across pages and even files. Used alone or in combination, styles, widget libraries, masters, import/export, and other features create the efficiencies that stretch Axure and your team's design capabilities (and time) to the max.

3. Lesser-known Features

Some features of Axure just aren't as obvious as others. But knowing them can take your prototypes to the next level and same you a TON of time.

4. Workflow Tips

While we are an approved Axure trainer, we don't work for Axure. We love the program, but it's not perfect. We are honest about what parts of the tool are best used, and what parts need some work-arounds. We share our best tips on how we use Axure after getting to know it for 10 years.

5. Working in Teams

Even if you are a design team of one, it may not always be that way. Teams need tools to help them collaborate and a workflow for sharing assets, guidelines, and files. Combining standardizing features, proper process, and team project tools make this all possible.

Learn more about our Axure training and feel free to contact us with any questions you may have. We specialize in on-site training for organizations and/or teams.

Axure 8 Styles Primer

Using Styles is a best practice in Axure; here's how to do it

This post describes the three different types of Styles in Axure and how to use them. It also recommends when you should use Styles and when you may not need to.

This article is now up to date for the latest release of Axure 8.

introduction to Axure Styles

Styles provide efficiency and consistency by allowing you to manage mainly visual characteristics for Pages as well as both static and interactive page elements (called Widgets) in one place. Styles work on their own as well as with other Axure features such as Widget Libraries, Masters and Repeaters and can be imported into other Axure documents for sharing and re-use.

The Axure 8 interface has improved visibility of and access to all three types of Styles (Page, Widget and Interaction) to help make this all easier. All Styles are now accessible via the Inspector pane on the right side of the interface (Figure 1).

Figure 1: Axure 8 interface access to Styles.

page Styles

Page Styles allow you to edit, save and apply characteristics that affect a whole Page. You can change the Default Page Style as well as create new Page Styles. These characteristics include:

  • Page Alignment: whether everything on the page will be left or center aligned
  • Background Color
  • Background Image with Repeat (tiling), Orientation, and Stretch options
  • Sketch Effects: this feature allows you to make everything look hand drawn for that low fidelity effect. Use the Axure Handwriting font or another one.

Some of these characteristics must be viewed in the browser to be seen.

How to use Page Styles

When no Widgets are selected, the Inspector pane reflects the Page Style in the "Style" tab.

Figure 2: The Update and Create links are visible next to the drop-down menu once a change is made.

Edit the Default Page Style simply by adjusting the characteristics as shown in Figure 1, or another Page Style by selecting it from the drop-down menu. To save, click the "Update" link which appears once a change is made (Figure 2). Using the Default is the easiest way to edit the Page Style for all Pages in a document because all Pages take on the Default Page Style unless its Style is changed.

To apply a Page Style to a Page, select it from the drop-down menu while on that page.

To create a new Page Style, adjust the characteristics and then click the"Create" link. (This basically works as a "save as.") You will then be prompted to name and save your Page Style in the Page Style Manager (not shown).

You can also access the Page Style Manager to create, update, duplicate, or delete Page Styles by clicking the little icon on the far right in Figure 2. From there you can also copy characteristics from a Page into a Page Style.

Figure 3: The Page Styles icon is visible when a Widget is currently selected to provide another access to Page Styles.

To access Page Styles when a Widget is selected, click the icon at the very top right of the Inspector (Figure 3).

To edit Page characteristics on a one-off basis without saving or changing a Page Style, simply do that but don't click the "Update" link.

Widget Styles

In Axure, a Widget refers to really anything on a page, as everything originates from a Widget Library.

Commonly skipped when first using Axure, Widget Styles allow you to edit, save and apply visual characteristics for things like text, shapes, buttons, and lines. This saves a lot of time! For example, if you want a page title font and size or a button shape and color to be the same on every page, you can manage these characteristics in a Widget Style and it will update every instance in that file. You can also do this with Flow Shapes and Connectors and use them in conjunction with other Axure features like Interaction Styles, Widget Libraries, Masters and Repeaters.

Widget Style characteristics include:

  • Font
  • Typeface
  • Bold/Underline/Italic
  • Font Color
  • Line Color/Width/Style
  • Corner Radius
  • Fill Color
  • Opacity
  • Outer/Inner/Text Shadows
  • Horizontal and Vertical Alignment
  • Top/Bottom/Right/Left Padding
  • Line Spacing

HOw to use widget styles

Figure 4: Inspector pane, Style tab with Widget selected.

In Axure 8, both Page Styles and Widget Styles are accessible in the Inspector pane under the Style tab (Figure 4). Which one you see just depends on what is selected. Select any Widget and the Style name and settings are just underneath the Location and Size settings. The paradigm works very similarly to Page Styles.

To edit a Widget Style, update the characteristics below the drop-down menu and then click the "Update" link which appears once a change is made.

To apply a different Widget Style to a selected Widget, simply select the Style from the drop-down menu either in Figure 4 or at the top left of Figure 1 (when a Widget is selected, all Widget Styles are available here.)

To create a new Widget Style, set the characteristics the way you want them and then click the "Create" link which appears once a change is made.

You can also access the Widget Style Manager to create, update, duplicate, or delete Widget Styles by clicking the little icon next to the drop down menu on the top left of Figure 1. From there you can also copy characteristics from a Widget into a Widget Style. 

To edit Widget Style characteristics on a one-off basis without saving them, simply do that but don't click the "Update" link. 

The Format Painter at the top middle of Figure 1 allows you to copy and paste saved Widget Styles and one-off characteristics as well.

Interaction Styles

Figure 5: Interaction Styles editor showing where to apply a Widget Style.

Interaction Styles allow you to set visual characteristics that are triggered by interactions. The best thing about these is they are built into many Widgets so you don't need to use Actions, Events, or Dynamic Panels for many simple interactions. Many users overlook this feature and therefore are using much more time-intensive and messy methods in Axure when they don't need to. The built-in Interaction Styles are:

  • Mouseover
  • Mousedown
  • Selected
  • Disabled

You can also use these in conjunction with Events. For example, you can set an OnClick event to show a Widget in the Selected state. And they can be used with Widget Styles: a best practice is to create a Widget Style and then designate an Interaction Style as the Widget Style (Figure 5).

How to use Interaction Styles

Figure 6: The Axure 8 interface showing Interaction Styles in the Inspector pane.

Unlike the other two types of Styles, Interaction Styles are actually found in the Properties tab of the Inspector Pane (Figure 6). With a Widget selected, click an Interaction Style and set the characteristics you want. You will be able to use Widget Styles (Figure 5) to do this. Alternatively, you can right click on a Widget, select Interaction Styles, and set the same characteristics there.

Unfortunately, you can't save, name, and re-use Interaction Styles to apply to other Widgets the way you can with the other two types of Styles. But, as stated above, designating a Widget Style as an Interaction Style gives you the best document-wide control over this feature.

adaptive views 

When a Style is updated or saved, that change affects all Adaptive Views (Axure's way of creating prototypes that adjust to screen size) using that Style. Saved and named Styles in Axure are not "adaptive," meaning they can not adapt or change using the Adaptive Views feature on their own. But, Style characteristics can adapt when manually set. There are various workarounds being used such as using an adaptive Widget Library but that is a topic for perhaps another post.


To get more information on using Axure Styles and its related topics, check out Axure's website and discussion forums.


To use or not to use styles

That is the question. And everyone might have a slightly different answer. It really depends on your working style, the type of project, and what stage the project or design is in.

When to use Styles

In most cases, using at least one type of Style is very likely to make a designer's life a lot easier by allowing maintenance of a document to be faster and less error-prone. It can make Axure files much cleaner and easier to collaborate with.

There are some cases where Styles are a must to save you and your team tons of time and sanity:

1. A good rule of thumb is to use Styles when you have documents with more than five pages because it is highly likely that it will have elements with the same characteristics.

2. Another is with prototypes with high visual fidelity. When the client changes a hex color, you don't have time to update individual instances all over your document.

3. If you are working with a team, using Styles is one of the best ways to help each other manage and understand the visual standards to be used.

4. If you ever want to use the same visual characteristics in future documents, you will want to set them as Styles so they can be easily imported into other Axure documents and re-used.

When you may not need to use Styles

Most designers will agree it is best to sketch and ideate on paper than in software because it's faster and more conducive to the "flow" state. But, we've all been guilty of jumping right into our design tools, especially if we are comfortable with them, and basically sketching electronically. If you find yourself doing that and you don't know where the design will lead you, it might not be the right time to use Styles. Staying in your creative flow or experimenting with interactions is your focus and it may not be worth interrupting to set Styles. Also, if you are trying to get something done super fast Styles may slow you down (although set or update them right after your deadline!). Finally, if you only have a one or two page prototype without much repetition of visual characteristics then Styles may not be worth your while.

Want to learn about Styles and many more Axure best practices? Contact us about our Axure training services.

The instruction and opinions in this post are purely those of Usability for Everyone, LLC and do not reflect those of Axure Software Solutions or Ax-Stream. This post is accurate to the best of our ability and expertise but may not be perfect. Feel free to contact us or comment below if you find any issues with it. Usability for Everyone, LLC does not accept responsibility for its readers' use of Axure.