By Dani Beaumont
When you're looking to add depth to your design, the inner shadow feature in Adobe XD can be a real game-changer. I'm in the middle of designing this smart home website and notice how a number of the objects seem to pop up and sit on top of the artboard. Things like the buttons on this first artboard here, on the left. Or this pod here on the second artboard. The way that I do that, is to define a drop shadow to the lower right-hand corner of the group of objects and then a highlight or in essence, an inverted shadow here towards the upper left-hand corner.
Alternatively, when you want to indicate that a button is in a pressed state or objects are sitting below the artboard, you'll want to use an inner shadow. And I have two examples of those here on the second and third artboard, where you see this kitchen dial that rotates. Let me show you how I can take this button here on this third artboard, and actually duplicate it and then create a depressed state using the inner shadow. I'll bring them into view so that I can see them a bit more clearly. And I'll come in and select this second button. Here in the Layers panel, when I expand it out, you'll notice that I have the icon and then I have a lower and upper layer. XD doesn't support multiple effects on a single layer. So, in order to apply the highlight and the shadow to the objects, I created two circles or two layers. What I'll do now is flip those from drop shadows to inner shadows or inner highlights. That gives me my inner highlight. Now let's go to the second circle and define the inner shadow.
And just like that, I have that nice depressed look to my objects. Once I have it all set I can always copy what I've just done here and paste appearance to other objects if I want to have that same inner shadow and inner highlight. And once my design is complete and I'm ready to develop the interface, publishing it as a design spec on the web will allow my developer to inspect all of the shadows and the highlights that I've defined and extract them as appropriate CSS values.
That's just a quick look at the inner shadow feature. I encourage you to give it a try.
Add depth to your designs with the inner shadow feature in Adobe XD. Create two visually different states of a button: a default state and a depressed state. In this tutorial, you’ll see an example using a kitchen dial that rotates when a button is pressed. Learn how to duplicate an object, add a drop shadow to the original object, and then add an inner shadow to the duplicated object. Along the way, you’ll try using the paste appearance feature to quickly apply the same inner shadow styling to other objects in your project.
