Provide app users with clear visual feedback by designing an on/off switch for settings in your UI using Adobe XD.
Closeup of hands holding a cell phone, screen shows Shipping updates field with a user interface switch set to ‘Off’

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.

Toolbar shows square and circle, canvas has 2 ovals each with a circle inside, appearance panel has border radius set to 18

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.

4 styles of UI switch controls, each has an on/off state, 2 have text labels, 2 show colors indicating different states

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

Side-by-side app screen design with gray UI switch in ‘off’ position on the left, and yellow ‘on’ position on the right

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.

Side-by-side app design with gray UI switch selected and animation properties show Transition is Dissolve, Easing is Ease Out

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

09/02/2020

Adobe Stock contributor: Farknot Architect

¿Le ha servido de ayuda esta página?