Create a UI switch

Feel free to download the practice file to follow along. Or, use these concepts to design your own. 

Combine basic shapes to create On and Off states for your UI switch. Our switch consists of a rectangle with rounded corners and a circle. We first designed the Off state with the circle in front of the rectangle and to the left. Then, we copied the two shapes and moved the circle to the right to design the On state.

Experiment with different colors, shapes, and shadows in the Appearance panel to create the right style. You can also add text directly to the switch elements to label the different states.

Here’s the style we liked for the switch elements in this app design.

Combine components of each switch into a group and drop it into your artboard design. Go to Prototype mode and wire the Off switch to the On artboard and vice versa. Be sure to preserve the scroll position to create a smooth user experience.

Now you can create your own UI switches for the user settings in your apps.