By Dani Beaumont
With 3D Transforms in Adobe XD you can simulate object depth and perspective with just a few clicks on the design canvas. This can be incredibly useful as you build out device mock-ups and interactions like card flips, or three-dimensional layering. And best of all, the transforms are completely non-destructive and can be easily applied to multiple instances across your design.
To create a 3D Transform I'll start by selecting the object or group of objects that I want to transform. I'll go ahead and select this plant card here on the design canvas, and then here in the Properties Inspector on the right-hand side in the Transform area I'm going to toggle on 3D Transform. Notice back on the design canvas a control or a gizmo appears. This allows me to drag horizontally to change the y axis. If I select the second handle and press and drag up and down it controls the x axis. And here towards the center by pressing and dragging I can control the depth or the z-index for the selected group.
Now, notice as I do this, how it changes the attributes back there in the Properties Inspector. If I want to, at any time I can always go to that Properties Inspector directly and change those values manually. So perhaps I want this to be more of a 15 degree rotation, and we'll go ahead and change this one to 5 degrees. I can also toggle the control on and off using a handy keyboard shortcut. That would be CMD on Mac, or CTRL on window, and the letter "t". One of the wonderful parts of Adobe XD is how well features combine and give you the design velocity you need to work quickly. I've used the Repeat Grid feature here on the right to duplicate and vary the card a few times with some custom text and images. I want to go ahead and move them into a stack and apply the 3D transform to give that stack some depth. I'll start by selecting the grid, and then enabling 3D. I'll use that keyboard shortcut to do so. So next I'll experiment with the X and Y axis. I know I want to apply a different depth to each card, so I'll go ahead and ungroup the grid, and I'll come in and select each item and change the Z order or the stack. So as I come to this second item here, I'll go ahead and bring it in a bit smaller and a little bit over. And I'll do the same with my third object.
Once again a little bit smaller and further over. Notice that I can interact with this stack in some pretty interesting ways that allow me to play with it visually. The best part here is that these transforms are non-destructive. So if I realize I'd like to come in and crop an image differently, I can just come into that object and change the way that that object is sized or placed. Let's say make it a bit larger. When I click off, that 3D transform applies once again. I can do the same with text. Let's say come into this text object by double-clicking on it, I can come in and change some my wording here. When I hit ESC, once again, it applies that 3D Transform.
Well as usual, we've just scratched the surface of this capability. I encourage you to give it a try.
Create truly unique experiences by incorporating 3D transformations in your prototypes and designs. Select objects and apply transforms like flips and rotations that appear to move through three-dimensional space. Add 3D Transforms to your projects to make objects zip and move around on the screen.
