Axure Tutorial: Make Interactive Mobile App with Only a Canvas


As we all know, Axure can be used to design not only low-fidelity prototypes such as wireframes, but also interactive high-fidelity prototypes, so as to combine UI / UX.

Generally speaking, the UI design draft is designed in professional design tools, such as Sketch or Figma. In order to facilitate viewing and editing, these design drafts are often completed in one canvas.

After importing them into Axure RP, how to realize the interactions between all pages. I believe most designers put them into different pages, and then design the whole app by linking these pages. But the disadvantages of this method are also obvious:

1. Page transition motion is difficult to set.

2. Because all pages are not on a canvas, it is difficult to refer to other pages in design.

So, in order to achieve high fidelity interactive prototype. What should we do?

The first is to use the inline framework to load different app pages, which I mentioned in the tutorial “Axure tutorial: Make Interactive Nav Frame”; The other is to make all pages and pop-ups into different dynamic panels and place them in a canvas.

The latter is more intuitive and similar to the UI design way.

Today we will learn the second way.

Widgets Setup

1. First, we set the size of the canvas to the size of iPhone 11. This is also consistent with the design draft.

2. Then copy all UI design drafts into the canvas.

Only place the Home page in the design area of the canvas. Other pages and controls are not in the design area of the canvas, so they are invisible after generating the prototype.

Interactions Setup

Postion Settings

1. Make other pages into dynamic panels. And pinned at the center top of the browser.

2. The pop-up is fixed at the corresponding place on the screen according to the desired position of the pop-ups.

3. Hide dynamic panel when the dynamic panel is loaded (all pages and popups). With this setting, the dynamic panel will not be shown on the screen.

Page Transition Settings

When the button is clicked, the responding page is shown and the animation of sliding to the left is set.

When the action sheet button is clicked, the corresponding action sheet will be shown, and the sliding up animation will be set.

Enter the dynamic panel of the secondary page, select the back button, set that when the button is clicked, the secondary page will be hidden, and set the animation of sliding to the right.

In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.

Note: Click here to download the completed RP file for this tutorial (RP 10 or up).

Well Joe @AxureBoutique, a technology writer and teacher, focuses on Axure prototype design and product design.

#axure widgets #ux design #Axure templates #Axure tutorial #Axure #Product Design & Product Manager #UI / UX / Interaction Design




We Only Provide High-Quality Axure Tutorial, Axure Libraries, Templates.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Well Joe

Well Joe

We Only Provide High-Quality Axure Tutorial, Axure Libraries, Templates.

More from Medium