Creating a Rotating Product Interface for E-Commerce with Adobe XD

Image source: Adobe Stock Premium collection / Blend Images.

When you want to make a product stand out on an e-commerce site, it’s a great idea to give users a 360-degree view. With Adobe XD, you can design an interface that offers a rotating view of your product, and then you can turn your design into an interactive prototype that shows exactly how the experience will work on the web or mobile.

Preparing your layout

Start with a defined area for your product interaction. In the example below, the webpage artboard contains an area for the product photo and some navigation buttons.

It’s a good idea to convert all the elements of this area into a component so you can use it across multiple artboards. To do this, select the elements, choose Make Component in the File menu, and name the component product widget.

You’ll need a series of photos that show different views of the product as it is rotated 360 degrees. In the example below, the branded product design was rotated 12 times in 30-degree increments along the Y-axis in Adobe Dimension. Need a 3D model? Adobe Stock is a great place to look.

Next, create an artboard the same size as the product widget component and name it rotation-1. Add the product widget component to the artboard, and then duplicate the artboard 10 times to create 11 total artboards. Name the artboards rotation-2 through rotation-12.

Now, add the first photo in the product series to the component on the webpage artboard. You’ll see that photo is added to all of the overlay artboards as well.

Finally, add the second product photo to the rotation-2 artboard and repeat this process until you have all the artboards filled with your product rotation photos.

Making your interface interactive

Switch to the Prototype workspace in XD, and then select the right arrow in the product widget component on the webpage artboard. Drag the small blue linking arrow from this element to the rotation-2 artboard to create a link. In the Interaction panel, set the action to overlay, and then move the green positioning box directly over the component on the main artboard.

Next, select the left arrow in the component on the main artboard and link it to the rotation-12 artboard using the same properties as before.

Continue by linking the right arrow of the product widget component on the rotation-2 artboard to the rotation-3 artboard, and the left arrow to the rotation-1 artboard. Repeat this process of linking each component arrow in each rotation artboard to the next and previous artboards, respectively.

When you’ve finished linking the arrows, preview your prototype by clicking the play icon in the Prototype workspace and then clicking the arrows in the product widget. You’ll get a preview of how the product will rotate each time a user clicks or taps it.

Learn to use Dimension and Adobe XD together to create an engaging eCommerce experience

Discover how to use Dimension and XD to take control of product design as well as experience design. Join us online to learn how to design and prototype a rotating product interface. You’ll create and brand a product in Dimension, and then you’ll export a range of 360-degree images that you can make interactive in XD.

In our eCommerce 360º Product with XD + Dimension webinar, you’ll learn how to:

Adobe Creative Cloud e-learning series: eCommerce 360º Product with XD + Dimension