What‘s new in
Hey, I made a new presentation on how to build mobile prototypes.
Check it out!
What’s new in Axure 7.0?
▪ Axure 7 is currently in beta (see the list of changes) to be (hopefully) released this
▪ It will be a free update to Axure 6.5.
▪ Possibility to prototype responsive websites (Adaptive Layouts).
▪ Database-like functionality (Repeaters).
▪ Makes it easier to build common interaction patterns.
▪ Fast preview of your prototype.
▪ Much improved user interface.
Axure’s approach to responsive design.
▪ Approach to responsive design, allowing you to define breakpoints
for your screen classes.
▪ Widgets have now adaptive properties (location, size, color, style,
▪ …and fixed properties (text, interactions, disabled by default).
▪ Your screen classes can inherit the adaptive properties from parent
▪ You can “unplace” widgets if you want to use a different
Tips for using
▪ Define your breakpoints.
▪ Layout your screen(s) in your base layout.
For Mobile First:
▪ Build you way up with “>=“ and re-layout your screens.
▪ …and set your “Page Align” to center (for the topmost view).
Axure’s approach to database-like content.
▪ A new widget containing data in a table-based format.
▪ You define the look for a single row within the Repeater. The layout
will then be applied to all elements.
▪ You adjust the display of the content (# elements per row, # elements
▪ You can filter the elements to be displayed.
▪ You can add or remove elements.
▪ Content can be copied from existing spreadsheets into Repeaters.
▪ Not a real database but a simplified version allowing you to
displaying and manipulated dynamic content in your prototype.
Improvements for Widgets.
− All widgets can be shown & hidden (not only panels).
− All widgets can be moved (not only panels).
− Improved “Show & Hide” actions.
− “This Widget” identifier for cases.
− Inner, Outer & Text Shadow.
− Lots of new events.
− New variables.
Improved Hide & Show.
▪ Bring to front
à combines commonly used interactions
▪ Treat a lightbox
▪ Treat as flyout
à As the name says :-)
à make place for new content
An identifier for defining actions.
▪ This Widget
à Faster assignment of actions to
the current widget.
▪ OnWindowResize: When a browser window is resized (Use with [[Window.Width]] and
▪ OnWindowScroll: When a browser window is scrolled (Use with [[Window.ScrollX]] and
▪ OnPageClick: When any part of the page that does not include a widget is clicked
▪ OnPageDoubleClick: When any part of the page that does not include a widget is double-clicked
▪ OnPageContextMenu: When any part of the page that does not include a widget is right-clicked
▪ OnMouseMove: When the mouse is moved anywhere on the wireframe
▪ OnPageKeyUp: When a keyboard key is released
▪ OnPageKeyDown: When a keyboard key is pressed
For all elements.
▪ OnDoubleClick: When a widget is double-clicked
▪ OnContextMenu: When a widget is right-clicked
▪ OnMouseUp: When a widget is clicked, this event triggers on the release
▪ OnMouseDown: When a widget is clicked but not yet released
▪ OnMouseMove: When the cursor is moved over a widget
▪ OnMouseHover: When the cursor is placed over a widget for longer than 2 seconds
▪ OnLongClick: When a widget is clicked and held for longer than 2 seconds
▪ OnKeyUp: When a keyboard key is released
▪ OnKeyDown: When a keyboard key is pressed
Check Box/Radio Button
▪ OnCheckedChange: When a radio button or checkbox option is selected.
▪ OnShow / OnHide
▪ OnSwipeUp / OnSwipeDown
Improvements for Dynamic Panels.
− Combined “Set State” & “Show” events.
− Auto-rotate panel states.
− Push & Pull actions for “Set State” & “Show/Hide”
− “Fit to content” (auto-resize of dynamic panels based on its active state).
− Get the name of the active panel state.
− OnClick event.
− “OnLoad” event.
Improved Set State.
▪ Show panel if hidden
à Combines Set State & Show
interactions that are commonly used
à Simplifies your interactions.
Improved Set State.
▪ Auto-rotate panel states
à Can be used to create rotating content
à Auto-rotation can also be stopped.
Improved Set State.
▪ Push/pull widgets
à Tells other elements to make space
when content changes.
à Use it together with the new “Fit to
à Can be used for collapsible lists.
Fit To Content.
▪ Shall the panels auto-resize to
show all the content of it‘s
Trigger Mouse Interaction Styles.
▪ Shall the widget styles of the
elements in the dynamic panel
be shown when you click on the
Save the name of the current panel state in a variable.
▪ Can be used to simplify your
OnClick and OnLoad.
▪ Finally an “OnClick” event for
▪ “OnLoad” allows you to
initialize a dynamic panel.
− Definition of text field types.
− Assignment of default values for variables.
− Folders for pages & libraries and on AxShare.
− View variable values from your prototype.
Text Field Types.
▪ This allows to show customized keyboards on mobile.