How to use 3D Transforms in XD

H
ave you ever wanted to give your design a little perspective? Perhaps you’re presenting a design concept and want to tilt your design, or you’re designing for AR or VR experiences and need to represent your design in a multi-dimensional world. Well whatever your angle, Adobe XD has you covered with the ability to transform elements in three dimensions.

In this guide, explore how to use 3D Transform controls, and discover some examples of how this feature can add a new dimension to how you design and prototype experiences in Adobe XD.

What is a 3D Transform?

Transforming objects has always been possible in Adobe XD, but they’ve been limited to two dimensions, whether you’re resizing, flipping or rotating objects, they happened in a flat plane. A 3D Transform allows an object to be manipulated within three dimensional space, creating tilts and rotations as well as changing the depth of an object on canvas.

Individual elements, or groups of objects can be transformed using an on-canvas Gizmo or by using the input fields in the property inspector next to the dimension properties. Transformations of objects in three dimensional space unlock a number of powerful options for designers crafting experiences for today’s world.

Transforming an element

To learn how 3D Transforms works, start with a simple shape like a rectangle. With the rectangle drawn out on canvas, navigate to the cube icon in the property inspector on the right, and toggle it on. This will reveal a series of inputs to control rotation around various axes. Selecting the rectangle will reveal a spherical gizmo centered over the element which is used to transform the object on canvas.

To tilt the object backwards along the X axis, hover over the vertical curved line to highlight that plane of rotation. Clicking and dragging that handle will rotate the object backwards or forwards around that axis.

To tilt or rotate the object side to side, select the other arrow and again click and drag to see how the shape is transformed. This will rotate the object around the y axis.

Finally, the dot in the middle allows an object to be pulled and pushed within what is called the z-depth. If you’re familiar with CSS code, Z-depth refers to where an element sits in the overall order of elements. If you want an object to stand out and be on top of other elements, it will have a high Z value, and if it should be nested behind other objects, that value will get lower. This works the same in Adobe XD, but there is the ability to set this visually. To do so, click on the blue dot in the middle of the Gizmo and drag the mouse up and down to see how the object gets closer and further.

Transforming multiple elements or groups

Transforms work the same on groups of elements as they do on a single element. Depending on the effect you’re hoping to achieve there are some different ways of approaching the transform.

Transform an entire group or Repeat Grid

If you’re hoping to transform a row of cards and have them share the same perspective, then transforming them as a group or Repeat Grid is the best approach. With all the objects selected, ensure they’re grouped together. Select the group, and one Gizmo will appear centered on top of that group.

As the group is transformed, all objects within the group, or Repeat Grid will be transformed along the same plane like it was one large object.

Individual elements, or groups of elements within the transformed group can also be manipulated by clicking into the group and applying transformations on those objects themselves. This is a great way of highlighting a single card or element within a row.

Transform multiple elements identically

Transforming a group is great for adjusting the perspective of many elements like they’re a single element. In situations where all the selected elements should be transformed identically, but individually the approach is slightly different.

Rather than selecting an entire group, click into a group (if they’re in a group) and select all the elements at once by holding SHIFT while selecting. As elements are selected, the Gizmo will transition to stay centered over all the selected elements.

Now, when transforming the objects, they won’t stay on the same plane as they did before, they’ll actually all transition around their own points of rotation, creating a much different effect.

This approach can be very helpful when trying to match the transform effects across a number of elements within a page.

Animate a 3D Transform

3D Transforms also work with Auto-Animate allowing you to create rich interactions within 3D space. To set up an Auto-Animate transition, position the elements on the first artboard, in the starting position.

Make a copy of the artboard, or copy the transformed elements to the second artboard, and transform them to fit the end position.

Finally, link them together in prototype mode with a tap trigger, and Auto-Animate as the action. On playing the preview, Adobe XD will smoothly transition between the two artboards with Auto-Animate.

Pairing Auto-Animate with 3D Transforms unlocks workflows for prototyping robust augmented reality and virtual reality applications, and taking those designs beyond two-dimensional space. Experiment with other trigger types like Drag and Voice alongside 3D Transforms to see what kinds of experiences you can create.

3D Transforms in action

There are many ways that 3D Transforms can be used to create unique, higher fidelity experiences from right inside Adobe XD, whether you’re crafting a mobile app, designing a physical experience, or simply want to showcase some designs in a 3D world, there is something for everyone.

Device mockups and presentations

How you showcase design work can make a big difference in how it is perceived. Sometimes seeing a design in context can highlight flaws in element sizing, accessibility and more. Placing designs in a device frame in the past has been a bit of an exercise, requiring plugins, and a good source for device assets. With a number of free Stock assets available from Adobe Stock, and the ability to transform objects in Adobe XD, this just got much easier.

First, import an image you wish to use. This can either be an image of a device or alternatively use a photo background and a vector object for the device frame. Place those assets on a new artboard, separate from your design.

Next, select the elements within the design you wish to showcase, and group them so they’re easier to work with. You may also choose to make this group a component if you plan on reusing it across a user flow in this perspective.

Next, transform the device and design together to the desired angle using the transform controls. Ensure all content is grouped together so that it transforms together.

Just like that, you can craft compelling 3D presentation assets to share design concepts and prototypes without leaving Adobe XD.

Augmented prototypes

In a similar fashion to device previews, 3D Transforms can be used to create prototypes within multi-dimensional space for testing and designing for augmented or virtual reality applications.

Take for instance a heads up display, or infotainment system in a vehicle. The experience and interface elements can be designed in two dimensional space, and then can be transformed into three-dimensional space and shown in the context of a vehicle dashboard, making it possible to create more compelling prototypes and interactions.

To do this, set up your first artboard with the objects transformed into 3D space. Copy the artboard, and adjust the elements to create the next stage of the interaction. Prototype triggers and actions work the same in three dimensions as they do in two dimensions. Connect your design together using taps, drags or voice, and use Auto-Animate to bring it all together.

Adding depth to interface elements

Operating systems like iOS and tvOS incorporate elements of depth when interacting with interface elements. Design systems like Material Design incorporate depth as well as a form of feedback on interactivity and importance. These elements of depth can be incorporated in several ways.

Notifications

In iOS, related notifications are grouped together, and layered in a stack like order that can fan open when tapped on. Creating this effect in Adobe XD is now possible with 3D Transforms.

Taking a group of notifications, the z-depth can be adjusted for each one, pushing them back in the canvas to appear behind the top notification. This can be controlled on canvas using the Gizmo, or for finer control, use the input field in the property inspector.

Translating each element down several pixels will create a cascading effect as seen in the latest iOS interfaces.

Editing widgets

In iOS 14 the new widgets interface introduces depth, and transformations in 3D space. As you swipe through available widgets, each preview block is transformed slightly. Recreating this in Adobe XD is simple.

Next, duplicate the artboard to create the end state. Reposition the widgets so the next one in the row is centered, and slightly adjust the rotation so there is some movement during the interaction. Taking the flat design, adjust the widgets using 3D Transforms. A slight tilt on both axes is enough to create the effect.

Finally select the widget group and apply a drag trigger with Auto-Animate between artboards. Dragging on the widgets in preview mode will mirror the interactions available in iOS.

These examples simply scratch the surface of what is possible with 3D Transforms in Adobe XD. Whether you’re adding some perspective to showcase a design concept, or adding richer micro-interactions, creating transformations on elements in Adobe XD is incredibly simple.

3D Transforms and how to use them in Adobe XD.