Axure Tutorial: Common Widgets - Shape

Introduction

This article is a section of course Axure Full Course: Tutorial, Tips and Templates.

Shapes is the most common widget. Our commonly used buttons, text, and various boxes are fundamentally variants of shapes.

Change Shape 

Various shapes can be converted to each other. Right-click a shape and click Select Shape in the context menu to select the shape of the shape.

Change shape

Draw Shape

With the Pen Tool, we can draw Shapes of custom shapes. Select the Pen Tool on the Style Toolbar and draw the shape on the canvas. The use method of the pen tool is basically the same as that of other designing tools.

 Use pen tool to draw shape

About Text and Button

Essentially, Text, Including Headings, are special shapes. No background filling, no border, no rounded corners, Fit to Text Width and Fit to Text Height are set.

Text

 

 

You can turn it into a button by adjusting its style.

 

Convert Shape to Component

You can convert frequently used Shapes into Components for easy next use.

Right-click the button, select Create Component, turn it into a Component. The next time you use it, just drag it to the canvas.

 

Save Shape Style to Widget Style

There is another way to quickly create a Shape style, that is to use Widget Style.

Select the shape, click the button in the Style pane on the right, select the Create New Style option, and save the shape's style to the Widget Style.

The next time you want to use this shape style, select a shape and apply the saved widget style.

Add Style Effects to Shape

There are many shapes need to add Style Interactions, such as Buttons. Adding Style Effects to Shapes is faster than adding interactions directly(use events) to Shapes.

You can add Style Effects through the Style pane on the right or right-click on the shape and select the context menu.

After adding, preview the prototype and see the effect.

 

That's all for today's lesson.In the following lessons we will continue to introduce commonly used widgets.

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.