Axure Tutorial: Automatically Resize Buttons Based on Text Content!
Introduction
When using Axure to design prototype, we often need to adjust the length and width of the button. We usually use the mouse to drag to adjust it. However, when the length of the button text is different, the frequent dragging will be very complicated. Is there any way to improve the efficiency?
Preview
Let's take a look at the completed prototype first ~ (the buttons are mainly used on the desktop end, which are frequently used when making background prototypes)
Making Method
First we select a widget you need to use. Generally speaking, the following two widgets with borders are used, and the color can be modified according to the situation.
Secondly, we need to deal with the margins and radius of the widget. This step is to deal with the beauty of the button.
Here I select this element and set padding on this element:
- L is left (left padding, that is, the distance between the text and the left border)
- T is top (top padding, that is, the distance between the text and the upper border)
- R is right (right padding, that is, the distance between the text and the right border)
- B is bottom (bottom padding, that is, the distance between the text and the lower border)
In addition, you can also set radius, letter spacing, font size, etc., which will not be discussed in detail here.
Finally, we adjust the widget size according to the content.
Select the widget, click the two buttons shown in the image below, click the horizontal button on the left to automatically adjust the width, and click the vertical button on the right to automatically adjust the height.
Tips: When you manually stretch the size of the widget, the automatic resizing function will fail. If you need to automatically adjust, you need to click again.
In this way, it is very convenient to use it by copying it! Have you learned it?
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