Totalwireframe is now free for everyone.

Oh! You are the type of people who browses the web on your mobile. Good, good. Everything works on mobile, including the purchase process.

Understanding widgets

  • Duration: 03:02
  • Level: beginner
  • Axure Version: 7.0+
  • Date: Jun 26, 2015


Axure comes with a bunch of default widgets: an image widget, some text options like H1, paragraph or labels, and rectangle.

So how do you use widgets?

Well, to use them, simply drag and drop widgets into the canvas. And that's it.

To each widget, you can apply some styling. Like this and this, for instance.

Now, you can see that if I place this rectangle near that rectangle, a part of it is hidden. This is because this rectangle has been placed on the canvas after that one. You can change this by clicking on one of those buttons.

There are multiple options with widgets in terms of placement.

First, you can align them. To do so, you need to select at least two widgets and click on the menu here, then choose the alignment you want. You can also distribute horizontally or vertically the widgets. Let's show you how that works.

You need a minimum of three widgets to understand how distribution works. So let's put a third widget on the canvas. There we go. Now, select the three widgets and click here. See what this does. If we select the horizontal orientation, this is what we have. If we select the vertical one, we have this. Using Distribution in combination with Alignement is incredibly powerful and honestly, I use it all the time.

Now, let me tell you about something else. When you move the widgets close to one another, you can notice that there are some blue lines that appear. Those guides are actually here to help you position widgets with each other. With this behaviour you can easily align widgets horizontally or vertically. If you need more, there are what Axure calls guides. Guides are lines that you can display on the screen to, well, guide you with the alignment of the widgets. Here is an example.

Imagine that you need to have a piece of text, some rectangles and a button on a complex wireframe. Here we go, let me place them for you. Now, you want to make sure that all those widgets start at the exact same top position, right? Well, let's create a guide to help us through that. First, put your mouse on the margin of the screen and drag and move the cursor, without releasing your finger. Do you see the line that appears? You can then place it wherever you want. This applies for the other dimension too. Once a guide has been placed, it can always be either moved, like this, or removed completely, like this. You can also choose to lock the guides you just created, so you don't accidentally move them or delete them. Note that the guides you create that way do not appear on the other pages. This is an important detail.

Continue your learning