Swap Widgets

Problem

If you have a widget that is referenced in many actions (event handlers) it is time consuming to swap this widget with another widget. You have to find all the actions where the widget is referenced and replace the reference with a reference to the new widget.

Solution

Create a “replace with” function. An example:

  • Select a widget or master.
  • Activate a new function called “replace with”.
  • Select a different widget or master.
  • Axure then replace all references to to the first widget with references to the second widget in all actions. Finally the first widget is deleted. This would make it much easier to exchange one widget with another.

Translation

Problem

It it requires a lot of work to create prototypes that support different languages.

Solution

The text on all widgets exist in multiple languages. A global setting defines the current language. The current language can be changed in the Axure editor and in the HTML prototype.

This makes it very easy to develop at prototype where you can switch between different languages.


Revert to parent settings in adaptive views

Problem

It is difficult to make a widget in an adaptive view revert to inherit some or all properties of the widget in the parent adaptive view.

Solution

Create functions that revert some or all properties on a widget to be inherited. Here is how it could work for all properties:

  • Select a widget.
  • Activate a new function called “Inherit all properties”
  • The widget now inherit all its properties.

In addition to this an “inherited” indicator can be added to all properties (that can be inherited). Clicking on the indicator will enable “revert to inherited” for that value.


Extend $axure(selector)

Problem

The query function of the $axure object is somewhat limited. To my knowledge it can only find widgets with a given name or id. An example:

var query = $axure('@Hello'); // Finds all widgets named 'Hello'
var query = $axure('#Hello'); // Finds widget with id 'Hello'

I order to make my JavaScript code more robust I often want to use more complex query selectors such as “child of”, “descendant of”, “label contains” and “owner is”.

Solution

Allow more complex selectors. Examples:

  • $axure('@Prefix*'); // Finds all widgets with a name that starts with 'Prefix'
  • $axure('@*Suffix'); // Finds all widgets with a name that ends with 'Suffix'
  • $axure('@Parent > @Child'); // Finds all widgets named 'Child' with an immediate parent called 'Parent'
  • $axure('@Parent > @*'); // Finds all widgets with an immediate parent called 'Parent'
  • $axure('@Ancestor @Descendant'); // Finds all widgets named 'Descendant' with an ancestor called 'Ancestor'
  • $axure('@Ancestor @*'); // Finds all widgets with an ancestor called 'Ancestor'
  • $axure('@Page » @Widget'); // Finds all widgets named 'Widget' with an owner (the page or master a widget is placed on) called 'Page'.
  • $axure('@Page » @*'); // Finds all widgets with an owner (the page or master a widget is placed on) called 'Page'.
  • $axure('@First, @Second, #Thrid'); // Finds multiple widgets with specific names or ids.

Workaround

A workaround is to use the AxureEx functions childOf, parentOf and labelContains. See axure.ex_api.


Interaction styles in custom widget styles

Problem

Interaction styles must be specified for each individual widget. If you have many widgets that use the same interactions styles, this is a time consuming task.

Solution

Make it so that interaction styles such as MouseDown, MouseOver can be specified in custom widget styles. A widget that is assigned a custom widget style where interaction styles are specified use these interaction styles.

Workaround

A workaround is to use the Axure function css and change the appearance of widget with javascript. See axure_api.


Panel state styles defined in custom widget styles

Problem

Panel styles must be specified for each individual panel. If you have many panels that use the same styles, there should be a more efficient way to specify the panel styles.

Solution

A custom widget style can specify panel formatting. When such a style is assigned to a widget, this formatting then applies to all panel states of the widget.

Workaround

A workaround is to use the Axure function css and change the appearance of widget with javascript. See axure_api.


See masters and dynamic panels in context when editing

Problem

When a master or dynamic panel is edited it is not possible to see the context it is used in.

Solution

Show the context in which a master or dynamic panel is used as a “background” image, when a master or dynamic panel is edited. A master can be used in multiple contexts, so the master must be opened from the context that should be showed in the background.

Editing a master or dynamic panel state in context would work much the same way group editing is done in Axure 8.


Folders/Layers

Problem

It is difficult to keep track of the widgets on pages and masters with many widgets.

Solution

Allow widgets to be grouped in layers. Widgets are grouped by layer in the widget manager. Visibility of layers can be turned on/off.

  • Layer 1
    • Widget A
    • Widget B
  • Layer 2
    • Widget C
    • Widget D

This feature is implemented in Axure 8. Thanks :)


Adaptive View Transitions

Problem

Some web pages use transitions when the layout of responsive pages change. We need to be able to prototype this behavior.

Solution

Enable transitions between adaptive views. As a starter enable “swing” transitions of positions and sizes.


Anchors (Fluid Layout)

Problem

Layout in Axure is static. This makes it difficult to prototype “fluid” layouts.

Solution

Enable the left, top, right and bottom positions of a widget to be relative to another widget. The position of a widget can reference the positions of another widget, like a cell can reference other cells in a spreadsheet.

Examples:

  • Two widget stacked horizontally
    • A.Left = 10
    • A.Top = 20
    • A.Width = 100
    • A.Height = 200
    • B.Left = A.Right + 10
    • B.Top = A.Top
    • B.Width = A.Width
    • B.Height = A.Height
  • 3 columns with a shared parent
    • A.Left = 0
    • A.Top = 0
    • A.Right = B.Left - 1
    • A.Height = Parent.Height
    • B.Left = A.Left + Parent.Width / 3
    • B.Top = 0
    • B.Right = C.Left - 1
    • B.Height = Parent.Height
    • C.Left = B.Left + Parent.Width / 3
    • C.Top = 0
    • C.Right = Parent.Width
    • C.Height = Parent.Height

Currently Axure render widgtes as images. In order for widgets to change size in a nice way, a different approach is required. One solution may be to use SVG graphics that “scale intelligently” (see http://codepen.io/desandro/pen/WbxYLo).


Page States

Problem

We need to be able to prototype single page web applications.

Solution

In order to support “single page” applications support for “page states” would be an efficient solution.

  • Page 1
    • State A
    • State B
  • Page 2
    • State A
    • State B

Page states are accessible form the site navigation panel. Page states do not reload the page in the browser, but they affect browser history. States are handled similar to responsive layouts, where element properties can differ between the different view states.

The state of dynamic panels is also dependent on page state.


Improved Review Functions

Problem

When prototypes are reviewed it is difficult to capture “feedback”.

Solution

Improved annotation of prototypes hosted on axshare. Drawing and writing directly on top of the prototype.


Click Through Widgets

Problem

When a widget is placed above another widget, the topmost widget gets all the mouse events. It would be nice if a widget could be set not to capture mouse/touch events, so that the widget behind it receive the mouse/touch events.

Solution

All widgets should have a “ignore mouse events” property. Modern browsers support this in as a style.

Workaround

Use a group and use the events on the group. This is a workaround in some of the situations where “ignore mouse events” is needed.


Components

Problem

Custom widgets can only be “customized” by breaking them away from their masters, and then they loose their connection to the master.

Solution

Masters can be used to create custom components. Apply the principle from repeats to masters. A master have named properties that can be read in a “OnPropertyChange” event. This can be used to make masters more genetic.

Master A:
  OnPropertyChange: Set the text on widget A to the value of property A

Widget A on a page that use Master A:
  OnClick: Set "Property A" on "Master A"

Invoke event handlers

Problem

Axure lacks “functions”.

Current workaround:

Widget A:
  OnMove: set text on this to "hello"

Widget B:
  OnClick: move Widget A

Solution

A widget, page or master can define “functions” that can be invoked.

Widget A:
  DoSomething: Set the text of this to "Hello"

Page B:
  DoSomething: Set the text of widget A to "World"

Master C:
  DoSomething: Set the text of widget to "Alloa".

Widget B:
  OnClick: invoke DoSomething on widget A.
           invoke DoSomething on page B.
           invoke DoSomething on master A.

This requires a “Add function” function on widgets, pages and masters and a “Invoke function” in actions.

Workaround

In Axure 8 custom events on masters can be fired from actions. Use this workaround to define functions. Or use AxureEx to define real custom functions, that can be called from any expression in an action. See axure.ex_api.


Disable actions

Problem

To test different ideas it would be great to be able to disable specific actions assigned to an event.

Solution

In an make it possible to disable actions in the Axure editor.

Widget A:
  OnClick:
    [x] hide "Widget A". (Action is enabled)
    [ ] move "Widget A". (Action is disbaled)

Allow repeater datasets to be updated without reloading

Problem

Currently when a repeater dataset is modified all repeater items are “reloaded”. In some situations it relevant to “just” update the dataset and not “reload” the repeater items.

Solution

In the “Update” action there should be a ”[X] Refresh repeater items” checkbox.

Workaround

Use AxureEx to update repeaters without refreshing the repeater. See http://b2grli.axshare.com/#g=1&p=repeater_a.


Store variables and repeater datasets in browser local storage

Problem

When you go back to a previous page, all changes to variables are lost.

Solution

Currently variables are stored in the URL. If variables and datasets where stored in browser local storage, the URL would not get so big, and the information would not depend on browser history.

The values of global variables are “lost” when the user go back in browser history. It would be great to have persistent variables. These could be stored in local storage, in cookies or on a server.

Workaround

Use AxureEx to store data in session or local storage. Use AxureEx to load and save repeater data to local or session storage. See http://b2grli.axshare.com/#g=1&p=repeater_a.


Shared repeater datasets

Problem

In many situations it makes a lot of sense to share a repeater dataset between a number of repater widgets.

Solution

Datasets for repeaters can be shared between different repeaters. This would require that a repater can be set to “inherit” its dataset from another repeater widget, or that repeater datasets and repeater widgets are decoupled.

Workaround

Use AxureEx to load and save repeater data to local or session storage. See http://b2grli.axshare.com/#g=1&p=repeater_a.


Paste page and dynamic panel background images

Problem

I often draw the background images of pages and panels in Axure, but I must first export the images in order to use them.

Solution

Allow page and dynamic panel background images to be pasted from clipboard.


Sound & Video

Problem

Prototypes that contain sound or video can not be prototyped.

Solution

Add sound and video widgtes to Axure.


"Local" variables

Problem

All global variables are stored in the URL. Quite often some of these variables do not need to be passed to subsequent pages, but they are and that makes the URL really long.

Solution

Add a ”[ ] Local” check box to each global variable. If it is checked the value of the variable is “forgotten” each time you go to a new page.

Workaround

Write you actions in javascript :) http://b2grli.axshare.com/#g=1&p=javascript.