Axure Template · Axure Tutorial · Axure Widget · Elementary · Switch · May 14, 2022

Axure Tutorial: Make Switch with Dynamic Panel

by WELLJOE

Introduction

There are many ways to make a switch, the simplest of which is through the dynamic panel. Today, let's learn how to quickly make a switch through a dynamic panel.

Widgets Setup

Drag a dynamic panel into the canvas. Add 2 states. Make knob and background track of switch in two states respectively.

Interactions Setup

When the mouse button up, move the knobs in both States to the specified position (the position of on or off is different), and set the animation for a certain time. After waiting for the same time, set the dynamic panel to another state.

In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.

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.