Axure Tutorial: Simple Efficiency Artifact - Components

What are the components?

Components( masters in below Axure 10) are used in a Axure file and can show consistent/independent templates on all pages depending on how they are used.

What are the benefits of a component?

  • Reduce duplication of work and increase efficiency.
  • Unified modification reduces the error rate due to repeated modification.

How to create a component? 

There are two ways to create a component: by converting a drawn prototype into a component, and by creating a new component. 

The first one: Convert the drawn prototype into a component

1. First, select the widgets that need to form the component , right-click, and select Create Component.

2. Fill in the component name and check whether to show this pop-up every time. You can modify it according to your needs.


The second one: create a new component

In the Component module in the lower left of Axure, click the Add Component button in the upper right corner, a new component will appear in the module, modify the name of the component, and double-click the component to enter the canvas to create the component you need.

The default usage of the component created in this way is Place Anywhere , which can be modified by right-clicking the component and select Drop Behavior.

There are three ways to use it. You can choose one of them. The 3 ways are explained below:

  1. Place Anywhere: can be placed anywhere, which means that the component can be placed in any position by dragging or coordinate transformation. It is generally used for common controls on pages, such as pagination on table page.
  2.  Lock to Component Location: the placement location is the same as the component location, which means that the location when using the component is the same as the location in the component canvas and cannot be changed. Generally used for page fixed frame, such as top menu bar.
  3. Break away: used independently. It means that when the component is pulled out and used, it is immediately separated from the component. The modified content will not affect other pages using the component. It is generally used for independent modules with more changes in content, such as lists. 


How to use the component?

Double-click the component to be modified in the component module, and then modify the content after entering the component.

(If the selected drop behavior is Place Anywhere or Lock to Component Location, all pages using the component will be modified after the modification is completed)

This can effectively improve the efficiency of prototyping! Have you learned?

 If you have any questions and suggestions, please leave a message.


If you like the article, please share it with others with page link, thanks for your supporting! ❤

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

Leave a comment

Please note, comments must be approved before they are published

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

This section doesn’t currently include any content. Add content to this section using the sidebar.