Axure Tutorial: Widget Styling

Introduction

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

Widget Name

  1. Distinguish different components by adding Name. You can distinguish widgets with different names on the Outline pane.
  2. Used for the operation of the function [[xxx.name]] in interaction. For example, hide the widget named Header 1.

Hide/Show

Control the shown and hidden of widgets through the show/hide property.

Align and Distribute (Multiple widgets)

X, Y, Width, Hight

x represents the x coordinate of the widget on the canvas, y represents the y coordinate of the widget on the canvas, width represents the width of the widget, and height represents the height of the widget.

Rotation

The rotation value in degrees. Can be used to make slanted tag etc.

Corner Radius

The corner radius value of the rectangle can be used to make buttons of different styles, when the value exceeds a certain size (half of the short side width), it will reach the maximum effect.

Fit to Text Width/Height

Through this property, you can set the size of the widget to change with the text size, generally used to set the button size.

Widget Style

With Widget Style, you can quickly apply preset styles to corresponding widget. We will describe this property in detail later.

Opacity

The transparency of the widget can be adjusted by the slider or by directly entering the value in the text box.

Typography

It includes several properties for setting the text style of the widget.

Fill

Widgets can be filled with color or with image.

Border

Border properties include Color, border Thickness, Pattern, Arrows, Visibility.

Shadow

Shadows are very useful for making controls with elevation. For example, Material Design uses shadows to represent the elevation of controls.

Padding

Used to set the distance of the text from the border. It usually be used in combination with Fit to Widget Width/Height property.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store