Axure Tutorial: Make a Switch: Just Use a Circle and an Rounded Rectangle
Introduction
In other articles, I have seen a switch that is relatively simple but does not use a function.
Today I will teach you how to use a circle and an ellipse to make a switch.
Rough interactive process: Click the circle, the circle will move to the right, and the rounded rectangle will change the fill color; click the circle again, the circle will move to the left, and the rounded rectangle will cancel the fill color (details will be explained later).
Here I use text to indicate the current state of the switch, 0: for off; 1: for on.
Widgets Setup
A total of 3 widgets, a rounded rectangle background, a background with blue fill color, which is the same shape, and a round knob.
The opacity of the background with blue fill color is 0% by default.
Interactions Setup
When we click the knob, if the knob is on the left, we need to carry out the following actions:
1. Change the opacity of the background with blue fill color to 100%;
2. Move the knob to the right of the rounded rectangle;
3. change the text of the knob to 1.
We use the selected and unselected states of the knob to represent the switching state of the knob.
In this way, if it is not selected, click to select this knob; if it is selected, click to unselect this knob.
When we click the knob, if the knob is on the right, we need to carry out the following actions:
1. Change the opacity of the background with blue fill color to 0%;
2. Move the knob to the left of the rounded rectangle;
3 change the text of the knob to 0.
In this way, all the settings are completed. 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! ❤
Note: Click here to download the completed RP file for this tutorial (RP 10 or up).
Well Joe @AxureBoutique, a technology writer and teacher, focuses on Axure prototype design and product design.
Leave a comment