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 the widgets properties and style panel

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

Transcript

So you've placed your widgets on the canvas - but how do you style them? Here comes the Widget Properties panel to the rescue!

When you select a widget, this panel populates itself with the distinct values of the widget. You can then modify the values any way you want. Let's focus specifically on some of the elements of the panel, starting by Location and Size.

When you select only one widget, you can specify the width, height as well as the position of the widget relatively to the upper right corner of the canvas. You can also choose to rotate the widget by entering degrees, and if the widget supports entering text, you can also rotate the text within the widget. Now look what happens if you select two or more widgets. This section divides itself in two parts: the upper part lets you modify each widget individually, whereas the lower part has an effect on all the widgets, at the same time.

Another interesting section is this one, over here. The corner radius lets you round the corners of a shape, if you want to create fancy buttons for instance. Note that you can also achieve this by using the yellow triangle on the top left corner of a shape too, but it's less convenient. You can also apply a set of shadows: box shadow, like so, or inner shadow, like so. Please use those settings wisely as you can really quickly do something very ugly. And the world does not need ugly wireframes, trust me on that.

Finally, we have the alignment and padding panels, that really applies only to text objects. Everything here is self explanatory, except perhaps the line spacing setting. If you are familiar with HTML and CSS, it's the equivalent to the line-height property in CSS. Line spacing is used to indicate the spacing between lines inside a paragraph. Most of the time, 22px is a good default line spacing to have.

Continue your learning