Recently I’ve worked on a 3-day course for the people in my company. They needed to be able to do the basics of Axure RP9. Here I cover some basic and important features. You can do further things with the software, but they didn’t need to know it in so much depth.
1 – The Fundamentals
1.1- What is Axure?
Axure is an all-in-one software design tool for creating prototypes, specifications, and diagrams. We use it to design the Web tree, User flow, and Wireframe (a really basic design where we specify the structure of the content and interaction of the elements).
- Web tree: Map the connections of the different levels of pages and categories.
- User flow: Diagram that shows how the user-personas will interact with the website throughout the Customer’s Lifetime. Here you can specify the features that are thought for prospects and the ones thought for clients.
- Wireframe: A really basic design where we specify the structure of the content and interaction of the elements. The wireframe should look as interactive as the real website. This will guide developers when creating the site, so we should work on the error messages, responsiveness, and possible paths.
1.2- Where can I get it?
There is a new version of Axure that was launched this year (2021) that is Axure RP10. They have improved several things, but the most extended version right now is still RP9, so that is the one we will cover here.
If you go to axure website, you will see the new version.
Here you can find the RP9 version:
1.3- How to create a file?
This step is quite easy. As in many other softwares that you might be familiar with, you just need to click in File >> New or use the keyboard shortcut: CTRL (Command in Mac)+”N”
As we will see later, there is another way of interacting with Axure. That is “Axshare”. If you want to create a file for Axshare what you have to do is click in the button “Share” that you will find in the Top-right corner.
Once you click, a pop-in will appear. There you can define a name for the file and the folder you want it to be saved in your private Axshare cloud.
When the name and destination are correctly defined, you can either click in “Publish” or in the arrow next to it in case you want to replace an existing file with this new one.
1.4- Libraries
Libraries are groups of elements that you can use to create your designs. You will be able to find some libraries predefined when you download the software, but you can always add more libraries.
You can find the libraries at the left part of the screen, just below “pages”.
And if you want to filter to see a specific library, you can click in the “All libraries” dropdown and select the one that you want.
1.5- Flows
This feature is really useful when you want to create complex navigation flows. In order to have an overview of how all the pages are connected to each other, you can use these schemes.
If you want to use it, you just have to click on this icon (the second from the left, the blue one) in the Top menu:
Once this is selected, you will see that when you approach an element, it will show some crosses. You can click on any of them and connect it with any other element. When the two elements are connected, you can select the line and change the color, size, shape…
If you want to learn more about the meaning of each symbol, follow this link:
1.6- Axure Vs. Axshare
Axure, as we have already seen, is a design software.
But, what is Axshare?
To make files shareable and interact as a real website, Axure creates an online platform where you can save all your design and both your team and the client can enter to inspect the elements, comment.
When you publish a project on Axshare, you will have a URL. That is what you can share with both your team and the client.
If you enter a project in Axshare, you will easily differentiate 3 parts:
- Top navigation: Here you can display the other two navigation and will be able to change the size of the screen to check the responsiveness of the page (Only if it was designed with different sizes in Axure, as you can see in the two examples below). Also, in RP10 you will be able to inspect the element in order to extract the CSS.
- Right navigation: Here you can basically do two things: Check the notes made in Axure (this is useful for developers in order to understand how certain elements interact or behave), and read and write comments for modification requests.
- Left navigation: This type of navigation is very similar to Figma. There are folders & pages (Screens in Figma). It is very important to be organized with this. You must think that this is not only for you, the rest of the team and the client must be able to find everything. The best way is the create folders per size screens (Not necessary if working with responsive design), pages, categories, sections… and another folder just to save the designs that were not accepted in case you can recycle them.
With this organization, it’s normal to have huge files. A big project like TFS had over 270 pages just for the V1.
Each project will have its peculiarities and necessities, so we should be flexible. Also, projects might evolve, so beware of this to avoid having to reorganize everything after a couple of months of work because you didn’t plan it correctly.
Remember that the changes that you do in Axure will not be visible in Axshare in real-time. If you make changes and save the file but forget to publish the changes in Axshare, the changes will not be visible. This is one of the big differences between Axure and Figma.
1.7- Comment for change request
When you click on “Comment”, the interface of Axure will change. You will see a purple square around the design. That means that the Comment mode is active.
The next step is to click on the element you want to speak about and a box will appear. There you can write your change request. You can use different colors depending on the type of request. For example:
- Blue: Changes for UX
- Red: Comments for developers
- Yellow: Comments / Doubts for the client
When you finish writing all your comments, click on “Close” to save the changes. That’s it 🙂
1.8- How to share the documents?
As you saw when learning about Axshare, you can click on “Share” to generate a public link to access to your wireframe.
When you click there, a pop-in will appear. Click on “Publish” and it will upload the document to the cloud.
It will take a couple of seconds, maybe more if the file is heavy or your internet connection is low, but once it’s done, you will see a box like the one below with a unique link that you can share.
If you want to make a file collaborative, there are a couple of options. First, you can use a “Team project”. This option allows you to work on the same project at the same time with your colleagues. You will not see the changes in real-time, but you will all have the same file and information. I don’t recommend this option as it has many errors when sharing the file.
The second option -and the one that I recommend- is to upload the project to Axshare, so your team can download the last version of the file anytime. Here’s how to do it:
Go to Axshare (https://app.axure.cloud/app) and look for the workspace where your project is:
When you find your project and click on it, you will be able to pre-view all the pages inside and, in the vertical right menu, you will have access to both, the online version and RP file to download. This way anyone on the team can download the last version and continue with the project where they left it.
You can also go to the “History” tab in the top menu and check all the versions of the project that were uploaded. Sadly we can not download those old versions, so be careful with what you publish, cause it will overwrite the current version.
1.8- How to share the documents?
As you saw when learning about Axshare, you can click on “Share” to generate a public link to access to your wireframe.
When you click there, a pop-in will appear. Click on “Publish” and it will upload the document to the cloud.
It will take a couple of seconds, maybe more if the file is heavy or your internet connection is low, but once it’s done, you will see a box like the one below with a unique link that you can share.
If you want to make a file collaborative, there are a couple options. First, you can use a “Team project”. This option allows you to work on the same project at the same time with your colleagues. You will not see the changes in real-time, but you will all have the same file and information. I don’t recommend this option as it has many errors when sharing the file.
The second option -and the one that I recommend- is to upload the project to Axshare, so your team can download the last version of the file anytime. Here’s how to do it:
Go to Axshare (https://app.axure.cloud/app) and look for the workspace where your project is:
When you find your project and click on it, you will be able to pre-view all the pages inside and, in the vertical right menu, you will have access to both, the online version and RP file to download. This way anyone on the team can download the last version and continue with the project where they left it.
You can also go to the “History” tab in the top menu and check all the versions of the project that were uploaded. Sadly we can not download those old versions, so be careful with what you publish, cause it will overwrite the current version.
2 – Useful things
2.1- Responsive
As the way users navigate through the websites has changed, so has the way we have to design the websites. This can change depending on the project, but as a general rule, we should do a mobile-first design. First, we think about how to design everything for mobile devices and then we think of how to adapt it to mobile devices.
For this reason, there are two ways of working with Axure. The first one, to create different versions of each page depending on the device. The other one, which is the one I recommend, takes more time but it is worth it, and this is to do a responsive design.
In order to create the responsive design, you have to click on “Add Adaptive Views”. That will open a new window.
In this new window, you should select the different width breakpoints. For this, you will click in the dropdown “Presets” (top-right corner) and select one of the options or write the exact width there. Once the first size is selected, you can click on “Add” (top-left corner) and create a new breakpoint. You can repeat this process as many times as you want, but it is probably enough to have just two sizes: Desktop and Mobile.
When the breakpoints are created you will be able to change from one to the other in the upper part of the screen. As you can see in the image below, you have a new tab with the name of the devices. Be sure to deselect the “Affect All Views” option before creating elements that will only affect one view.
Axure can automatically resize some elements to match the requirement of the different views, but this feature does not work that well, so it’s highly recommended to check all the screen sizes every time you do any change in the design.
If you want to edit the size again, you can do it by clicking on the icon in the top-left corner, the one with two devices new to the tabs.
2.2- Organize the file
2.2.1- Outline
Outlines are the elements that you have used in order to create the interface. They can be text boxes, shapes, dynamic panels, groups…
In other softwares you might have called it “layers” or something similar.
The best way to work with Axure -and any other design software- is to create groups of elements, groups of groups, and groups of those groups. This way you can easily move the different elements without selecting each of them individually.
If you are creating cards:
- Group the texts
- Group the image with Group 1
- Group the Background with Group 2 (Now you have a complete card)
- Replicate that card and group all the cards together.
- If there was a title for that section, group it with Group 4.
If any other designer takes that project a couple of years from now, he will easily find all the elements in the list.
2.2.2- Pages
The group of outlines will create a complete page. A project will have several pages and the best way to organize them is to group them in folders (as we will see now).
2.2.3- Folders
When we are dealing with complex projects, folders will help us to give some logic to the screen mess that you can have. Use folders to group categories, sections, versions…
As happened with the outlines, it’s important to group the pages in a way that if another designer opens the file in a few years, he can understand the structure of all the content.
2.3- Naming
As groups are important to find specific things in the design, so are the names of the elements and pages. Pages should follow the same logical structure of the groups, so we will go from the bigger groups to the most specific ones:
Personal Space - Contracts - V3 - Car contract - Empty State
As you can see in the example, each piece of information is a group, so when you need to do a change on any page, it’s easy to map it just with the name.
2.4- Elements and Masters
As you might have already guessed, Axure is quite wide and has a lot to offer. In Order to design an interface we have some basic elements to play with:
- Box: Just a square or rectangle that you can modify and play with the color and even right inside. There are 3 already pre-designed
- Image: It’s like a box but with a background that represents an image
- Placeholder: This is a box with a big cross inside. It has the same purpose as the Image. It’s very useful for designing a wireframe. You don’t waste time selecting an image, you just put that element with the size that you want and that’s it.
- Shape: There are many other shapes that you can use, like circles, stars, triangles, hearts…
- Button: You have two levels of buttons pre-designed, but you can create your own just with a box. You change the color, insert some text, and round the corners.
- Check box: This element is just a text box with a functional checkbox pre-design. Very useful when creating a form or a signup page.
- Radio button: You can use it in your design, but if you want it to work as a real radio button (just one option selected at a time) you will have to select them, right-click and select “Assign Radio Group”.
- Link: This is just text but with a different color and underlined (to simulate a link).
- Text: Lines or paragraphs of Lorem Ipsum text to fill your design. There are different sizes predesigned (H1, H2, H3, paragraph…)
- Line: Just horizontal and vertical lines that you can add and change color, size, orientation…
- Hotspot: This is a transparent element that will help you create many interactions.
- Dynamic panel: This is what makes Axure a magical tool. To master Dynamic panels is to master Axure. This element lets you create different states for an element and create functional carousels, CTAs, and complex user journeys.
- Droplist: You can create them from scratch, but it’s better to use the existing pre-design droplists in order to save time. This feature will help you create a complex journey where the user has to make decisions
- Text field: This looks like a simple box, but it lets the user interact with it. You can edit it, create rules for error messages and transform it into a file input field (to upload documents).
- Icon: You can import icons but, in order to optimize your time, try to use the use that Axure already has.
If there is an element that you will use several times across the website (like the menu, sliders, or cards) you can make it a “Master”. This way, any change that you do to the Master item, will affect all the copies.
This is quite easy:
1 – Design an item
2 – Right-click -> “Create Master”
3 – Name it as you want and click on “Continue”
4 – The item will turn red and you will find the original in the Master menu (Next to Libraries)
If you want to modify it, double click on any of the copies or select it in the Master menu.
2.5- Basic interactions
Now we are going to learn how to create basic interactions in order to connect different pages of your project or move around on the same page.
2.5.1- Click to
This is basic to make CTAs work, but the same interaction will help you create more complex elements like interactive menus, tab navigation…
In order to make it work, you have to select an element and go to the right menu. There you will go to the tab “Interactions” and click on “New interaction” in order to display the interactions options.
There you will select “Click or tap” >> “Open link” >> the page you want to link
So once you have finished you should see something like this in the interaction tab and a lightning icon in the corner of the element:
2.5.2- Scroll to
To create this interaction we will follow the same journey as before but with a little difference:
Select the element >> Interaction menu >> New Interaction >> Click or Tap >> Scroll to Widget (Anchor link) >> Select the element you want to scroll to
You can also change the speed and how it’s animated. Normally we use “Ease in-out cubic”.
2.5.3- Hover
There are two different ways of creating this interaction. Depending on the type of element one will be better.
If what you want to make interactive is a single element (i.e. one line of text, a box, or a call to action), then go to «Shape properties». You will find it in the lower part of the right menu, inside the tab «interactions». There you can establish how you want the element to look when the mouse is over it.
The second option is for a group of elements. In this case, we will create a Dynamic panel with the different states and create the interaction you can see in the following image:
You could use the interaction «Mouse hover» but it requires the mouse to be almost a second over the element, which is too much in my opinion. With «Mouse enter» the interaction is quicker.
3 – The Hero Journey
3.1- Hot spots
You can find this element in the “Default” library. This element is transparent when you export it, but inside Axure you will see it with a translucent green color.
This element is very powerful. Because it’s transparent, it can help you out creating more dynamic interfaces.
When an element is too small to reach, you can put a Hot spot above and put the interaction inside of it.
Also, Axure automatically calculates the height of the page depending on the elements of the design. Because of it, if you want to make it bigger without putting more visible elements on the screen, you can put a Hot spot at the level you need, like in the example below.
3.2- Dynamic panels
Dynamic panels are one of the most powerful tools of Axure, if not the single most powerful. This tool makes possible a lot of important interactions like creating different states of the elements, creating sticky elements in the interface, making horizontal and vertical scrolls…
3.2.1- States
Dynamic panels are so powerful because they make it possible for the user to see different states of the same element and interact with it.
This is how it works:
1- You create the dynamic panel.
2- Double click on it.
3- You can either duplicate the first state or add a new one. Depending on the needs.
3.2.2- Map
To reproduce this interaction we will take a big image and convert it into a dynamic panel. Then we reduce the size of the dynamic panel so it’s not completely visible. Once this is done, we change the behavior to «Scroll as Needed».
3.2.3- Horizontal scroll
To create this interaction you have to follow the same steps as for the Map, but select “Scroll Horizontal”.
It’s important to know that the scroll will start from left to right and from up to down. So you can not start scrolling up or left. You can only go in those directions once you have first scrolled right or down.
3.2.4- Drag & drop
This interaction lets the user move elements around the interface freely. To make it work, you only have to convert the element you want to move to a dynamic panel. Once this is done, you add this interaction to it:
Then you can add more complex interactions like conditions when the element is over a specific area.
3.3- Sticky elements
In order to make the wireframes more interactive and similar to the real behavior of the site, sticky elements are great. Here we will see how to create some of these interactions.
3.3.1- Scroll
If we just want something to be stuck to either the top or the bottom of the screen, we just have to make it a Dynamic Panel and then change the properties as we will do in the first step of the following example.
The example I will show here is for when you want to show a different (Simple) version of the menu when the user scrolls down. To make this interaction possible, we will have to do two things.
First, We have to duplicate the element. One of them will be converted to a dynamic panel, we will stick it to the top, and then we hide it.
The second step is to create the interaction with the scroll. We want to create the effect that when the user scrolls to a level, we show the hidden menu that will be anchored to the top of the screen. But if you don’t create the inverse effect, when the user scrolls up, the menu will not disappear. So the interaction we have to create should look like this:
In this case, I have specified that the menu will appear when the user scrolls 200 pixels, but this might change depending on your design.
3.3.2- Pop-in
The way this interaction work is very similar to the scroll effect we saw before. We have to create an element that is hidden until the user does something that makes the element show up. The difference with this interaction is that now the Dynamic Panel will be stuck to the middle and center of the screen and when creating the interaction we will open the «More options» menu. There we will specify that the element should be treated as a Lightbox. This means that when it appears, it will add a dark blur effect to the background and if the user clicks outside, it will hide again the element.
3.4- Full-screen elements
Sometimes we will want to create elements that cover the whole screen. To create that we will have to create an effect that sizes the height and width of the screen and make the element match it.
Here you have the exact interaction you have to write:
This interaction will not be applied to any element, but to the page itself. Also, in order to make it work, the element that is resized has to be inside a dynamic panel.
3.5- Notes inside the file
This is important for the developers. It helps to explain the behavior of the elements and conditions.
Every time we have special behavior, we should specify the following fields:
- Description: What the element is
- Action: What the element does and how it does it
- Condition: if there are further specifications like a different behavior in mobile devices.
- Tracking: What information should we stract from the element? (i.e. «CTR of new users Vs. CTR of recurrent users»)
If you don’t see those fields, you can add them yourself by clicking on the Configuration icon in the top-right corner that you see in the following image.
Then you will see this Pop-up. Here you can edit the fields you want to see. If you want to change the name of the field, you just have to double-click on the field’s name. And, if you want to add new fields, you just have to click on “Add” and select the option you prefer. In this case, we will select “Text”.
Here you can see the result once you have created all the fields:
Here you have enough information to create your own projects with Axure.
Do you need help with something and didn’t found the answer here? Contact me!
Javier Catalán de la Puente 