STEP BY STEP TUTORIALS

A directory of Axure RP

Step by Step Tutorials

Features

Learn

Community

Company

Buy

Download

Axure Share

Forum

Manage Licenses

 

eCommerce Website Tutorial

 

CORE TRAINING

Home

Features

Community

Learn

Support

Company

Download

Buy

Contact

Privacy

Legal

Sitemap

© 2002-2014 Axure Software Solutions, Inc. All rights reserved.

u56_start u56_end u56_line

 

 

 

 

eCommerce Website Tutorial

 

Mobile Website Tutorial

 

Getting Started

This tutorial shows how to add, edit, and style a widget. You also learn how to convert a widget to a master that can be reused it through your design.

Widgets & Masters

Working with Pages

Building Interactions

Conditions, Values, & Variables

Introducing Dynamic Panels

START FROM SCRATCH TUTORIALS

Create an ecommerce prototype from scratch using essential features including masters and dynamic panels.

eCommerce Website

Create a mobile website prototype that can be viewed on your device. You will learn how to lay out and generate a interactive mobile website prototype.

Mobile Website

PROTOTYPING BASICS TUTORIALS

This tutorial shows how to style a button shape widget with rollover, mouse down, and selected styles.

 

Interactive Button

Learn how to add multiple cases to an event, display a dynamic error message, and edit case descriptions to show the different user paths.

Show Hidden Widget

This tutorial shows us how to use OnPageLoad, "Set Selected" action, and masters to highlight the current page in a navigation menu.

Navigation Menu

 

 

 

This tutorial shows how to hide widgets and show them using an OnMouseEnter event with the "Show" action and treat as flyout.

Custom Tooltip

 

 

 

 

MASTERS TUTORIALS

This tutorial shows us how use the same master and raised events to open different Previous/Next links from each page.

 

Previous /Next Link

 

DYNAMIC PANELS TUTORIALS

Create lightboxes by hiding and showing dynamic panels that are pinned to the center of the browser.

Video & Image Lightbox

Tutorial on how to make lightboxes for images and video.

 

This tutorial uses a Dynamic Panel with multiple states and the "Set Panel State" action to set the content displayed in a tab control.

Tab Control

 

This tutorial shows us how to use dynamic panels and the "Set Panel State" action to create a Photo Carousel.

 

Photo Carousel

This tutorial shows us how to use dynamic panels and Push/Pull to expand and collapse sections in an accordion control.

 

Accordion Control

This tutorial shows how to use the Dynamic Panel to create custom flyout menus.

Flyout Menu

Tutorial on how to make lightboxes for images and video.

 

 

 

 

 

 

Drag and drop images to remove it from a batch using the dynamic panel events OnDragStart, OnDrag and OnDragDrop.

Drag and Drop Images

Learn how to use the OnLoad event to initiate an auto-rotating banner.

Auto-Rotating Banner

This tutorial shows us how to nest dynamic panels and create a window for panning a map, similar to what you would find on Google Maps.

Draggable Map

 

 

 

 

 

 

ADVANCED PROTOTYPING TUTORIALS

 

This tutorial uses conditional logic to create a login that displays an error message or links to a page depending on the email and password entered.

 

This tutorial shows how to dynamically enable and disable widgets when toggling a checkbox and typing in a text field.

 

This tutorial shows how to make a phone number form that automatically jumps to the next field when the prior field is complete.

 

 

This tutorial shows us how to use conditional logic and the ability to toggle an "Else If" to an "If" to make a form with multiple required fields and multiple error messages.

Account Login

Terms and Conditions

Auto-Tab Fields

Droplist Selection

Required Fields

Setting Text on

Droplist Selection

 

This tutorial shows us how to insert text into a text widget by making a selection from a droplist using local variables.

Pass Text to Next Page

Learn to use variables and the OnPageLoad event to pass a value from one page and display it in another.

 

Learn how to use variables and the OnPageLoad event to set the state of a dynamic panel on another page.

 

Set Panel On Next Page

 

 

 

 

This tutorial shows how to use conditional logic and the OnChange event to set a panel state based on the selection of a droplist.

 

 

 

STEP BY STEP TUTORIAL FOR REPEATER WIDGET

Learn how to add data, sort columns, and add/remove items using the repeater widget.

Repeater Tutorial

 

 

Learn how to add adaptive views and edit various widget properties on different views.

Adaptive Views Tutorial

STEP BY STEP TUTORIAL FOR ADAPTIVE VIEWS

Adaptive Views Tutorial

 

 

IPHONE APP TUTORIALS

This tutorial walks you through creating a sliding menu that animates up and down using dynamic panels.

This iPhone app tutorial shows you how to create a sliding transition between screens using dynamic panels.

Sliding Menu

iPhone Tutorial about how to create sliding menus.

 

This tutorial shows you how to create scrolling content inside your app using dynamic panels.

Scrolling Content

Scrolling content iPhone tutorial.

 

Animated

Screen Transition

State change navigation iphone app tutorial.

 

Create a swiping slideshow/carousel using the OnSwipe event and setting next/previous panel states. 

Swiping Slideshow

Swiping slideshow iPhone App tutorial.

 

 

 

 

 

WEB DESIGN TUTORIALS

Learn how to add maps and videos to your web design using the Inline Frame widget.

Embed Video and Maps

Tutorial on how to add video and map to your website wireframe.

 

 

 

 

This tutorial shows how to work with the sitemap, add guides, and make scalable changes to your page's styles.

 

Learn how to add and format a widget, add a basic link, and generate your first prototype.

 

 

 

 

This tutorial shows how to dynamically enable, disable, and set focus on widgets using actions.

 

This tutorial shows how to use the Dynamic Panel to to make a rotating photo carousel.

 

Learn to pass text entered in a text field or send the user to a different page if no text was entered.