By Howard Pinsky
The toggle switch — that tiny element we flip on and off a countless number of times per day to personalize every aspect of our digital lives. These simple components are often composed of a rounded rectangle and an ellipse, and they almost always make sounds while in use. Whoop! Whoom! Or is that just in my head? Anyway...
"But how can I prototype one of these in Adobe XD?" you're likely asking. Once you've designed either the on or off state, select all necessary layers and create a new component, either within the Properties Inspector, Document Assets, or the Command or Control-K shortcut.
Next, a new state can be added. And would you look at that? A Toggle State is available which will automatically wire up State 1 to State 2 and State 2 back to State 1. Your layers can now be modified, and with this being the on state, I'll want to make sure it's brighter and more vibrant than the off.
With that, both states are ready to go, and previewing the prototype will let us immediately interact with them. Your toggles can also be included within Repeat Grids to help you create lists of controls.
And since the interactions were added to the main component, they'll all be wired up and ready to go when previewing.
Learn how to design a toggle switch, the common UI element that is flipped on and off to enable and disable options in websites and apps. In this tutorial, you’ll explore how these simple input elements can be created by drawing a rounded rectangle and an ellipse. After styling either the on or off state, select all the layers in your toggle switch design and create a new component. Then you can add new state — a Toggle state. The Toggle state automatically wires up State 1 to State 2 and State 2 back to State 1. Then update the appearance of each state to provide visual cues indicating whether the toggle switch is turned on or off.
