If you have a question to ask or an idea to share, come and participate in Adobe XD Community. We would love to hear from you and see your creations.
Looking for information on how to simulate 3D effects when creating immersive and interactive experiences in Adobe XD? You have arrived at the right place!
3D Transforms feature lets you simulate object depth and perspective in your designs with minimal effort. Combining the ability to rotate any object along its horizontal and vertical axis, and applying depth along the Z-axis, you can mimic visual effects such as 3D animations, mockups in perspective, card flip interactions, and many more.
Ensure that you are familiar with design and prototype workflows in XD and these limitations.
To enable 3D Transforms, select the required object and click the 3D Transforms icon in the Property Inspector.
New object controls appear in the Transform section and the gizmo icon is available in the center of the current selected object. Move the icon to the left, right, top, and bottom.
You can modify the axis values in the Property Inspector or rotate the gizmo icon to rotate objects along the axis.
After you enable the 3D Transforms icon in the Property Inspector, follow these steps to tweak the object orientation along the X and Y axis:
Now that you've learned how to enable 3D Transforms and rotate objects along the X and Y axis, take a step forward and explore how to use the third dimension - the Z axis.
When designing a stack of cards in perspective or creating card flip interactions, you can move objects on the Z axis to create a sense of depth for the layers. Watch this animated illustration to learn how to apply depth along the Z axis.
When you resize objects that have X or Y rotation, the Z depth value also changes automatically resulting in content reordering. For example, when designing a group of cards, in perspective, each card rotates at the same angle, but with different depth. If you multi-select those cards and choose to resize them, they will resize as needed. However, the Z value changes for each card and results in content reordering.
When you change the Z depth value for any object, XD does not support layer ordering methods such as Bring to Front, Send to Back, and reordering from Layers pane.
"With 3D Transforms in Adobe XD, you can simulate object depth and perspective with just a few clicks on the design canvas" - Dani Beaumont, Principal Product Manager, Adobe XD.
Watch this video to learn how to work with 3D Transforms in XD.
Viewing time: 3 minutes.
Now that you know how to work with 3D Transforms in XD, here are some handy tips and tricks:
We've got you started with how to enable and use 3D Transforms within your designs. Take a step forward and learn how to animate them and share them with designers or stakeholders for feedback.