Table of Contents
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. In Axure 9 dynamic panels can be edited inline :)
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 :)
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"
In Axure 9 simple components can be create :)
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.