By Howard Pinsky
Hey everyone, I'm Howard Pinsky. And in this Adobe XD video we're going to take a look at designing and prototyping a stylized toggle switch using component states and Auto-Animate. Let's get to it.
Here we are in Adobe XD. And to start the process of creating our stylized toggle switch let's grab the good old Rectangle tool, shortcut key R, and drag out the first container. This shape is going to act as the indent that the switch will be sitting in. So, in terms of the styling, let's start by rounding out the corners completely, then setting the color to a neutral gray. It's good to keep in mind that, depending on the background you're designing on top of, these styles will likely need tweaking. Next up, we'll want to add a ridge towards the top of the shape. So activating a shadow, we can set the color to white with a decreased opacity, somewhere around 50%. To place the shadow above the layer, the Y position can be pushed into the negatives and adjusted depending on how far out you want.
Now, for the blur of the shadow, since will be blurring the entire shape in just a moment, we don't need to focus too much on this. So I'll leave it around 3. Speaking of which, along with the background blur, we can activate an object blur. And we won't want to go too crazy with this. So a value of around 5 should look good. At this point, I bet many of you are probably questioning your decision to watch this video. We've created one shape and it looks terrible. It does. But let me turn your attention to our blend modes. And I certainly encourage you to experiment to find the one that works best. For this design, Overlay will allow the shape and shadow to interact nicely with the colors and textures in the back. And once we add additional objects, it'll come together even more.
The next element we're going to add will act as the back plate for the toggle switch. And since it will be the same shape as the first, we can quickly duplicate with Command or Control+D, then bring it in a touch on all sides. Holding down Alt or Option and pulling on either side will allow you to scale from the center. With that now in place, we're not going to need the blur or shadow, but we may want to add a bit of texture to our shape. Over in Finder, I have a carbon fiber image that'll drag right in and if necessary, double-click to scale up the image within the mask. For now, I'll leave the blend mode at Normal. But once we work in some globes, we may need to adjust.
Next up, let's work on the toggle's LED screen which, like our previous shapes, we can quickly create by duplicating one of the existing ones and scaling it inwards from the center. If you're focused on precision, holding down Alt or Option and hovering over top of one of the other objects will display distance. And holding down Command or Control will allow you to use your arrows to resize by individual pixels.
For the styling of this shape we're going to start by switching the fill from a solid color over to a linear gradient. And we'll want to start the colors positioned horizontally with four stops in total: two on the sides and two in the center. The two colors on the right will be set to dark greens and the left will be set to dark reds. The sharp transition in the center of this gradient looks quite drastic, but this area will be covered up by the switch, so try to ignore it for the time being. Next, a subtle border can be added as an outline around the screen. Dark gray, with opacity around 50% should do the trick. Then finally, a shadow, but not your typical shadow. This will be set to white, opacity dropped then bumped down slightly, and blurred to around 1. Some of these styles may be difficult to see at the moment, but will definitely come through when we add in the next few elements.
Now, similar to the backplate, you can also pop in an optional texture. Since I want to experiment with blend modes again, I'm going to duplicate this existing shape, turn off the styles, then back in Finder, I have an LED screen texture which I'll drag in. To help this texture blend in with the layers behind it, a blend mode like Color Dodge can be used. And if the effect is too strong, the opacity can be dropped. 10% looks pretty good. Before we move on to the Text and Switch layers, let's add one more element to help our toggle light up. With the Ellipse tool, draw one out on the right side, where the on indicator will be, making sure it's larger than the height of the shapes, so that we have some nice light spill. Next. let's hop into the fill and switch over to a radial gradient. Here, we're going to set three stops. The one on the far left, which will be the color in the center, will be a bright, vibrant version of the color behind it. In this case, green. A little over to the right, another stop can be added, which will be slightly darker than the first. Then to wrap this up, the outer color will be a touch darker than the second. Finally, to tie this all together, the blend mode can be set to Color Dodge and an Object Blur can be applied and cranked up. Even though the On side of the toggle is likely the only side that would glow, you may consider adding one on the left as well. And since the tones are red, I'll shift all three stops up. Then, since I'm mostly concerned about a slight glow in the center, I'll tweak the color so that the two on the left are bright and the one to the right is darker with a decreased opacity. The opacity of the overall layer can then be dropped for the initial state, which we'll be creating shortly. Again, completely optional. Now, at this point you may want to revisit a few of the previous layers, which likely look a lot different with the globes in place. The back plate, for example, is looking quite out of place. Setting the blend mode to something like Overlay can help tone it down. And if your background contains too much texture, placing a dark shape behind this layer will avoid unnecessary blending. And if you want to make sure that the left doesn't end up too dark, a gradient can be used with a lighter color applied to that end. Alright, we're almost there.
Next on the list, are the On-Off labels. So with the Text tool, shortcut key T, the first label can be typed out. And the size can be quickly adjusted using the handle below the layer. Styling-wise, a slew of typefaces will work for this, like Proxima Nova. And a thick weight will help it stand out nicely. The color of these text layers are completely up to your design direction. But for this example, I'll use a dark green, then set the blend mode to Overlay to interact with the layers behind it. We can then duplicate the On label, over to the left. Change the text to Off and tweak the color if necessary. Perfect.
It's finally time to tackle the switch. And to keep consistency with the rest of our design, we can use another rounded rectangle for this shape, either by drawing out a new one, or duplicating one of the existing layers. The styling for the shape will be kept fairly basic. A subtle linear gradient can be applied to the fill to add a touch of depth. A border with a decreased opacity can add a nice bevel around the switch. Then, a shadow can be activated to pop it from the layers in the back. Since this design is on the darker side, the shadow may need a higher than usual opacity to stand out. Finally, we'll want to create a small handle over top of the shape. And just like almost every other layer we've added, a rectangle can be used with rounded corners. The fill on this element will also be set to a linear gradient, but we're going to add in additional stop very close to the top, which will help add a slight highlight to this handle. We can also throw in a shadow using the options within the Properties Inspector. Or if you're looking for more control, a separate layer can be created where the shape, gradient, and blur can be tweaked. And of course, just like with some of the previous elements, you can absolutely add in textures to heighten the effect you're going for. With the switch now complete, you may want to move it behind the green glow that we created not too long ago. This will allow some of that light to spill over. Alright.
Now that we've completed the design, it's time to bring it to life. Selecting all the layers that make up our toggle, a component can be created, either within the Properties Inspector, your document assets, or quickly with the Command or Control+K shortcut. Since we're happy with the On state, let's create the Off. And we can use the toggle trigger to help us out. Which will not only automatically wire up for the initial interaction, but the reverse as well. For this new state, we'll shift the switch over to the right to cover up the On label, Then make sure to decrease the opacity of the green glow and slightly bump up the red. And since toggle triggers are wired up by default, launching the Preview window at the top right corner will now allow us to interact with our designs by clicking to transition.
And that's how you can design and prototype a stylized toggle switch using component states and Auto-Animate. Hope you all enjoyed this video. Make sure to subscribe for more content. Follow me on Twitter and I'll see you all next week.
Use component states and Auto-Animate to make a stylized on/off toggle switch. Draw containers using the Rectangle tool and set styling in the Properties Inspector. Add drop shadows, change opacity, and blur objects. Add gradient fills and layer graphics on top of each other, then apply blend modes to see how the colors and textures interact together. Duplicate elements using keyboard shortcuts, then double-click images within a mask to resize them. Select the layers of the toggle switch, create a component, and enable the Toggle trigger to wire up both the On and Off states of the switch.
