The toggle switch — that tiny element we flip on and off a countless number of times per day to personalise 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 to 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.