25th Jun 2021

Adobe XD 3D Transform

UI/UX

Written By, Karan Makawana

Overview

Ever wondered if magic can happen with one click? Yes, it’s possible, with some recent updates in the Adobe XD’s feature, we can design in a new dimension with the 3D transformations tool. So, in this blog, we will learn about it. Let’s begin.

What is 3D Transform?

Adobe XD always supports designing with two dimensions, like scale, rotate, and flip an object in the flat surface from the beginning, now we can design or manipulate any object or layer within three-dimensional space with the help of the 3D transform feature. We can create tilt and add depth to the layer in Z-axis on the canvas, pretty cool !!

How does it work?

We can apply 3D transformations to any individual element or group of objects or layers but, we have to select the layer and enable 3D transformation from the property-panel, to simulate the 3D effect.

3d-transform-work-1

After enabling 3D Transformations, new object controls will appear in the Transform section and Gizmo at the center of the selected object.

3d-transform-work-2

apply-effect-with Gizmo

Auto-Animate with 3D Transform

We can create a prototype, it’s also working with Auto-Animate, and so that means we can create an animation within 3D space.

First of all, select an object/ layer/ group on the first artboard with an initial position. Create a copy of that artboard, arrange the layer, and apply a transformation to the desired object.

The last step, active prototype mode, link both artboards, choose Auto-Animate as the action, set your easing style with the duration, DONE !! Enjoy smooth transitions.

auto-animate-3D

With Auto-Animate and 3D Transform, we can create amazing 3D experiences. It is handy to create unique augmented reality (AR) and virtual reality (VR) effects.

Check out another shot on Dribbble, which we create with the help of Auto-Animate and 3D transforms.

smart-home

Dribbble Shot Link:

https://dribbble.com/shots/14758908-Smart-Home-Concept-Adobe-XD-Playoff

Conclusion

I hope that this blog might be helpful to all the Adobe XD users to create a 3D Transform effect in their work. We have learned how to transform in the third dimension and how it works with Auto-Animate. For more such blogs, stay connected!

Written By,

UI/UX Designer at Yudiz Solutions Pvt. Ltd