By Howard Pinsky
Hey everyone – I’m Howard Pinsky – Senior XD Evangelist at Adobe, and in this video we’re going to take a look at 3D Transforms in Adobe XD and how it’ll add a whole new perspective to your designs.
Here we are in Adobe XD with a mobile design I’ve been working on, and I’m at the stage in the project where I may want to create a presentation to go along with it.
Over on this artboard, I have a background image and a simple device frame that I’d like to display my app within – and since I want to be able to keep the presentation up to date when the design changes, I’m going to make my life easier by converting the entire screen into a component.
I’ll now bring in an instance to the presentation artboard and place it within the mask I have set up, just to keep everything nicely contained within the screen. Finally, I’ll make sure to place the relevant layers into a group so that when the time comes, all objects can be rotated together.
Now, I could leave this as is and call it a day, or, take it up a notch and enable 3D Transforms within the Properties Inspector. This will reveal not only new rotation fields, but also an on-canvas gizmo, which contains X and Y rotation points and a point in the middle to control depth.
I’m now able to tilt this group in both directions to give my design a whole new feel. I can also shift the screen forward or backwards without needing to worry about scaling. To help add even more depth to this presentation, let’s draw out the edge of the device, and you’ll notice that since I’m inside a 3D transformed object, elements that are created or pasted respect the existing rotations. I’ll move it behind the body shape, round out the corners, then tweak the color a touch.
Finally, I’ll pull the shadow down to give the illusion that the device is floating. As some of you may have guessed at this point, 3D Transforms works beautifully with Auto-Animate. Quickly duplicating this artboard with Command/CTRL + D, the transformations can be reset on the first screen, then I’ll push the edge that we created back in and shift the shadow closer to the device.
Now, switching over to Prototype mode, I’ll set up a Time trigger over to the second artboard with a slight delay, and for the Auto-Animate settings, Ease In-Out with a longer duration should look nice. With that set, launching the preview will kick off the animation.
At this point in the project, if changes need to be made, I can either dive into the instance to make overrides, or hop back over to the main component to push updates to all screens – even those which have been transformed. With a touch more tweaking, you can add in additional angles, work in lighting effects, and trigger your micro-interactions.
The next use case we’re going to explore, is probably the one that excites me the most – experiences for augmented reality. Here’s a project I’ve been working on where I’m building out components for various recipes that a user can select, and each contain a horizontal scroll group to quickly browse through the images.
Since my primary goal is to showcase these recipe cards in a more real-world environment, I’m going to now bring this group over to an artboard I’ve set up with an image of a kitchen – where I’ve gone ahead and dropped the z-depth so that it doesn’t intersect with the elements I’ll be shifting in a moment. I also have two layers that I extracted using Photoshop and have them overlapping the background which will help create even more depth within this experience. With that in place, this group of cards can be rotated around the Y axis to align with the kitchen counter, and if need be, I can push it back, as well.
Now, since I want users to focus on one card at a time, I can jump into the 3D transformed group and shift the depth of one of the recipes to bring it closer to the foreground, and since this group has a Stack enabled, the other cards shift as I’m transforming. It can also be rotated slightly to add additional perspective. Finally, to help these cards blend in with the environment, I can either play around with the various blend modes, or simply drop the opacity of the components. 80% for the active card and 40 for the rest look pretty good.
Of course, just like in the first example, animated prototypes can be created to really take your experiences to new levels. To transition to another recipe, the previous one can be pushed back simply by resetting the transformations, then the next can be moved forward just like we did a few moments ago, and you’re now starting to see how the extracted layers help add to the real-world feel.
Switching over to Prototype mode, I’ll link the two artboards together, and I’m thinking a nice Snap will create an enjoyable transition. Launching the preview will now let us see it in action, and once you spend a touch more time setting everything up, you’ll be able to navigate through the various cards, scroll through the images, and even interact with any states that may be present.
And that’s a look at 3D Transforms in Adobe XD, adding a whole new dimension to your designing. I’m going to be covering a lot of use cases on this channel in the coming weeks, so make sure to subscribe, follow me on Twitter, and I’ll see you all very soon.
Animate design elements by applying 3D flips and motion to objects. Simulate interactions and highlight elements with 3D animated effects. Rearrange layers, then flip and move objects on the Z Axis. Make an object rotate in 3D space around other objects.
