Toggle switch - Adobe XD Tutorial

- [Howard] Hey everyone, I'm Howard Penske. And in this Adobe XD tip, I'm going to show you how to create a toggle switch using components and States. On this design, let's assume for a moment that inside of this section here, the setting section, you want to create a switch so that your users and testers can turn these different private explicit filters, friends' activity on and off. So, what we're going to do, we're going to grab the rectangle tool from the tools bar on the left and we're going to start creating our first toggle switch. So I'm going to just draw out a shape that looks like that, right? It looks great, except it doesn't look that great just yet. So we're going to make a few stylists to changes. First off, we're going to round out the corners and that can be done very easily by grabbing one of the handles on the inside and (mumbles) pulling this on him, right? Next thing we want to do because this will be the off state, We want to change the background color to a more neutral color. White is okay. But if we drop it down to about gray somewhere right about there, it'll give the impression that the switch is off. And we can also give it a little bit a very subtle border, just like that, right? To help separate it from that white background, perfect. Now, the last thing we want to add is the actual toggle switch. So, I'm going to grab my lips tool. I'm going to hold down my shift key and draw one out just like that. And you can zoom in here to really see what's going on to make sure that's exact size that you're looking for right? Just like that. We can even make it a little bit bigger. I'm holding down alter option and shift in, just like that. Now I can move it on over to the left which will be where the off position is. Now for this one, all we have to do is just turn off the border and we've got a nice switch. You can also if you want to add a bit of a shadow or you can turn that border back on and have a little subtle shadow, just like that, right? Completely up to you. But because this is the off switch doesn't have to be too fancy, we're going to leave it as is. All right. So we've got our off state created but now we want to make sure to turn this into a component so we can actually set up the interaction. So with both the shape selected, I'm going to hold down my shift key and click on the non-selected shape, over in the properties inspector to the right we're going to press the plus button. You can also do this inside of your libraries panel in your asset section you can press the plus button there but I'm going to go ahead and press it over in the properties inspector only because we want to now create an additional state which can be done using that same plus button. So I'm going to go ahead and press new state, I'm going to name this on just like that. And now that the state has been created and is active all we need to do is hop in here and just shift this over and then change the background color. I have some great colors inside of my assets right here. So I'll go ahead and shift this to let's say a nice purple, we can turn off the border if you want to there's a nice amount of contrast so it looks pretty good. And now if I press escape to go to the parent level of this component, we've got our on state in our off state, right? Which is great, but, we want to make sure that we can cycle between these when previewing this prototype. So, I'm on my default state. I'm going to go into the prototype mode right here at the top and since I want users to tap on this trigger, I want to just simply click on the blue handle to the right. This will allow me to choose a destination state within the properties inspector. It's going to automatically default to auto animate. And of course you can change the easing options down below. Let's go for a nice snap and we'll do a very quick duration. Let's try 0.4. We may go back and change that but we'll start with 0.4. And then we can go to our on state, do the exact same thing click and then choose our default state which is off, right? All right. So now at the very top right-hand corner we can launch the preview and then we can click and we can click just like that. Now, of course, if you needed to you can make some additional changes. So I'm taking a look at that. You know, when I look at the preview it looks a little bit too long. So all I need to do is go into my default state on the main component and just shift this inward a little bit to make it a little bit smaller, right? And you're going to notice it also because I was editing into the default state on the main component. It also changed my on state. So once again, click, click on and off, looks pretty good. Now, one of the cool benefits of wiring up the main component which is this component here with a solid diamond is that all of your instances are wired up as well. So, if I wanted a few extra, let me zoom out. If I wanted a few extra of these toggle switches going down, right? All I have to do is either duplicate them, hold down alter option or it can also pop them into a repeat grid so I can press the repeat grid option right here at the top and then drag out three more. Just the spacing, and now if I press play one more time, I can toggle any of these switches on, in no particular order. And now you have a functional toggle switch using Adobe XD.