Using Toggle States in Adobe XD

What are some reasons or ways to use toggle states in Adobe XD? Toggle State allows you to create components with toggle behaviour, such as a toggle button, radio button, or even a checkbox.

Some might think, hey, the hover state can do the same thing. Hovering over an element changes its default state. But with a toggle, I can physically tap it to make it an interactive state.

In this example, we will create a rounded rectangle and a circle. My first shape was created by grabbing the rectangle and dragging it on the artboard. For the round shape, I drag one of the live corners to the center. Changing the fill of this rounded rectangle shape is easy. Select Solid Color and Linear Gradient from the drop-down menu. Choose any colours you like.

Using the ellipse shape, I draw a circle on top. If I hold down the Shift key while making a circle, my circle will take the shape of a perfectly round circle. To make the button look more 3D, I might add an inner shadow and increase the black.

For this to work properly, we need to select all the elements and create a component. On a Mac, press Command K, on a PC, press Control K or, on the right-hand side, click ‘Component +’. All the layers will be automatically merged into one component, a diamond-shaped icon will now be shown. By double-clicking on the name, I can rename this component.

Next, click the + button next to Default State of the Main Component and select Toggle State. A blue highlight will appear on the toggle state. On your computer, you can rename this state or hit enter or return to accept it as is.

After the toggle state is created, XD will automatically make bi-directional tap interactions between the Default State and the Toggle State, making the toggle state fully interactive. However, you are not done yet. You still need to move the toggle to the new location. In this case, I will click once on the diamond-shaped icon to view the inside of the component. Make sure the toggle state is selected for the ellipse tool. If you hold the shift key, slide the toggle to the right, it will slide on the same horizontal axis – the x-axis.

Let’s try it out? Press the play button in the top right corner of the property inspector. The small hand should appear when you hover over the toggle, and you can now click once to slide to the left or right. I hope this worked for you.

Use the repeat grid if you need to create more toggle buttons. Adobe XD makes it seem so easy to create toggle states. Let’s try it out? Press the play button in the top right corner of the property inspector. The small hand should appear when you hover over the toggle, and you can now click once to slide to the left or right. With multiple toggle buttons, you can slide them on or off.