Provide app users with clear visual feedback by designing an on/off switch for settings in your UI using Adobe XD CC.
create-ui-switch_1000x560

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.

create-ui-switch_step1

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.

create-ui-switch_step2

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

create-ui-switch_step3

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.

create-ui-switch_step4

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

11/05/2018

Adobe Stock contributor: Farknot Architect

Was this page helpful?