Axure Tutorial: Widget Styling
Introduction
This article is a part of course Axure Full Course: Tutorial, Tips and Templates.
Style attributes can be set to almost every widget. There are two main ways to set style property, one is through the Style Toolbar on the top screen, and the other is through the Style Pane on the right.
Widget Styling
Now let's introduce how to style widgets through the Rectangle (Box).
Widget Name
There are two uses for the Widget Name:
- Distinguish different components by adding Name. You can distinguish widgets with different names on the Outline pane.
- 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)
Align and Distribute buttons
Align and distribute multiple widgets
Align Left: Align multiple widgets according to the left border, you need to select multiple widgets.
Align Center: Align multiple widgets according to the center axis, you need to select multiple widgets.
Align Right: Align multiple widgets according to the right border, you need to select multiple widgets.
Align Top: Align multiple widgets according to the top border, you need to select multiple widgets.
Align Center: Align multiple widgets according to the middle axis, you need to select multiple widgets.
Align Button: Align multiple widgets according to the bottom border, you need to select 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.
By entering in the corresponding text box, you can change the above attribute value 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.
You can set the visibility of the 4 corners by clicking the button.
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.
Apply widget style
Opacity
The transparency of the widget can be adjusted by the slider or by directly entering the value in the text box.
Note: The value of Opacity is different from the Opacity in the Color Fill, it is directly applied to the entire widget, including the border.
Typography
It includes several properties for setting the text style of the widget.
Font: Used to select font. If you are designing a web page, it is recommended to use Web Safe fonts. When previewing the prototype, it will also be the same as the one displayed on the canvas.
Font Style: Each font has its font style, such as Aria font has Regular, Bold, Italic, Bold Italic styles. Some styles are not available in some fonts.
Font Size: The size of the text, you can choose a preset size, or you can choose a custom size.
Font Color: Choose font color via color picker.
Line Height: Set the line height of the text, the default is auto.
Align Left: Align text to the widget left.
Align Center: Align text to the widget center.
Align Right: Align text to the widget right.
Justify: Distribute text to control widget. The distance between characters may be pulled up.
Align Top: Align text to the widget top.
Align Middle: Align text to the widget middle.
Align Bottom: Align text to the widget bottom.
More text options:
Bulleted list: Used to add a bullet to text.
Base Line: Including Normal, Superscript, Subscript. Select the text and click the drop-down list option to apply.
Letter Case: Including Normal, Uppercase, Lowercase. Select the text and click the drop-down list option to apply.
Character Spacing: The default is 0, you can change it by entering digit.
Text Shadow: Add a shadow to the text, you can set the x-axis, y-axis offset, and Blur value.
Fill
Widgets can be filled with color or with image.
1. Fill with color.
You can click the color block button to open the color picker selection, or directly enter the hexadecimal color code.
Fill: On the Color picker, you can choose Solid, Linear, or Radial fill.
Colorspace: You can choose the color cards mode or the mode of the color gamut map.
Input Mode: You can choose the color input mode as HEX or RGB.
Eyedropper tool: You can use the eyedropper tool to pick colors directly on the screen.
Opacity: You can change the opacity of fill in the form of percentage, or choose full transparency directly.
Favorites: You can save frequently used colors as Favorites, and you can use them directly next time.
By adding design system colors like Material Design, Bootstrap to Favorites, you can quickly apply them.
Colors in Material Design
2. Set image
If image is set, the image will be filled by Image first.
No Repeat: Place the selected image directly in the original size.
Image Repeat: Repeats the selected image vertically and horizontally.
Repeat Horizontal: Repeat the image only horizontally.
Repeat Vertical: Repeat the image only vertically.
Stretch to Cover: Stretch an image to cover the entire widget. At the same time, the image ratio remains the same
Stretch to Contain: The image is resized, covering the size of the entire widget vertically or horizontally,
Stretch Horizontal and Vertical: Stretch the image to the entire widget size, the image ratio may change.
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.
Material Design uses shadows to represent Elevations
Shadow includes outer shadow and inner shadow (click the overflow button to show the setting panel).
Color: the color of the shadow.
X: The X-axis offset value of the shadow.
Y: Y-axis offset value of the shadow.
Blur: The Blur value of the shadow.
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.
When entering text, the Padding value ensures that the button style is consistent.
That's all for today's lesson. Next lesson we will introduce using Widget Style Manager to apply typography, color palette and shadows.
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