For this design, Overlay will allow the shape and shadow to interact nicely with the colors and textures in the back. And I certainly encourage you to experiment to find the one that works best.

But let me turn your attention to our blend modes. We've created one shape and it looks terrible.

At this point, I bet many of you are probably questioning your decision to watch this video. And we won't want to go too crazy with this. Speaking of which, along with the background blur, we can activate an object blur. 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. 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. So activating a shadow, we can set the color to white with a decreased opacity, somewhere around 50%. Next up, we'll want to add a ridge towards the top of the shape. It's good to keep in mind that, depending on the background you're designing on top of, these styles will likely need tweaking. So, in terms of the styling, let's start by rounding out the corners completely, then setting the color to a neutral gray. This shape is going to act as the indent that the switch will be sitting in. 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. 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.

Imagenes de prototype 3